インタラクティブデモがたくさんあって見てるだけでも本当に楽しい! gregtatum.com
個人サイトだが完成度高し!
今回ご紹介するのは、海外の個人サイトです。
3D グラフィックスや、Canvas などをもちいたデモを多数公開している gregtatum.com――
そのドメイン名にもなっている Greg Tatum 氏の生み出す独特な雰囲気はすごく心地よいです。
インタラクティブに操作できるものがたくさんあるので、いろんな意味で参考になるのではと思います。
作品はどれもアーティスティック
サイトのトップには、3D グラフィックやオンラインデモのキャプチャなどが並べられています。
どれもパッと見ただけでクオリティが高そうというのがわかります。
恐らくトップページの背景は一番最近公開したものをその都度、差し替えているのかな?
こうやってタイル状に並べられているものを見るだけで、なんとなくワクワクしてきますね。
3D グラフィックス系のエントリはその制作過程などを紹介する内容になっています。
一方、オンラインデモに関しては個別のエントリページに行くと、デモページやソースコードを公開する github などへのリンクが置かれています。
重力を表現したデモ。Pixi.js などを使っているみたい。
簡単な説明と、利用しているライブラリや技術がタグとして付けられているので、気になるものを探すときに役に立つかもしれません。
動的フラクタルツリー生成デモ
今回ピックアップしたいのは、たくさんあるデモの中でも、三次元+フラクタルという面白い試みをしているデモ。
こちらもユーザーの操作によってさまざまに表情を変えます。
フィールドには何やら渦巻きのような模様が描かれていて、画面の中央には「DRAW HERE」と書かれています。
促されたとおりに、画面内にマウスで適当に線を引いてみます。
こんな感じで、マウスでドラッグした軌跡に線が描かれます。
マウスのドラッグを離すと……
美しいフラクタルツリーが現れます。
静止画ではわかりにくいですが、このフラクタルの樹はゆったりと空間内を回転するようになっていて、いろいろな角度から眺められます。
また、簡易的なライティングもされているみたいで、見る角度によってその色の鮮やかさなどが変化します。
ランダムに生成されるツリーの枝の数はそのときどきによって変わるので、ついつい何度も描いてしまいます。
金魚の水槽にこんな感じの水草生えてたなあ……
ここで紹介したもの以外にも、たくさんのデモが公開されています。
どれも簡単なものですが、非常に興味深いものばかりです。
ぜひご覧になってみてください。