この記事はp5.jsでのクリエイティブコーディングの研究を扱っており、一つのフレームに二つの視覚言語を組み合わせています：入れ子状のワイヤーフレームの3Dキューブという厳格な構造と、Sonia Delaunayとオルフィスムに触発された平面的な2Dレイヤーです。結果はVJ投影とアンビエント音楽のパフォーマンス向けに特に設計しました。
一つのイメージに二つのシステム
基礎は互いに入れ子になった4つのワイヤーフレーム・キューブから作りました。まず各キューブをわずかに異なる速度で回転させ、穏やかな機械的リズムを生み出しています。さらに、辺に沿って公転しスライドする小さな点を配置しました — これらは幾何学に忠実に動きながら、構造を通るエネルギーのような生きた脈動を加えます。
その上にオルフィックなオーバーレイを重ねました：同心のリングやアークが重なり合い、互いに切り込んで動きのコラージュを作ります。このレイヤーは意図的に平面的でグラフィックな表現にしており、キューブの奥行きに対する対位となっています。これら二つのシステムが組み合わさることで、長時間の投影でも成立する静かな視覚的緊張感が生まれます。
色を動きとして
Delaunayの同時対比に沿ったパレットを選びました：赤、黄、青、オレンジ、緑、白、黒。ここで色は装飾ではなく、知覚される動きを駆動する要素です。その結果、アニメーションが控えめでも画面は絶えず変化します。ゆっくりした回転と強いコントラストが常に新たな組み合わせを生み出すからです。
重要な点として、白は塗料ではなく「空間」として扱っています。本来白になるはずのセグメントを透過にして黒い背景を見せることで、リングは暗闇から切り取られたように感じられ、より軽やかで建築的な印象になります。
なぜアンビエント音楽に合うのか
アンビエント音楽は速い編集を必要としません。むしろ、呼吸することのできるビジュアルが求められます。だからこそアニメーションを遅くし、レイヤーを重ねたままにしています。キューブは構造を与え、円やアークはリズムと色の動きをもたらします。さらに、公転する点が安定した脈動を作り出します。これらが合わさることで、投影に適した静かな緊張感が生まれ、数分間見続けても新たな組み合わせを発見できます。
このクリエイティブコーディングの研究は、私のResolumeでのライブVJプロジェクション作品と直接つながっています。
技術的ノート — p5.js WEBGL
このビジュアルはp5.jsのWEBGLモードで1920×1080として制作しました。すべてを単純な形状と繰り返しパターンから構築しています：リングはセグメント化したジオメトリ、アークはスライスするレイヤー、キューブはワイヤーフレームとして表現しました。シェーダーや外部依存は使わず、コードはスクラッチから全て書いており、構図と動きだけで成立させています。
最後に、この作品をもっと見たい場合は、クリエイティブコーディングの概要またはFDR-Soundの音楽ページを訪れてください。
