7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-10-13

風の可視化に触発されて

qupom-dbxrd.gif

最近こういう風速を可視化した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の微分方程式の解を可視化してみました
h658e-qqh4w.gif

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?