物理
JavaScritp
GenerativeArt
DefferentialGrowth

final.png

Real-time differential growth in JavaScript がとてもきれいなので、どういう仕組みになっているのか気になってしまったので、分かったことを書き留めておきます。
上記のアルゴリズムの説明はこちらに書かれていますので、最初にご覧いただくと良いかと思います。

基本構造

上記のぐにゃぐにゃした線は、ノード(点)の数珠つなぎになっています。簡単に言うと一次元配列です。
wireframe.png

そこで、このノード間に以下の作用が働いています。
1. 近くにあるノードを押す
P_20180202_150348_vHDR_Autoのコピー.jpg

2.左右のノードの真ん中に戻ろうとする
P_20180202_150348_vHDR_Autoのコピー2.jpg

3.左右のノードにあたかもスプリングがついているように、離れていると近づけようとし、近いと離れようとする
P_20180202_150355_vHDR_Auto.jpg

ぐにゃぐにゃさせるために必要なこと

各ノードには上記3つの作用のみが働いています。ぐにゃぐにゃした形状にするためには、少しお膳立てをする必要があります。

P_20180202_150405_vHDR_Autoのコピー.jpg

全てのノードが一直線に並んでいると、力が働く方向も一直線になり曲がりません。少しでもズレが生じると、そこからズレが大きく広がっていきます。なので、ズレが生じるような形状でノードを配置する必要があります。

P_20180202_150412_vHDR_Auto.jpg

一番左と右のノードが止められている、位置が固定されており動かないようにしておくと、曲がったままを維持できますが、これが止められていないと、次第に伸びていってしまい、最終的には線になります。

P_20180202_150412_vHDR_Autoのコピー.jpg

ノードとノードが離れていて押し合う力が及ばないほど離れていると曲がりません。

実演

最初はノードが一直線になっており、曲がりませんが、マウスを近づけて、マウスの近くのノードを押してズレを生じさせると、そこから曲がっていきます。
capture7.gif

一番左右のノードを固定しないと伸びていってしまいます。
capture8.gif

ノード密度が低いと曲がりません。
capture9.gif

教訓?

Differential Growth のアルゴリズムを使って面白い形状を作りたい場合は、どこかに力が貯まる仕組みを入れないといけない。一番左右のノードを固定するとか。
ノードを円形に繋げることも思いつくが、そうすると最終的には円になってしまうだろう。

調べる過程でできた面白いもの

https://hogehogeman.tumblr.com/post/170410628421/code
https://hogehogeman.tumblr.com/post/170410595595/code
https://hogehogeman.tumblr.com/post/170410584167/code