DailyCoding 振り返り 2022

2022年12月27日 13:26

こんにちは、AQUARING かにです。
早いもので2022年もあっという間にあと数日ですね。
ということで、今回はデイリーコーディング（ほぼつぶやきProcessingですが）の１年分の振り返りをやっていきます！

1月

HappyNewYear 2022 - Wavehttps://t.co/jUKJFuKVOR #p5js #creativecoding #dailycoding pic.twitter.com/sbH2kHlXUJ
— // wat 🦀 (@watabo_shi) January 1, 2022

@_unshift さんの年賀サイト（three.js製）の背景をp5.jsで目コピしました。
構図やメッシュの歪ませ方など、自分が普段しない感じのもので勉強になりました。

2月

#AltEdu2022 2/5「線を使わないで線を書いてみてください。」
Lines with particleshttps://t.co/qXxKwJR3wP #p5js #creativecoding #dailycoding pic.twitter.com/t4wZ4J62u5
— // wat 🦀 (@watabo_shi) February 5, 2022

2月は #AltEdu2022 のコーディングチャレンジに挑戦しました。
「線を使わないで線を書いてみてください。」というお題で、パーティクルが波や星などの形にモーフィングするスケッチを書いたら、自分の想像以上に RT, いいねをもらえてちょっと驚きでした。

#AltEdu2022 2/4 「文字を使ったグラフィックを作成してください。文字の示す内容とグラフィックが近づくように工夫してください。」
Mandala - Text 🧘‍♀️https://t.co/8tvbEuCwGX #p5js #creativecoding #dailycoding pic.twitter.com/u1nDGDiHiQ
— // wat 🦀 (@watabo_shi) February 4, 2022

曼荼羅（マンダラ）を曼荼羅の形で再起的に描画しています。グラデーションが綺麗に作れてお気に入りのスケッチです。
@takawo さんの個展で一緒にプリント展示していただいたスケッチでもあります。（詳細は後述）
展示していただいたこともあって時間経過とともに愛着がでてきました。

3月

setup=_=>{createCanvas(W=999,W)
strokeWeight(1.3)
rectMode(CENTER)
background`#つぶやきProcessing`
translate(W/2,W/2)
for(i=250;i--;)if(random()>.05)rect((i%5-2)*W/7,(~~(i%25/5)-2)*W/7,Z=(~~(i/25)+.5)*W/70,Z,2)}

Reference: (Des)Ordres / Vera Molnar 1974https://t.co/LPOUgJPura pic.twitter.com/aHZfkVdpp8
— // wat 🦀 (@watabo_shi) March 3, 2022

Code as Creative Mediu［コード・アズ・クリエイティブ・メディウム］－創造的なプログラミング教育のための実践ガイドブックを読んで、Vera Molnar の「(Des)Ordres」という作品に出会いました。
プリミティブな描画のなかにある規則／不規則の対比がおもしろく、つぶやきProcessingで再現してみました。

4月

BMWalker.jsのスケルトンを光らせてみた。

Skeleton - Light 🦴✨https://t.co/KEe7QM800w #p5js #creativecoding #dailycoding #BMWalkerJS pic.twitter.com/hrYZrHeKy9
— // wat 🦀 (@watabo_shi) April 16, 2022

@tetunori_lego さんの BMWalker.js と、以前つくった簡易ボリュームレンダリングを組み合わせて光の巨人のようなスケッチを書きました。

きょうはドロネー分割とarcTriangleの組み合わせ。

Skeleton - Delaunay 🦴🔻🔺🔻https://t.co/JUvJ2oponA #p5js #creativecoding #dailycoding #BMWalkerJS pic.twitter.com/H3yUfmrD70
— // wat 🦀 (@watabo_shi) April 22, 2022

関節の座標をスクリーン座標として取得できるので、シェーダーやドロネー分割など、平面的な表現との組み合わせもお手軽でした。

5月

