🎡タコ星人　キラキラArts #1

2020年12月5日 04:15

t=0,setup=()=>{createCanvas(192,157),noStroke()},draw=()=>{for(t+=.005,(B=blendMode)(NORMAL),background(0),B(DIFFERENCE),i=0;i<6;i++)for(d=0;d<72;d+=4)ellipse(cos(N=noise(i,t-.002*d)*TAU*2)*d+96+30*cos(t),sin(N)*d+90,9-sqrt(d))};//#tinycode @CCodeMadrid #p5t #つぶやきProcessing https://t.co/1z8BVZUlEv pic.twitter.com/LyWdbtiq00
— はぅ君 (@Hau_kun) December 4, 2020

解説ページもあった

何語だこれ

どうもスペイン語らしい。。。。解説してるようだが、java版みたいなのでそもそもp5.jsで動かん

まず一定区間点を打つ
MAPを使う

let value = 25;
let m = map(value, 0, 100, 0, width);
ellipse(m, 50, 10, 10);

上の最初の例では、数字25は、0から100までの範囲の値から、ウィンドウの左端(0)から右端(幅)までの範囲の値に変換されます。

ある画面範囲に収まるように変換してくれるということらしい

ここまでできたが、画面がすげーちらつく。フレームのせいとは言い切れないので、このままの大きさでまず仕組みを理解してゆく。

初期化を忘れないこと、死んでもやめんじゃねーぞ

java版だとfloat宣言するとゼロになるみたいだったが、javascriptだとそうじゃないみたいなのでletしたがもっときれいな方法があるはず

そしていよいよ触手がダイナミックなタコ回転するコード

function draw() {
 clear();
 t+=.005;
 x = 360; 
 y = 360;
 for (d=.5; d>0; d-=.01) {
   circle(x, y, d*40);
   x += (noise(d+t)-.5)*30;
   y += (noise(d+t,9)-.5)*30;
 }
}

いいんじゃないか。母さん

いよいよ完成

きもかっこいい

落穂拾い　Blendomodeや元のコードについてなど

初期化に気を付けながら動くコードを手に入れたが、Blendmodeについてよく見ていなかった。

下敷きになっている画像から色を減算します。

重なった部分がこれで反転するようになって、触手のきもい感じをだしているようだった。noseについては別の記事があるので、そこをふくらましていく。

オリジナル版との違い

ループ中でブレンドモードかえている？
サークルでなくエクリプス

なのだが、こっちのほうがゆったりしていて好きなので、ブレンドモードの実験はいつかしよう

生きてるって、なんだろう？

ソースを見る限りのマジックはブレンドモード以外ではやはりパーリンノイズということになる。パーリンノイズでイソギンチャクからタコ星人に進化するわけだが、パーリンノイズって結局なんなんだ。

通常、実装には3つのステップがあります：1)ランダムな勾配ベクトルのグリッドの定義、2)勾配ベクトルとそのオフセット間のドット積の計算、3)およびこれらの値間の補間です。

勝手な要約だが、ざらざらのでたらめなでこぼこをこさえて、そのうえでドット積の計算と補間をしてなめらかさとでたらめさを両立すると。

ノイズを制するものは、世界を制す

書いてはみたが、いわゆるシーケンシャルな動きの滑らかさを補完するような式を書いたときに、値の決定をノイズにゆだねるということのようだ。

これでタコ星人の動きが手に入るならやすいもんだ。（なにが）

お願い致します

🎡タコ星人 キラキラArts #1