ねこでじ(Nekodigi)

Nekodigi’s diary

学習中の気づきをまとめています。応援よろしくお願いします

【Processing】電車の車輪が脱線しない仕組みを視覚化する。

成果物

www.youtube.com
コルクを二つくっつけたような形のものを正確に物理演算できれば問題ないのですが、かなりの精度が必要となるため、実際にはうまくできません。そこで、数学的に、計算することで解決しました。
なぜこの形だと脱線しないのかについては、こちらの実験などをご覧ください。
電車にはハンドルがないのになぜカーブを曲がれるのか 東京大学で勉強してきた - ITmedia NEWS

仕組み

※ここでは単純化して説明しています。
 \begin{array}{l}
※車輪は両端の半径が0、真ん中の半径がrです。\\
車輪が接しているところの半径Lr,Rrは車輪の両端からの距離dstL,R、車輪の長さwlから求められます。\\
Lr\ =\ dstL/wl*r*2;\\
Rr\ =\ dstR/wl*r*2;\\
車輪は円軌道を描きます。またその円の中心とそれに近い方の車輪の接点の距離xは\\
\ x\ =\ wl*Rr/( Lr-Rr)\\
atan2で車輪の角度を求めます。\\
float\ theta\ =\ atan2( B.y-A.y,\ B.x-A.x)\\
円軌道上で移動する角度を定数speedを使って求めます。\\
float\ dtheta\ =\ -speed/x;\\
※LrとRrのどちらが大きいかで場合分けします。詳しくはこちらをコードをご覧ください。\\
円軌道の中心aor、aorと車輪の近い端の距離dstB\_aorは\\
aor\ =\ PVector.add( interR,\ PVector.fromAngle( theta) .mult( x))\\
dstB\_aor\ =\ PVector.dist( B,\ aor)\\
円軌道にそって、新しい位置を求めます。これを繰り返すと結果が得られます。\\
newB=aor+PVector.fromAngle( theta+dtheta) \cdotp ( -dstB\_aor))\\
newA=aor+PVector.fromAngle( theta+dtheta) \cdotp ( -dstB\_aor-wl))
\end{array}

コード

Mechanism of train wheel という名前で追加しています。
github.com

【Processing】水の中にダイブする物理シュミレーションをする。

成果物

f:id:Nekodigi:20200707214712g:plain

仕組み

前作った、シンプルにバウンドするだけのシュミレーションに、画面の半分より下に来たら、0.9の割合で速度を減衰させ、上に1.5加速させるとこのような結果が得られます。
今回は、衝突がないので、比較的簡単です。もっと詳しく学びたい方にはこちらのサイトがおすすめです。
How to Create a Custom 2D Physics Engine: The Basics and Impulse Resolution

コード

Dive into Waterという名前で追加しています。
改変前のものはSimple Bouncing Ballという名前です。
github.com

【Processing】砂漠のシュミレーションをする

成果物

www.youtube.com
HoudiniのEntagmaさんが砂漠のシュミレーションの方法を紹介していたので、Processingでも実装してみました。どのように実装するのか分からず、長年放置していたましたが、やっと解決できました。

仕組み

風の向きと砂の勾配の内積を求め、その分だけ高さを下げた後、砂をなだらかにすればこの様な結果が得られます。こちらの動画ではアルゴリズムを組む流れも紹介されているので、チェックしてみてください。
https://www.youtube.com/watch?v=YiAtM4EpQ4U

コード

Desert Simulationという名前で追加しています。
github.com

【Processing】Curl Noiseを実装する。

成果物

Houdiniを使っていてCurl Noiseというものが気になったので調べてみると、3次元ベクトル場の回転を求めるだけで実装できることが分かったので、やってみました。吸い込みや巻き込みなく、一か所に集まったりしないというのが特徴で、実際に上手く動作しているようでした。障害物を避けることが出来るようなのですが、方法が分からないのでまた見つかったらやってみたいと思います。
f:id:Nekodigi:20200706200428p:plain
これはCurl Noiseの入力に使ったSimplexノイズに従ってパーティクルを動かしてみた様子です。こちらは固まって動いていて、ムラがあります。
f:id:Nekodigi:20200706200213p:plain
これはCurl Noiseに従ってパーティクルを動かしてみた様子です。長時間動かしても固まることなく均一に分布しました。

