つぶやきProcessingでFlow Fieldやってみた

2023年2月27日 16:35

こんにちは、AQUARING かにです。
今回は @gin_graphic さんが主催されているp5.js勉強会の第一回で紹介されていた Flow Flield（ベクトル場）を使ったつぶやきProcessingのスケッチを紹介していきます。

TweetProcessing - 230208

たまにはこういうのもやってみる

setup=_=>{createCanvas(W=800,W)
background(0)
stroke(t=W,4)
P=[R=random]
for(i=W*3;i--;)P[i]={x:R(W),y:R(W)}}
draw=_=>{for(p of P)x=p.x,y=p.y,N=z=>noise(x/99,y/99,z+t/W)-.5,point(p.x=(x+N(0)+W)%W,p.y=(y+N(9)+W)%W)
t++}//#つぶやきProcessing pic.twitter.com/OcJq4zI5CJ
— // wat 🦀 (@watabo_shi) February 8, 2023

いままでは時間をかけて描画する系のスケッチをあまり書いてきませんでしたが、やってみると一発描画ではできない綺麗な画ができたり、描画されていく過程を眺めるのも楽しい、という気づきがありました。
勉強会で紹介されていたコードからちょっとだけアレンジして、時間経過でnoiseの値が変わるようにしています。

// 第３引数にframeCountのtを使って時間経過でノイズを変化
N=z=>noise(x/99,y/99,z+t/W)-.5

TweetProcessing - 230210

かっこいい🔥

setup=_=>{createCanvas(W=800,W)
background(t=0)
P=[stroke(W,0,0,6)]
for(i=W*3;i--;){P[i]={i,x:500+cos(a=random(TAU))*200,y:500+sin(a)*200}}}
draw=_=>{for(p of P)N=z=>noise(p.x/49,p.y/49,z*t/p.i)-.68,point(p.x+=N(1),p.y+=N(2))
if(t++>1200)noLoop`#つぶやきProcessing`} pic.twitter.com/PAqY0evEo6
— // wat 🦀 (@watabo_shi) February 10, 2023

pointの起点を単純なランダム座標ではなく、円周上のランダムな座標にしてみました。ノイズの値も-0.5ではなく-0.68とすることで左上に偏るベクトルを生成しています。
noiseの第３引数も z*t/p.i というよくわからない計算によってより複雑なノイズになるように調整しています。（コードを適当にいじってたら偶然いい感じの画が出たのがこの式だったというだけなので、自分でもよくわかりません。。）
火球みたいでかっこいいのでお気に入りです🔥

N=z=>noise(p.x/49,p.y/49,z*t/p.i)-.68

TweetProcessing - 230211

setup=_=>{createCanvas(W=800,W)
for(P=[background(t=0)],i=W*3;i--;)P[i]={i,x:180+acos(cos(a=random(19)))*150,y:520+asin(sin(a))*150}}
draw=_=>{for(p of P)stroke(0,W,p.y/4,6),N=z=>noise(p.x/49,p.y/49,z*t/p.i),point(p.x+=N(1)-.5,p.y+=N(2)-.7)
t++>1200?noLoop`#つぶやきProcessing`:0} pic.twitter.com/4gfBFZJmfj
— // wat 🦀 (@watabo_shi) February 11, 2023

pointの起点が円周座標だったところを、asin(sin()), acos(cos())を使って矩形周座標にしてみました。
sin(),cos()をカクカクにするテクニックはこちらのツイートで知りました。

P[i]={i,x:180+acos(cos(a=random(19)))*150,y:520+asin(sin(a))*150}

TweetProcessing - 230214

setup=_=>{createCanvas(W=800,W)
background(t=0)
c=cos
P=[stroke(W,0,0,9)]
for(i=W*3;i--;)x=400+320*sin(a=i*8/W)**3,P[i]={i,x,y:340-20*(13*c(a)-5*c(a*2)-2*c(a*3)-c(a*4))}}
draw=_=>{for(p of P)N=z=>noise(p.x/4,p.y/99,z+t/p.i),point(p.x+=N(1)-.5,p.y+=N(2)-.3)}//#つぶやきProcessing pic.twitter.com/10iAhqrI8K
— // wat 🦀 (@watabo_shi) February 14, 2023

2/14 バレンタインなのでpointの起点をハートにしてみました。
ハートの公式はダニエル・シフマン先生のコードを参考にしました。（数学には詳しくないのでなぜこの計算式でハートになるのかはわかりません…）

TweetProcessing - 230215

setup=_=>{createCanvas(W=800,W)
blendMode(ADD)
P=[background(t=0)]
for(i=W*4;i--;)r=i%2*80+80,P[i]={i,x:400+cos(a=random(TAU))*r,y:550+sin(a)*r}}
draw=_=>{stroke(W,(W-t++)/5,19,8)
for(p of P)N=z=>noise(p.x/89,p.y/99,z*t/p.i),point(p.x+=N(1)-.5,p.y+=N(8)-.68)}//#つぶやきProcessing pic.twitter.com/PSbg9Yje23
— // wat 🦀 (@watabo_shi) February 15, 2023

