Edited at

磁力線や電気力線(のようなもの)を可視化する


風の可視化に触発されて

最近こういう風速を可視化したCGを目にする事はありませんか?

東京風速

Earth

Windy

風の動きが良くわかりますよね。台風が近づくと見入ってしまいます。

どうやって描画しているのかなかなかわからなかったのですが

先日 Generative Design の p5.jsのサイトを見ていてわかったのです

Generative Design with p5.js

風の可視化は この中の M_1_5_02 の例とほぼ同様で描画できる事に気がつきました

風速のデータ(とその取り扱い)を用意するには ちょっと手間がかかるので

とりあえず磁力線のようなものを描いてみる事にしました


アルゴリズム


  1. 点オブジェクトを乱数の座標で多数(例えば5000ぐらい)発生させる

  2. それぞれの点オブジェクトはベクトル場によって移動する。この時、軌跡を描く

  3. 画面を更新する時にアルファつき(5〜10%ぐらい)で画面をクリアする

  4. 画面をはみ出した点の座標を乱数で初期化する

  5. 点オブジェクトに寿命(TTL)をもたせて寿命が切れたら乱数の座標で初期化する

電荷を二つ(+)と(−)を用意して そのまわりの電場・・・のようなものを

風速のように流れるイメージで可視化してみました

物理的、数学的に厳密なものではありません


ソースコード

スケッチ(p5js web editor)

https://editor.p5js.org/wittyfool/sketches/r1nvkxAcQ

 # おまけ

同様の方法で Van der Polの微分方程式の解を可視化してみました