仕組み

三次元ベクトルのrotAを∇×Aで求めているだけです。また、SimplexノイズやPerlinノイズの出力は一次元なのですが、異なるオフセットを加えた3種類のデータを三次元ベクトルとみなしています。こちらの解説がわかりやすいです。
Curl Noise書いてみた - Qiita
また、今回は、三次元場とオフセットを加えた計四次元が必要だったので、OpenSimplexノイズを利用しました。
gist.github.com

コード

Curl Noiseという名前で追加しています。
github.com

【Processing】Delaunay図、Voronoi図とPolygon offsetを組み合わせて、破片が小さくなって消えていくアニメーションを作る。

成果物

Delaunay

www.youtube.com

Voronoi

www.youtube.com
もっと早く作りたかったのですが、内側にオフセットするというのがなかなか曲者で、処理が非常に難解です。また、パーツの厚みで消えるまでの時間が異なるので、色を変えることによって違和感をなくしています。なんとか、Delaunay図とVoronoi図の両方に対応させることができました。Convex hullの自己交差が非常に複雑で本当に大変でした…

仕組み

どちらも、Convex hullのマスになっているので、Polygon Offsetの自己交差を任意のConvex hull解決する方法を考えました。下のの記事を更新したのでそちらをご覧ください。
nekodigi.hatenablog.com
また、Delaunay図、Voronoi図についてはこちらをご覧ください。
nekodigi.hatenablog.com

コード

Voronoi Animation Size for Maskという名前で追加しています。
github.comhttps://www.youtube.com/watch?v=y4t4ddl7D9k

【Processing】ガウシアンぼかしを使ったReaction Diffusionアルゴリズム

成果物

www.youtube.com
Houdiniで、Reaction Diffusionをボリュームのぼかしを使ってシンプルに実装していた方がいたので、Processingで仕組みを確かめてみました。Gray Scottを使った場合とはまた違った結果になって面白いです。

様々な値でのテスト

※左上に、どんな値に設定したかが書いてあります。
f:id:Nekodigi:20200705223309p:plain:w200f:id:Nekodigi:20200705223320p:plain:w200
f:id:Nekodigi:20200705223330p:plain:w200f:id:Nekodigi:20200705223340p:plain:w200

仕組み

こちらで仕組みを紹介しています。
nekodigi.hatenablog.com

コード

Blur_Reaction_Diffusionという名前で追加しています。
github.com

【Processing】迷路を浸食し、A-Starアルゴリズムで最短経路を調べる

成果物

www.youtube.com
迷路の出っ張った部分を削除していけばまるで浸食されるような結果が得られるのではないかということでやってみました。また、浸食された迷路は洞窟のように広い空間があるので、よりA-Starアルゴリズムの性質が分かりやすいです。

仕組み

今回のコードは、前回のコードに、隣接する3,4マスが開いているなら、自分も開けるというコードを足しただけのものです。
nekodigi.hatenablog.com

コード

A-Starアルゴリズムと相性が良かったので、A-Star AlgorithmsリポジトリにErodeMazeという名前で追加しています。
github.com

【Processing】画像から音を生成する。

成果物

www.youtube.com
NASAで星の音の音源を探していると、画像のY座標を周波数、輝度を音量?のようにして音を生成しているページを見つけたので、さっそく実装してみました。ただ、あまりたくさんの音を重ねるとうまくいかなかったので、少ない数を足し合わせています。
GMS: Hubble Treasure Trove Sonification

仕組み

初めにY座標をもとにSin波の周波数を決めます。そして、右にずらしていきながら、画素の明るさに従って音量を決定します。

コード

Image to Sound という名前で追加しています。
github.com

【Processing】ACSII ArtをFloyd Steinberg Ditheringで滑らかにする。

成果物

www.youtube.com
もはや、Ascii Artと呼んでいいのか分からないぐらいの大きさです(笑)今回は、画像を少ない色で表現するFloyd Stainberg Dithering という仕組みを使って、滑らかな表現に挑戦してみました。左下がFloyd Stainberg Dithering あり、右下が近い色で置き換えをしたものなのですが、少し見た目が改善できているのかなと思います。使う文字数を削減した場合はより顕著に差が現れます。

