作品について
| 媒体: | Webサイト |
|---|---|
| 制作年: | 2016年 |
| 状況: | view-of-polyhedron.comにて公開、随時Update |
| 技術/ソフト: | Three.js(WebGLライブラリ), WebAudioAPI |
| Source Code: | 未公開 |
制作の動機
プラトンと正多面体
正多面体は、辺の長さも頂点の性質も面も同じでありながら全ての面を正多角形で構成されている美しい立体です。正多面体は5つしかありません。完成された対称性を持った希少性のある立体として宝石のようにも感じますが、ギリシア哲学者、イスラム数学者、ルネサンス期の画家などをはじめ多くの先人達の琴線に触れた図形だといわれています。
5つの正多面体はギリシアの哲学者のプラトンによって発見されたとされています。プラトンはその完全性から宇宙を想起し、5つの多面体に対して宇宙を構成する素を寓意として込めたと言われています。同時に、プラトンは、不純物や物理的に矛盾のない理想的な概念世界をモデルとして哲学や数学を発展させたことで知られています。理想や完全性を愛でたプラトン、正多面体そのものの美しさ。この関係性は、興味深いモチーフのように感じられました。
3次元の立体描画に対する技術的な障壁がかなり低くなった現在、こうしたモチーフを再解釈し表現できる可能性があると感じました。そこでまず、プラトンが寓意として想像したような、正多面体が構成する概念的な宇宙世界を創ろうと考えました。
視座の個性と不安定さ
正多面体を作っているなかで、カメラ位置を正多面体の内部に置くと面白い絵が見れるということに気が付きました。正多面体は正多角形の平面で覆わえているため、中から見ると、正多角形が並べられているような画面が得られるため、当然といえば当然、幾何学的に美しい見え方になります。正多面体は外から見ても美しいが中から見ても美しいのです。
同時に自転したり公転したりする軌道の中で、同じ方向に視点を向けていても、予測不可能な動きがあり、絵として面白いことがわかりました。
単純化・理想化された空間でも、視点の数は多く存在するし、見え方・捉え方はその座標や運動の仕方によって大きく異なるのです。これは、私たちの生きる社会でも、言葉の捉え方から、目的の共有といった、いたるところでも共感できる部分です。
正多面体の宇宙世界という表現が、視座（考え・価値観）の多様性や、そのフィルターから見る世界の不安定さや不確実さがのメタファーにも同時になりうると、制作プロセスの中で結果的に発見できました。
制作の過程
モデル制作
単純に正多面体を描画するのであれば、Three.jsライブラリ内に既成のGeometryクラスが存在するため、簡単にブラウザ上に描画できてしまいます。それだけでも美しいと言えますが、表現としては陳腐なので、正多面体の面や頂点に多少のアレンジを加えることを考えました。
クロムウェル著の「多面体」という本で、正多面体の頂点を切り落としたり、辺を潰したりすることで、正多面体の亜種のような美しい図形が得られることを知りました。同著によるとアルキメデスが発見したとされているので、アルキメデス立体とも言われています。
プラトン立体の中にアルキメデス立体を内包させ、そのワイヤーを描いたり、面を塗ったりすることで、美しい図形ができないかプログラムを何個か書きました。
結果的に以下のようなプラトン立体とアルキメデス立体を組み合わせた図形を創るに至りました。
| 名称 | プラトン立体 | アルキメデス立体 | 音 |
|---|---|---|---|
| Tetra | 正四面体 | 立方八面体 | ベースメロディー |
| Cube | 立方体 | 歪立方体 | ドラム |
| Octa | 正八面体 | 切頭八面体 | ベース |
| Dodeca | 正十二面体 | 二十・十二面体 | ピアノ |
| Icosa | 正二十面体 | 切頭二十面体 | マリンバ |
上記のモデルについては、Three.jsの既成クラスは利用せず、THREE.Object3D を継承したクラスを自作しました。プラトン立体の頂点座標とインデックスは既成クラスを参考に書き写しましたが、アルキメデス立体の頂点や、面上の模様は、全て、ベクトル計算によって、ブラウザ描画時に決定されています。描画色の色や透明度の設定値は外部ファイル化し、トライアンドエラーができるようにしました。（UIにスライダーがあっても良かったのですが作品ぽくなくなってしまうのでやめました。）
3D世界の表現
次に、物体を配置して面として美しく構成されるにはどうするかを考えました。宇宙的な世界を表現をするため、太陽系のような同心円上の公転・自転をさせることに落ち着きました。さらに視点の位置や図像のバランスを考える中で、立体内部からの視点移動をするとおもしろいということを発見したのは前述の通りです。
Inside #geometry created with #threejs #creativecoding
Ayumu Nagamatsuさん(@ayumu_naga)が投稿した動画 –
理想的・概念的な世界を表現することを念頭にしつつ、自分の趣向を取り入れるため、SFでよくあるようなホログラムのような質感を加えました。実際には、Three.jsのシェーダーを使ったポストプロセスで、ブラー、被写界深度、ビネット、オールドフィルムのフィルターを重ねました。ポストプロセスのシェーダーは、Alterd Qualia氏がThree.jsのサンプル上で記述しているプログラムをほぼそのまま利用させていただきました。
また、前掲のオブジェクトの表に音のカラムがありますが、楽曲を構成する音が個々の多面体から鳴っているように設定しました。これによって、それぞれの視座の時に聞こえる音が遠近によって変化して、聴覚でもオブジェクトの存在や位置を意識することが可能となります。なお、再生される楽曲は私のつくった Endless という曲です。
参考
P.R.クロムウェル著 「多面体」
参考多面体の数学的特徴と、発見の歴史を論じています。正多面体以外でも美しい立体についての説明が豊富で見ていて飽きません。
数学的な説明もありますが、正多面体にまつわる歴史的説明やトリビアがとにかく面白く、これを読んでインスピレーションというか、多面体を通して何か表現したいという衝動に駆り立てられたように感じます。
ラファエル・ローゼンダール
ブラウザを用いてインタラクティブな絵画表現すをるスタイルとしてラファエル・ローゼンダール ( Rafaël Rozendaal / http://www.newrafael.com/websites ) を参考として挙げます。 彼はインターネットの黎明期から、ブラウザを絵画的に使った表現で作品を制作されており、そのスタイルの新規性に加え、純粋な美しさ・ユーモアにおいて秀でた作品が多いです。
彼に倣って、ブラウザによるインタラクティブな絵画表現を今後も深めれればと思います。