Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

風の可視化に触発されて

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

wittyfool@github
フリーランスITエンジニア
http://nt55.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away