仕組み

Floyd Steinberg Ditheringについては過去記事をご覧ください。文字の明るさは、シンプルにPGraphicsを作成して、文字を描画し塗りつぶされたPixel数を数えることで計算しています。
nekodigi.hatenablog.com

コード

ASCII Art という名前で追加しています。
github.com

【Processing】画像の勾配にそって粒子を移動させ、特徴をはっきり表現する。

成果物

www.youtube.com
この動画を見て、衝撃を受けたので、どんな仕組みなのか考えてみました。堀が深い部分に粒子が集まっている印象を受けたので、画像の勾配を使って粒子を動かしてみると、なかなかうまくいきました、さらに、滝のような効果が生み出せることが分かったので、ほかの場面でも使えるかもしれません。
https://www.youtube.com/watch?v=ZzNO3FvkTJM&t=57s

仕組み

画像の明るさの勾配に沿って粒子を加速し、決まった方向に一定量加速するとこの様な結果が得られます。ただし、そのままではよい結果が得られないので、減速度など、色々なパラメーターを調節しています。

コード

Image Gradientという名前で追加しています。
github.com

【Processing】円盤に音声スペクトラムを記録する

成果物

www.youtube.com
こちらの動画を見て、とても良いアイデアだと思ったので、自分でも作ってみました。本家にはかないませんが、動きは再現できました。
https://www.youtube.com/watch?v=H3UqKe_Bwoc

仕組み

Minimというライブラリを使って音声の周波数情報を取得してそれを色の濃さとして円盤に記録しています。今回は、点を何度も打ってディスクを描いているのですが、点の大きさを適切にとる必要があるので注意です。

コード


音声はこちらから各自ダウンロードしてください。
Solar Sounds

【Processing】DelaunayとVoronoi図で、動画のシーン推移のアニメーションを作る。

成果物

今回は、過去に作ったHull Voronoiを使ってチャンネルのイントロのためのシーン推移のアニメーションを作ってみました。

Delaunay

www.youtube.com

使用例

www.youtube.com

Voronoi

www.youtube.com

仕組み

過去の記事を参考にしてください。
nekodigi.hatenablog.com

コード

Voronoi Animation for Maskという名前で追加しています。
github.com

【Processing】9点円を実装する。

成果物

www.youtube.com
前回、傍心のコードを書いたので、その延長として9点円を実装してみました。

仕組み

9点円は垂線の足3つ、辺の長さ中点3つ、垂心と頂点の中点3つを通る円のことです。
三角形の五心についてはこちらをご覧ください。
nekodigi.hatenablog.com
Wikipediaで詳しい解説を確認できます。
Nine-point circle - Wikipedia

コード

Nine Point Circleという名前で追加しています。
github.com

【Processing】もう少し早く知っておきたかったコツ、Tipまとめ。

きっかけ

私は現在、数名の人にProcessingを教えていて、そういえば始めたばかりの時はこんな事も知らなかった、早く知っておきたかったということがあったのでまとめておこうと思います。

一覧

Ctrl+Fで単語を検索、置き換えも可能。
三項演算子、条件式が真のときは左、偽の時は右を採用。
条件式?A:B
長さが変えられる配列。
ArrayList
x,yのデータをまとめたり、座標の計算をするのに便利。
PVector
間違って消してしまったデータを復元
qiita.com
色の重ね方を指定する。ADDモードは重なっているところが明るくなってきれい。
BlendMode
一秒間のフレーム数を変えられる。
FrameRate
しっかりと実力が付くCoding Train、一度はあきらめたけれど、早いうちから真剣にやっておけばよかった…
https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw
番外編のファイル構造、Cドライブ直下にAssetsというフォルダを作って、その中に作品をまとめて保管しておくと、ファイル転送がしやすい&英語のファイル名に統一しておけばエラーも起きにくい。
Assets > ProjectFiles > Processing Data

【Processing】三角形の五心を全て実装する

成果物

www.youtube.com
今まで、外心をよく使っていたのですが、垂心や傍心などはほとんど使ったことがなかったので実装してみました。三角関数を使って表されている場合もあるのですが、計算の負荷などを考え、使わずにする方法をなんとか見つけました。

