寿命の見える化 / Three.jsを使ったクリエイティブコーディング
メディアアート作品「LIFEENERGY/ライフエナジー」に関する記事です。コンセプトと、参考にしたコードや本について書いています。制作したのは2015年、デザインを始めて約１年後です。
何をビジュアライズするか
もともと技術開発をしていたためか「データのビジュアライズ」をしたいなという思いが以前からなんとなくありました。世にあるインタラクティブコンテンツやいわゆるメディアアートも、何かの数値を美しくビジュアライズしている作品が多く、比較的発想しやすい視点でもありました。
何をビジュアライズするかがポイントとなるわけですが、まず最初はインプットから。よく見ていたのは以下のサイトです。
- Three.js : https://threejs.org/
Three.jsのライブラリを使ったサイトがポートフォリオ形式で多数載っているのですが、この中でも特によく見ていたのは以下のサイトです。
- I Remember : http://i-remember.fr/
アルツハイマー病をテーマに作られたサイトで、世界中の人々が記憶を残す形で写真とメッセージを投稿でき、その記憶が一つ一つのパーティクルとしてサイト内に実際に存在し続けるのですが…。このサイトの特徴は、時間経過とともに投稿された記憶が一つ一つ消えていってしまうという点です。つまり、誰かが投稿し続けない限り、このサイト自体がなくなってしまうということです。
記憶が消える儚さ…とても切ない世界観だなと感動しました。
このサイトが、僕がビジュアル化したい世界観とすぐにリンクしました。また、以前から命の有限性に気付けるかどうかって大切だよなーと、ちょっと哲学的な思考を巡らすことが多かったので、寿命を見える化しようという発想に至りました。
個人的な志向ですが、
「死」を意識する機会はもっと日常的にあっていいと思っていて、いまの自分がどうしたいか？という質問に対する答えは、自分が死ぬ時にどうなっていたいかという最後を起点に決まるものだと、そんな風に思うんです。
震災被害をテレビで見たりすると、人間いつ死ぬかわからないなと感じたり、「死」って怖いなと感じたりしますよね。この感覚は自分の人生と向き合う上で大切なものだと思っていて、でも時が流れるとともにどこか他人事になって、また日常に戻ってしまう。
という観点から、自分の寿命を見える化することで「何かを感じる」作品を作りたいなと考えました。
参考にしたもの
LIFEENERGYの世界を構築する上で参考にしたコードがいくつかあります。全てをいちから作るのは困難なので、サンプルコードをガリガリいじってイメージする世界観に近づけていきました。
- https://threejs.org/examples/#webgl_sprites
- https://threejs.org/examples/#webgl_points_sprites
- https://threejs.org/examples/#webgl_shaders_sky
- https://threejs.org/examples/#webgl_materials_blending
- https://threejs.org/examples/#webgl_gpu_particle_system
他にもあった気がしますが、記憶が…w
いじるにしても基本がないとできないので、そこは次の本で勉強しました。現状、日本語での選択肢はこの２冊ぐらいしかないと思います。（今見ると改訂版が出てますね）
上下の２冊ですが、下は全部やる必要ないです。作るものに合わせてポイントを絞ってやる方が早いです。
javascriptの基本、Three.jsの基本、そしてサンプルコードをいじることができると、こんな作品を作ることができます。
LIFE ENERGY : http://mymoment.jp/lifeenergy/