setup=_=>{for(N=[B=[createCanvas(W=968,W)]],a=W*2;a--;)B[a]=0,N[a]=a%2}
draw=_=>{for(T=B,B=N,N=T,a=1764;a--;)for(x=~~(a/42)+1,y=a%42+1,b=B[I=y*44+x],fill(b*W),rect(x*22,y*22,22),n=-b,i=9;i--;)n+=B[(y+~~(i/3)-1)*44+x+i%3-1],N[I]=n<2||n>3&&b?0:!b*n==3?1:b}//#つぶやきProcessing
↓x8 pic.twitter.com/1VTdQCc9NN
— // wat 🦀 (@watabo_shi) May 8, 2022

5月は個人的にp5.jsのexampleをつぶやきProcessing化するチャレンジをやっていました。
ライフゲームのexampleをつぶやきProcessing化したら、終息するまで16分もかかるパターンが偶然できて感動しました。

setup=_=>{noStroke(createCanvas(W=800,W,WEBGL))
R=random
g=createGraphics(W,W)
g.noStroke`#つぶやきProcessing`
C=https://t.co/kQfGCzVihO
for(i=9999;i--;)r=R(R(R())),C(x=r*W/4,y=R(W),s=4-r*3),C(y,W-x,s)
background(0)
for(i=9;i--;)push(texture(g)),rotate(i/6),pop(box(W/2-i*W/18))} pic.twitter.com/bvXTaesRMS
— // wat 🦀 (@watabo_shi) May 16, 2022

@okazz_ さんの記事で紹介されている random(random()) で乱数に偏りを持たせる方法にハマって1ヶ月ほどザラザラ質感のスケッチを書いていました。

そして @takawo さんの個展に、#dailycodingコミュニティの一員として自分の曼荼羅のスケッチも一緒にプリント展示していただきました！
会場にはリアルタイムに #dailycoding でTwitterに投稿されたスケッチが表示されるディスプレイ展示もあり、遠隔で展示に参加できるのも楽しかったです！

展示レポートは↓こちらの記事ご覧ください！

6月

t=0
draw=_=>{t||noStroke(createCanvas(W=800,W,WEBGL))
g=drawingContext
M=v=>g.colorMask(v,v,v,v)
background`#つぶやきProcessing`
for(t+=.02,i=5;i--;){push(T=r=>torus(30+i*9,r,64))
translate(x=(i-2)*130,x,0)
rotate(t)
rotateY(t)
M(0)
T(18)
M(1)
g.enable(2884)
fill(0)
pop(T(20))}} pic.twitter.com/ahjynUFQ7c
— // wat 🦀 (@watabo_shi) June 15, 2022

drawingContext 経由で WebGL API の CULL_FACE を有効化することで Sobel Filter のようなレンダリングができることを発見しました…！
WebGL定数を使う場合でも定数の中身の数字をベタ書きすればそこそこ文字数が短縮できます。

7月

t=0
draw=_=>{t||noStroke(createCanvas(W=810,W,WEBGL))
F=fill
S=r=>sphere(r,64,64)
box(W*2)
for(i=81;i--;){push(T=translate)
T((i%9-4)*90,(~~(i/9)-4)*90,tan(i+t)*W)
rotateY(A=i+t*9)
rotate(A)
F`#e01`
S(50)
F`#つぶやきProcessing`
T(0,8)
S(43)
F`#16b`
T(3,11)
pop(S(32))}t+=.001} pic.twitter.com/GBPWZfpiwt
— // wat 🦀 (@watabo_shi) July 22, 2022

大阪万博のいのちの輝きくんのスケッチを書きました。
背景をbackgroundではなくboxで代用しつつ、奥から手前にオブジェクトを動かすことで、深度テストによって壁からポコポコ生まれてくるような表現になっています。

t=0
draw=_=>{t++||noStroke(createCanvas(W=800,W,WEBGL))
X=rotateX
Y=rotateY
box(W*3)
X(.1)
lights`#つぶやきProcessing`
specularMaterial(W)
P=_=>{scale(1,-1)
for(i=4;i--;)push(p=PI/2),Y(i*p-t/99),translate(113,82),Y(p),X(-PI*.194-p),pop(ellipsoid(200,6,200,3))}
P(P(fill`#27f8`))} pic.twitter.com/6XmsSMOmVa
— // wat 🦀 (@watabo_shi) July 31, 2022