仕組み

定義などはこちらを参考にしてください
三角形の五心の覚えておくべき性質を整理 | 高校数学の美しい物語

重心,Centroid,Center of Gravity

各頂点位置の平均を求めるだけです。
(x_G,y_G)=(\dfrac{x_A+x_B+x_C}{3},\dfrac{y_A+y_B+y_C}{3})

外心,Circumcenter

多くのサイトで三角関数を使って表されていますが、こちらの長めの数式を使うと、使わずに計算できます。
  \begin{array}{l}
{\displaystyle D=2( A_{x} (B_{y} -C_{y} )+B_{x} (C_{y} -A_{y} )+C_{x} (A_{y} -B_{y} )) .}\\
外心=( U_{x} ,U_{y})\\
{\displaystyle \begin{aligned}
U_{x} & =\frac{1}{D}\left( (A^{2}_{x} +A^{2}_{y} )(B_{y} -C_{y} )+(B^{2}_{x} +B^{2}_{y} )(C_{y} -A_{y} )+(C^{2}_{x} +C^{2}_{y} )(A_{y} -B_{y} )\right)\\
U_{y} & =\frac{1}{D}\left( (A^{2}_{x} +A^{2}_{y} )(C_{x} -B_{x} )+(B^{2}_{x} +B^{2}_{y} )(A_{x} -C_{x} )+(C^{2}_{x} +C^{2}_{y} )(B_{x} -A_{x} )\right)
\end{aligned}} \ 
\end{array}
外接円の半径は、外心と任意の頂点との距離を求めると得られます。
How do I find the circumcenter of the triangle using python without external libraries? - Stack Overflow

内心,Inner center, Incenter

頂点の座標を辺の長さで重み付けをするようにして得られます。
{\displaystyle \frac{a(x_{A} ,y_{A} )+b(x_{B} ,y_{B} )+c(x_{C} ,y_{C} )}{a+b+c}}
Incircle and excircles of a triangle - Wikipedia
また、内心円の半径は次の式で求められます。
{\displaystyle r=\frac{\sqrt{s(s-a)(s-b)(s-c)}}{s} ,} where\ {\displaystyle s=\frac{{\displaystyle a+b+c}}{2}}
Incircle and excircles of a triangle - Wikipedia

垂心,Orthocenter

少し長いですが、垂心はこちらの式で求めることができます。
 \begin{array}{l}
辺AB,辺BCの傾きを求めます。\\
ABm=\frac{B_{y} -A_{y}}{B_{x} -A_{x}}\\
BCm=\frac{C_{y} -B_{y}}{C_{x} -B_{x}}\\
傾き\frac{-1}{ABm} はABmに垂直なので、辺AB,辺BCの接線の方程式は\dotsc \\
y=\frac{-1}{ABm} x+b_{1} \ ( 1)\\
y=\frac{-1}{BCm} x+b_{2}\\
辺ABの接線はCを、辺BCの接線はAを通過するので、b_{1} ,b_{2} は\dotsc \\
b_{1} =C_{y} +\frac{C_{x}}{ABm}\\
b_{2} =A_{y} +\frac{A_{x}}{BCm}\\
二つの接線が交わる点なので\dotsc \\
\frac{-1}{ABm} x+b_{1} =\frac{-1}{BCm} x+b_{2}\\
x\left(\frac{-1}{ABm} +\frac{1}{BCm}\right) =b_{2} -b_{1}\\
x=\frac{b_{2} -b_{1}}{\frac{-1}{ABm} +\frac{1}{BCm}}\\
( 1) に代入して\\
y=\frac{-1}{ABm} x+b_{1}
\end{array}
こちらのサイトを元に実装に適した形に書き換えました。
How To Find Orthocenter of a Triangle | 4 Easy Steps (Video)

傍心,Excenter

三線座標系というものが内心では1:1:1なのですが、傍心では-1:1:1なので、それを利用して求めているようです。詳しくはこちらをご覧ください。
geometry - Finding the Excenter of a Triangle. - Mathematics Stack Exchange
傍心は三つあるので注意です。

コード

Five Triangle Centersという名前で追加しています。
github.com