2Dの流体 (stable fluids) の表現を使ってクリエイティブコーディングをしてみた。
今回は、2Dの流体 (stable fluids) を使用したクリエイティブコーディングのお話です。以下のサイトのmenu画面の背景のような表現ですね。
個人的には非常に思い出深い表現で、というのもフリーランスの一発目のお仕事が、この表現を使用したものだったからです。
もうすでにリニューアルされてしまっていますが、水曜日のカンパネラのオフィシャルサイトの背景にこの表現を使用していました。
当時、デザイナーさんに「こういうのやりたい」と参考サイトを見せられて、「できますよ」と言ってみたはいいものの、WebGLにあまり慣れてなかった自分には実装難易度が高く、心を折られかけた表現です。
いろいろ調べていると、この表現は「stable fluids」である、ということを知りました。
ちょっと前にホムンクルスの荒井さんがおしゃれなコンテンツを実装していたり(Chrome Experimentsに掲載！！)
最近だと、かのKeijiro TakahashiさんもUnityで実装されていました。
前置きが長くなってしまいましたが、以下の4つが今回実装したものです。
colorful 2D fluid simulation (basic branch)
mix fluid (mix branch)
displacement by fluid (displacement branch)
fluid affected by force field (master branch)
今回も、前回同様、ブランチを分けて違う表現を作ってみました。
ソースコードは以下から。
正直、何から手を付けていいのかわからず、まずはググりまくって参考になるサイトをいろいろ見つけました。
参考にしたのはこのあたりですね。
詳しい説明は(難しいのでというか上記参考サイトに書いてあるので)省きますが、格子法という方法を使用し、「速度」「圧力」「発散」の値を毎フレームごとテクスチャに保存し、更新しつつ、それらの値を使用して描画しています (超適当)。
では僕が実装した4つの表現を超ざっくり解説します。
最初の3つはマウスによって波が起こるようにしています。これはマウスの位置から放射状に「速度」を加算して得られる結果です。
colorful 2D fluid simulation (basic branch)
これは、HSV色空間で色を算出する際に「速度」と「圧力」の値を使って描画しています。よってマウスの動きがない場合は「速度」も「圧力」も0なので、均一な色 (厳密には自動で波立つように微量な速度を与え続けている) になりますが、マウスによって「速度」が変化すると「圧力」も変化し、それによって色も変化する、というものです。(Hueの値は時間経過でも変化するようになっています。)
mix fluid (mix branch)
2つ目は、水面に描かれた絵がマウスによってかき混ぜられるような表現です。
これは、まず最初の絵を描画し、その状態をテクスチャに保存。そしてマウスの動きによって各ピクセル上の「速度」が決まるので、テクスチャの絵をその値に応じてUVの値を変化させて描画し、その状態をまたテクスチャに保存、、、とい処理のを繰り返し行っています。
要は、前フレームの絵を「速度」の値を使ってずらして更新していく、というものです。
また、マウスで力が加わったところは微妙に色が変わるようになっています。
displacement by fluid (displacement branch)
3つ目は2つ目とよく似ていますが、2つ目と違い、前フレームの状態を保存していないので、波がおさまってくるにつれて、もとの絵に戻っていきます。
fluid affected by force field (master branch)
こちらは色の描画の方法は1つ目と同じようなものですが、「速度」を加算する位置を、マウスではなくある幾何学的な形になるようにしています。
この幾何学的な形はスピログラフで (以下のwikipediaのリンクを見たら分かる人もいると思いますが、幾何学模様を描くための定規のおもちゃ) 描かれる図形になっています。
この図形は数学的には「トロコイド」と呼ばれる図形で、このトロコイドを使用したクリエイティブコーディングもやっているので、そちらの解説時に触れてみたいと思います。
・・・
さて、今回も超ざっくりな解説になってしまいしたが、流体の表現は (個人的にはですが) 実装難易度が高いと思うのでまずはコピペでちょっとずつ値を変えたりしながら深掘りしていくのが良い気がします。
サポートいただければ、レッドブルを飲んでより頑張れると思います。翼を授けてください。