7月後半あたりからsupecularMaterial()とellipsoid()の組み合わせのスケッチをたくさん書いていました。
コード圧縮にだいぶ苦労しましたが、エヴァンゲリオンのラミエルみたいな質感が出せて感動しました。

8月

t=0
draw=_=>{t++||(createCanvas(W=800,W),g=createGraphics(W,W,WEBGL))
g.clear(G=_=>image(g,0,0)).normalMaterial().rotateX(.02).rotate(.02).cone(30,200)
G`#つぶやきProcessing`
B=get()
F=f=>drawingContext.filter=f
F`blur(4px)`
background(0)
image(B,-2,-4,W+4,W+4)
G(F`invert()`)} pic.twitter.com/Hdo9tlAb8f
— // wat 🦀 (@watabo_shi) August 19, 2022

createGraphics() と filter を組み合わせて、描画結果を BackBuffer 的に扱うスケッチをいくつか書きました。
後から知りましたが p5.Graphics の挙動が Mac と Win で違うようで、Mac でしか動かないみたいです。

t=0
draw=_=>{t++||createCanvas(W=800,W)
textSize(89)
F=f=>drawingContext.filter=f
background(0)
for(i=14;i--;){push`#つぶやきProcessing`
translate(W/2+cos(a=i*PI/7)*300,W/2+sin(a)*300)
T=_=>text(String.fromCodePoint(127761+~~(t/16+i)%7),-44,44)
T(F`blur(9px)`)
pop(T(F`none`))}} pic.twitter.com/t3qgYBhMmH
— // wat 🦀 (@watabo_shi) August 24, 2022

8月後半から9月にかけてはUnicodeの絵文字や特殊文字を使ったスケッチをいっぱい書きました。
つぶやきProcessingでも String.fromCodePoint() を使えば連続したUnicode文字をたくさん描画できます。

9月

setup=_=>{createCanvas(W=800,W)
noFill(rect(0,0,W))
textSize(60)
translate(W/2,W/2)
D=drawingContext
D.setLineDash([60])
s='#つぶやきProcessing'
for(c of[...s+s]){stroke(f='')
for(j=0;j++<7;)f+=`drop-shadow(-${J=j**2.4}px ${J}px ${j**2}px)`
D.filter=f
text(c,0,-260)
rotate(.21)}} pic.twitter.com/cLPclMRfXg
— // wat 🦀 (@watabo_shi) September 26, 2022

9月後半は多重 drop-shadow によるリアルな影を使ったスケッチを書くのにハマっていました。
白の破線に黒の多重 drp-shadow だと線の部分がハイライトっぽくみえるのがおもしろいですね。

10月

setup=_=>{createCanvas(W=800,W)
D=drawingContext
w=W/6
R=_=>rect(j%6*w,~~(j/6)*w,w,w,noise(j)*99)
background`#つぶやきProcessing`
for(j=64;j--;){R(push(stroke(f='')))
for(i=5;i++<12;)f+=`drop-shadow(${I=i**1.3+'px '}-${I}${I}hsl(${j*w+i*30} 99%50%))`
D.filter=f
pop(R(D.clip()))}} pic.twitter.com/PbfwPdb8PM
— // wat 🦀 (@watabo_shi) October 12, 2022

10月も引き続き drop-shadow を使ったスケッチを書いていましたが、clip() と組み合わせることで影としてではなく図形の塗りとしてグラデーションを使ってみました。

setup=_=>{noFill(createCanvas(W=800,W))
background`#つぶやきProcessing`
R=random
C=_=>curveVertex(x+cos(a=i*.6+o)*r+cos(A=noise(i,j))*20,y+sin(a)*r+sin(A)*20)
for(j=60;beginShape(),j--;)for(x=R(W),y=R(W),r=R(24,60),o=R()+1,i=12;i--;endShape())C(i&&i<11?0:C(strokeWeight(j%4+1)))} pic.twitter.com/t0FEzLS3Tb
— // wat 🦀 (@watabo_shi) October 18, 2022