コード的にはpointの起点となる円を２つに増やしただけなのですが、torusみたいに真ん中に穴が空いているようにみえて不思議ですね。

// 半径が 80 or 160 になるように、変数rに代入
r=i%2*80+80,P[i]={i,x:400+cos(a=random(TAU))*r,y:550+sin(a)*r}

色も炎っぽくみえるように時間経過で黄色から赤になるようにしています。

// 時間経過で Green を変化させる
stroke(W,(W-t++)/5,19,8)

TweetProcessing - 230216

setup=_=>{createCanvas(W=800,W)
for(P=[rect(t=0,0,i=W*3)];i--;)r=i%3*40+40,P[i]={i,x:380+acos(cos(a=random(6)))*r,y:400+asin(sin(a))*r}}
draw=_=>{t++>W*3?noLoop`#つぶやきProcessing`:stroke(t/9,0,W,6)
for(p of P)N=z=>noise(p.x/49,p.y/49,z*t/p.i)-.5,point(p.x+=N(1)-.2,p.y+=N(9))} pic.twitter.com/oUJHzzdTKp
— // wat 🦀 (@watabo_shi) February 16, 2023

ひとつ前のスケッチの応用で、半径違いの矩形周座標を3つに複製してみました。X方向に流すと熱帯魚のヒレみたいでかわいいですね🐠

TweetProcessing - 230218

setup=_=>{createCanvas(W=800,W)
P=[rect(t=0,0,W)]
for(i=W*3;i--;)a=random(TAU),P[i]={a:a+1.5,x:400+cos(a)*99,y:400+sin(a)*99}}
draw=_=>{for(p of P)stroke(t/4,p.y/4,W,9),point(p.x+=cos(p.a+=(noise(p.x/69,p.y/69,t)-.5)*.05)/3,p.y+=sin(p.a)/3)
t++>W*3?noLoop`#つぶやきProcessing`:0} pic.twitter.com/bENemfYRwo
— // wat 🦀 (@watabo_shi) February 18, 2023

ここまでの Flow Field とちがって、pointが流れていく角度に対してnoiseを加えてみるパターンです。角度制御だと円周起点との相性が良いです。

// a:a+1.5 とすることで射出角をオフセットして円周座標から斜めに流す
a=random(TAU),P[i]={a:a+1.5,x:400+cos(a)*99,y:400+sin(a)*99}

// p.x, p.y に cos(p.a) sin(p.a) を足すことで角度にノイズが乗る
point(p.x+=cos(p.a+=(noise(p.x/69,p.y/69,t)-.5)*.05)/3,p.y+=sin(p.a)/3)

TweetProcessing - 230222

setup=_=>{createCanvas(W=800,W)
P=[rect(t=0,0,W)]
for(i=W*3;i--;)a=random(TAU),P[i]={a,i,x:150+acos(cos(a))*160,y:400+asin(sin(a))*160}}
draw=_=>{for(p of P)stroke(0,9),point(p.x+=cos(p.a+=(noise(p.x/W,p.y/W,t/p.i)-.5)*9)/2,p.y+=sin(p.a)/2)
t++>W*2?noLoop`#つぶやきProcessing`:0} pic.twitter.com/Lf2bUapD4O
— // wat 🦀 (@watabo_shi) February 22, 2023

角度にノイズを乗せるパターンの数値を極端にいじっいたら偶然カビや細菌のような画ができました🦠
クリエイティブコーディングはこういう偶発的な画ができたときがたのしいですね。

// (noise()-.5)*9 で角度を大きくすると収束したときにつぶつぶになる
point(p.x+=cos(p.a+=(noise(p.x/W,p.y/W,t/p.i)-.5)*9)/2,p.y+=sin(p.a)/2

TweetProcessing - 230223

setup=_=>{createCanvas(W=800,W)
for(P=[rect(t=0,0,i=W*3)];i--;)a=random(TAU),P[i]={a,i,x:400+cos(a)*200,y:400+sin(a)*200}}
draw=_=>{for(p of P)stroke(255-t/9,0,0,8),point(p.x+=cos(p.a+=(noise(p.x/W,p.y/W,t/p.i)-.5)*7)/2,p.y+=sin(p.a)/2)
t++>W*2?noLoop`#つぶやきProcessing`:0} pic.twitter.com/6DOgkqBSPE
— // wat 🦀 (@watabo_shi) February 23, 2023

起点を円周にして、赤黒くしたら傷跡っぽくなりました🩹🩸

さいごに

noiseアルゴリズムによる Flow Field はパラメーターをちょっと変えるだけで表情がガラッと変わるのでいつまでも微調整してしまってよく時間を溶かします。（満足するところを見つけてキリをつけるのって難しいですよね…）

自分はいつも行儀の良いコードを書きがちで、230222 のような出力結果を狙ってコードを書くのはかなり難しいので、もっと考えずに、いい意味で適当にコードを書いてみようかなと思いました。