風の可視化に触発されて
最近こういう風速を可視化したCGを目にする事はありませんか?
風の動きが良くわかりますよね。台風が近づくと見入ってしまいます。
どうやって描画しているのかなかなかわからなかったのですが
先日 Generative Design の p5.jsのサイトを見ていてわかったのです
風の可視化は この中の M_1_5_02 の例とほぼ同様で描画できる事に気がつきました
風速のデータ(とその取り扱い)を用意するには ちょっと手間がかかるので
とりあえず磁力線のようなものを描いてみる事にしました
アルゴリズム
- 点オブジェクトを乱数の座標で多数(例えば5000ぐらい)発生させる
- それぞれの点オブジェクトはベクトル場によって移動する。この時、軌跡を描く
- 画面を更新する時にアルファつき(5〜10%ぐらい)で画面をクリアする
- 画面をはみ出した点の座標を乱数で初期化する
- 点オブジェクトに寿命(TTL)をもたせて寿命が切れたら乱数の座標で初期化する
電荷を二つ(+)と(−)を用意して そのまわりの電場・・・のようなものを
風速のように流れるイメージで可視化してみました
物理的、数学的に厳密なものではありません
ソースコード
スケッチ(p5js web editor)
https://editor.p5js.org/wittyfool/sketches/r1nvkxAcQ