10月後半は @BaroqueEngine さんのツイートを参考に手書き風のスケッチをいくつか書きました。
円周上の通過点をずらすだけなので、p5.js以外でも使えそうなテクニックですね。

11月

t=0
draw=_=>{t||noStroke(createCanvas(W=800,W,WEBGL))
pointLight([99],0,0,-W)
specularMaterial(W)
box(1400)
rotate(t)
rotateX(t+=.01)
sphere(99)
for(i=64;i--;)push(rotateY(~~(i/8)*PI/4)),rotate(i%8*PI/4),translate(0,y=(1-abs(cos(t*3)))*99+95),pop(cone(18,y))}//#つぶやきProcessing pic.twitter.com/qt6oiOPgP9
— // wat 🦀 (@watabo_shi) November 21, 2022

specularMaterial() を適用した上で pointLight() を背面に配置すると、リムライトっぽい描画になることを発見しました。
通常のライティングとは一風違ったちょっとダークな雰囲気が作れていいですね。

t=0
draw=_=>{t||createCanvas(W=800,W,WEBGL)
noStroke(T=translate)
pointLight(99,0,0,0,0,z=-W*2)
specularMaterial(W)
rotateY(t+=.01)
cone(z)
for(i of[1,-1])push`#つぶやきProcessing`,T(i*90,99),shearX(i/9),pop(cylinder(9,W/3))
box(260,12)
T(0,-20)
box(20,30,3)
T(0,-20)
box(340,12)} pic.twitter.com/SAngjCmxoH
— // wat 🦀 (@watabo_shi) November 29, 2022

ここまで WEBGL モードで background() の代わりに box() を使っていましたが、cone() でも代用できることに気がつきました。（まだまだ奥が深い…）

12月

t=0
draw=_=>{t?noStroke`#つぶやきProcessing`:createCanvas(W=800,W,WEBGL)
X=rotateX
Y=rotateY
for(i=3;i--;)pointLight([(i==0)*W,(i==1)*W,(i==2)*W],sin(a=i*2.1+t*2)*W,cos(a)*W,z=-1400)
specularMaterial(W)
lightFalloff(0,1e-9,4e-7)
X(1.6+sin(t))
Y(t-=.003)
cone(z)
Y(t)
X(t)
box(99)} pic.twitter.com/VnQq8ke9nz
— // wat 🦀 (@watabo_shi) December 6, 2022

12月はライティング系のスケッチをいっぱい書きました。
lightFalloff() を使うことでライトの強さや減衰などの細かい設定をしています。

t=0
draw=_=>{t?noStroke`#つぶやきProcessing`:createCanvas(W=800,W,WEBGL)
for(i=3;i--;)r=cos(t*2+i)*200,pointLight([i%3?9:0,i%3-1?9:0,i%3-2?9:0],cos(a=i*PI/3+t)*r,sin(a)*r,-1600)
specularMaterial(W)
shininess(11)
lightFalloff(0,0,6e-9)
rotateX(t)
rotate(t+=.004)
sphere(1690,16,8)} pic.twitter.com/TRDhTSw0LM
— // wat 🦀 (@watabo_shi) December 9, 2022

ライティングで shpere() の内側を大袈裟にハレーションさせることで細胞分裂みたいな見た目になっています。（コードを書いた本人にも詳しい原理はよくわかりません…😂）

さいごに

つぶやきProcessingを始めた当初はここまでハマると思ってませんでしたが、毎日1時間程度で取り組むのにちょうどいいボリュームなので続いているのかなとおもいます。
#dailycoding を1年弱続けていてもまだまだ日々発見の連続なので、2023年もゆるゆると続けていきます〜

この記事が気に入ったらサポートをしてみませんか？