
GENUARY 2023 スケッチ まとめ
こんにちは、AQUARING かに です。
今年初めてGENUARYに参加したので、今回の記事ではGENUARYで作ったスケッチを一言ずつコメントを添えながら紹介していきます!
GENUARYは1月に1日1テーマずつ取り組むコーディングチャレンジみたいなもので、公式サイトの PROMPTS のページに各日のテーマが載っています。
DAY 1 : "Perfect loop / Infinite loop / endless GIFs"
#genuary1 : "Perfect loop / Infinite loop / endless GIFs"
— // wat 🦀 (@watabo_shi) January 1, 2023
🇯🇵🌅🎍 Happy New Year 2023 🎍🌅🇯🇵https://t.co/BbhO2beYPZ #p5js #creativecoding #dailycoding #genuary #genuary2023 pic.twitter.com/kDCyA1vY1g
今年の年賀スケッチです。
GSAPでタイムラインアニメーションを組んで、ミラーリピートさせることで無限ループのアニメーションにしています。
雲のつなぎ目をコードで表現するのが難しかったです。
DAY 2 : "Made in 10 minutes"
#genuary2 Madein10m
— // wat 🦀 (@watabo_shi) January 2, 2023
t=0
draw=_=>{t++||createCanvas(W=800,W)
noStroke(background`#つぶやきProcessing #genuary #genuary2023`)
for(k=16;k--;)for(j=6;j--;)for(i=5;i--;)fill(lerpColor(color(W),color(0,0,W),i/5)),circle((j+(k%2?.5:0))*170,W-k*50+sin(j*5+t/30)*9,50+i*30-cos(k+t/50)*9)} pic.twitter.com/ZCO60LQDQd
10分のタイムアタックコーディングです!
つぶやきProcessingで青海波を描きました。
タイムアタックはコード量の少ないつぶやきProcessingと相性が良さそうなので、今後もたまにやってみようかな〜と思いました。
タイムアタックコーディングの様子の録画もあるのでよかったらあわせてこちらも御覧ください〜。
DAY 3 : "Glitch Art"
#genuary3 : "Glitch Art"👾🎮https://t.co/sceOo0JPXU #p5js #creativecoding #dailycoding #genuary #genuary2023 pic.twitter.com/BoDnmgdsrf
— // wat 🦀 (@watabo_shi) January 3, 2023
大昔にCodePenで作っていた SVG Filter のグリッチエフェクト↓をp5.jsに移植してみました。
DAY 4 : "Intersections"
#genuary4 : "Intersections"
— // wat 🦀 (@watabo_shi) January 4, 2023
t=0
draw=_=>{t++||createCanvas(W=800,W)
C=circle
noStroke(background(0,6))
fill(0)
C(400,400,t%(W*1.4))
fill`#つぶやきProcessing #genuary #genuary2023`
for(i=242;i--;)C(x=i%22*80-t%80,y=~~(i/22)*80,9),C(W-x,y+40,9),C(y+20,x+40,9),C(y+60,W-x+40,9)} pic.twitter.com/DC9NB7dypl
"Intersections" は交差点という意味なので、つぶやきProcessingで円をクルマに見立ててぶつからないようにアニメーションさせてみました。
DAY 5 : "Debug view"
#genuary5 Debug view
— // wat 🦀 (@watabo_shi) January 5, 2023
t=0
draw=_=>{t?fill`#つぶやきProcessing #genuary #genuary2023`:createCanvas(W=800,W)
w=W/2
C=circle
rect(0,0,W)
C(w,w,600)
line(x=w+cos(t+=.01)*300,0,x,W)
line(0,y=w+sin(t)*300,W,y)
fill(0)
C(x,y,9)
textFont`Courier`
textSize(18)
text(~~x+','+~~y,x+18,y+27)} pic.twitter.com/2Ihncn4CnH
つぶやきProcessingで円周運動のXYをline()とtext()で可視化してデバッグ表示っぽくしてみました。
DAY 6 : "Steal Like An Artist"
#genuary6 Steal Like An Artist
— // wat 🦀 (@watabo_shi) January 6, 2023
setup=_=>{createCanvas(W=800,W)
rect(I=0,0,W)
noFill`#つぶやきProcessing #genuary #genuary2023`
for(i=7;i--;)for(j=~~(99*sin(i*.52))+7;j--;I++)x=700-i*99,y=99+j%7*99,N=_=>noise(I++)*i*18+40-i*9,quad(x-N(),y-N(),x+N(),y-N(),x+N(),y+N(),x-N(),y+N())} pic.twitter.com/He3GBLdaHE
自分の好きなアーティスト「Vera Molnár」の作品をつぶやきProcessingで真似してみました。密度やランダム感を似せるのがむずかしかったです。
DAY 7 : "Sample a color palette from your favorite movie/album cover"
#genuary7 : "Sample a color palette from your favorite movie/album cover"
— // wat 🦀 (@watabo_shi) January 7, 2023
230107https://t.co/oIbIsz06Y8 #p5js #creativecoding #dailycoding #genuary #genuary2023 pic.twitter.com/s3J1Ornkb3
推しアイドルグループの「MIGMA SHELTER」の「TOKYO SQUARE - Dubscribe Remix」のジャケットから、Color Tief でカラーパレットを抽出して、矩形(SQUARE…!)のアニメーションを作りました。
p5.js で Color Thief を使うサンプルスケッチ↓もつくったので、気になる方は使ってみてください〜!
DAY 8 : "Signed Distance Functions"
#genuary8 : "Signed Distance Functions"
— // wat 🦀 (@watabo_shi) January 8, 2023
SDFでモンスターボールかいた。
230108https://t.co/uV4LJtG5Px #p5js #creativecoding #dailycoding #genuary #genuary2023 pic.twitter.com/xsuNzbcvSt
距離関数はGLSLでの実装経験はありますが、p5.jsではやったことがなかったので、GENUARYの参考リンクにあったYouTube↓を参考に、距離関数でモンスターボールを描いてみました。
DAY 9 : "Plants"
#genuary9 : "Plants" 🌿
— // wat 🦀 (@watabo_shi) January 9, 2023
230109https://t.co/JId3r3fUzH #p5js #creativecoding #dailycoding #genuary #genuary2023 pic.twitter.com/GbsWrrCN0C
bezierVertex()で枝葉を描いて円状に並べてみました。
(なぜかTwitterからセンシティブ判定されてしまって、異議申し立てしても改善されないようです…)
DAY 10 : "Generative music"
#genuary10 : "Generative music"
— // wat 🦀 (@watabo_shi) January 10, 2023
SNDつかってみた。クォンタイズまでいれてないからmusicといえるか微妙なところ。。
230110https://t.co/x7FLt79VfU #p5js #creativecoding #dailycoding #genuary #genuary2023 #snd pic.twitter.com/CdaiNlR8o3
効果音ライブラリの SND を使って、バウンスすると音が出るスケッチを描いてみました。
DAY 11 : "Suprematism"
#genuary11 : "Suprematism"
— // wat 🦀 (@watabo_shi) January 11, 2023
230111https://t.co/N26DtHdIeV #p5js #creativecoding #dailycoding #genuary #genuary2023 pic.twitter.com/7yBRY0VvsP
円形と矩形のサイズは固定で、位置と色と重なり順が毎回ランダムになるようにしました。重なり順をランダムにするコードが面白い感じになったのでコードもあわせて見てほしいです。
美大卒でありながら美術史よわよわ人間なのでシュプレマティスムという単語すら知りませんでしたが、プリミティブ大好きマンとしては惹かれるものがあります… !
DAY 12 : "Tessellation"
#genuary12 : "Tessellation"
— // wat 🦀 (@watabo_shi) January 12, 2023
230112https://t.co/N0gFTuZRD3 #p5js #creativecoding #dailycoding #genuary #genuary2023 pic.twitter.com/grJgqpjoL2
delaunay-fast をつかって、円形の内部にランダムに配置した頂点でドロネー分割をしてみました。emissiveMaterial()に背景と同じ色を渡すと空間に消えるようなライティングになっておもしろいですね。
DAY 13 : "Something you’ve always wanted to learn"
#genuary13 : "Something you’ve always wanted to learn"
— // wat 🦀 (@watabo_shi) January 13, 2023
積ん読してた Designing Math の Chapter6 のパターンつくった。青海波と同じ感じでつくれた。
230113https://t.co/FwD1pOvi6S #p5js #creativecoding #dailycoding #genuary #genuary2023 pic.twitter.com/JhG1fjZomg
『Designing Math. 数学とデザインをむすぶプログラミング入門』のChapter 6 にある矩形の敷き詰めをやってみました。本を買ったはいいもの積ん読していたので再び読む機会ができてよかったです。
DAY 14 : "Asemic"
#genuary14 : Aesemic"
— // wat 🦀 (@watabo_shi) January 14, 2023
setup=_=>{createCanvas(W=800,W)
R=rect
background`#つぶやきProcessing #genuary #genuary2023`
fill(0)
R(600,60,140,s=20)
R(60,84,160,s)
R(280,156,240,s)
R(60,228,40,s)
for(N=i=0;i++<17;N=w<660)R(60+s*N,228+i*24,w=min(noise(i)*W*2,680)-s*N,s)
R(700,708,40,s)} pic.twitter.com/aVLy1oAoPz
文字っぽいものを書くのが面倒だったので、つぶやきProcessingでrect()だけで書類フォーマットのようなものを作ったら意図せず社会風刺的(黒塗り)になってしまいました…😂
DAY 15 : "Sine waves"
#genuary15 : "Sine waves"
— // wat 🦀 (@watabo_shi) January 15, 2023
t=0
draw=_=>{t++||createCanvas(W=800,W)
background(0)
noFill(stroke`#つぶやきProcessing #genuary #genuary2023`)
translate(400,400)
for(j=20;j--;){rotate(TAU/20)
beginShape()
for(i=99;i--;)vertex(99+i*9,sin(i/5-t/36)*(99-sin(i/99*TAU)*99))
endShape()}} pic.twitter.com/mvjcl2YAPQ
つぶやきProcessingでsin波を合成していたらたまたま紐を引っ張るような表現ができました。
DAY 16 : "Reflection of a reflection"
#genuary16 : "Reflection of a reflection"
— // wat 🦀 (@watabo_shi) January 16, 2023
230116https://t.co/03lkvXYwXE #p5js #creativecoding #dailycoding #genuary #genuary2023 pic.twitter.com/vEQOYumaLr
チュートリアルでよくある壁で跳ね返るボールのスケッチを上下左右にミラーリピートさせてみました。
DAY 17 : "A grid inside a grid inside a grid"
#genuary17 : "A grid inside a grid inside a grid"
— // wat 🦀 (@watabo_shi) January 17, 2023
230117https://t.co/4AIMQN0KyS #p5js #creativecoding #dailycoding #genuary #genuary2023 pic.twitter.com/sZZSrVPVIV
矩形分割の再帰表現と手書き風の線描画を組み合わせてみました。
線を細めにして重ねてみたら鉛筆やシャーペンで上書きしたような質感になりました。
DAY 18 : "Definitely not a grid"
#genuary18 : "Definitely not a grid"
— // wat 🦀 (@watabo_shi) January 18, 2023
230118https://t.co/NPMfM63dSO #p5js #creativecoding #dailycoding #genuary #genuary2023 pic.twitter.com/j6Ey0EcwWh
なんと DAY 17 のスケッチを1行変えただけです!
手書き風の線に与えているノイズの量を極端に大きくしたら、グリッド配置を元に描画しているとは思えないような画ができました。
DAY 19 : "Black and white"
#genuary19 : "Black and white"
— // wat 🦀 (@watabo_shi) January 19, 2023
t=0
draw=_=>{t++?background(99):createCanvas(W=800,W,WEBGL)
C=cylinder
T=translate
for(i=64;i--;)push(noStroke`#つぶやきProcessing #genuary #genuary2023`),T(i%8*90-315,~~(i/8)*90-315),rotateX(sin(i+t/99)),fill``,C(30,4),T(0,4),fill(0),pop(C(30,4))} pic.twitter.com/9Ymr8jFOTe
白黒といえばオセロ!ということでつぶやきProcessingでcylinder()を重ねてオセロを描きました。完全に重ねてしまうとバッティングしてしまうので、ちょっとだけずらすのがポイントです。
DAY 20 : "Art Deco"
#genuary20 : "Art Deco"
— // wat 🦀 (@watabo_shi) January 20, 2023
setup=_=>{createCanvas(W=800,W)
R=rotate
fill`#245`
stroke`#bb8`
for(i=0;i<120;i++){push(y=~~(i/8))
translate(i%8*115+y%2*57,(y-1)*57)
R(PI/4)
rect(0,0,81)
rect(0,0,18)
for(j=9;j--;)line(115,0,0,0),R(.196)
pop`#つぶやきProcessing #genuary #genuary2023`}} pic.twitter.com/2QI3AGE3UL
つぶやきProcessingでアールデコ風の壁紙を描いてみました。
正方形から柄がはみ出さないように描画順を工夫しています。
DAY 21 : "Persian Rug"
#genuary21 : "Persian Rug"🇮🇷
— // wat 🦀 (@watabo_shi) January 21, 2023
setup=_=>{createCanvas(W=800,W)
background(f='#812')
stroke`#つぶやきProcessing #genuary #genuary2023`
T=(x,y,r)=>triangle(x-r*.87,Y=y+r/2,x+r*.87,Y,x,y-r)
for(i=4;i--;)fill``,T(x=185+i*143,640,50),rect(x-2,549,4,43),fill(i-2?W:f),T(400,400,i*99)} pic.twitter.com/vVYvNNWRfF
つぶやきProcessingでペルシャ絨毯のお守りのシンボルを描きました。
↓こちらのサイトを参考にしました。BirdとSnakeのシンボルがかわいくて好きです。
DAY 22 : "Shadows"
#genuary22 Shadows
— // wat 🦀 (@watabo_shi) January 22, 2023
setup=_=>{createCanvas(W=800,W)
background`#つぶやきProcessing #genuary #genuary2023`
noFill(stroke(f=``))
D=drawingContext
D.setLineDash([99])
D.font=`160px serif`
for(i=0;i++<8;)f+=`drop-shadow(${(r=i**2+'px ')+r+r}#0008)`
D.filter=f
text('Shadows',60,440)} pic.twitter.com/ddcSm7pciV
drop-shadowの重ねがけで空気感のある影を描きました。この表現はお気に入りなので何度でもやってしまいます。
以前drop-shadowの記事も書いたのでこちらも合わせてどうぞ〜。
DAY 23 : "More Moiré"
#genuary23 : "More Moiré"
— // wat 🦀 (@watabo_shi) January 23, 2023
t=0
draw=_=>{t++?noStroke(background`#つぶやきProcessing #genuary #genuary2023`):createCanvas(W=800,W)
translate(w=400,0)
L=o=>{for(i=81;i--;)rect(-w,y=i*10+o,W,6)}
L(0)
textSize(240)
text('Moiré',-340,470)
fill``
L(3)
rotate(cos(t/99)**3)
fill(0)
L(3)} pic.twitter.com/d3c2JJl7uA
つぶやきProcessingでモアレで「Moiré」の文字が浮かび上がるスケッチをつくりました。
DAY 24 : "Textile"
#genuary24 : "Textile"
— // wat 🦀 (@watabo_shi) January 24, 2023
230124 🧵🪡https://t.co/VPMojFumb6 #p5js #creativecoding #dailycoding #genuary #genuary2023 pic.twitter.com/u0N88S5XV7
DAY 13 のタイリングと手書き風線描画を組み合わせてみたら想像以上に繊維感がでてお気に入りのスケッチです。
DAY 25 : "Yayoi Kusama"
#genuary25 "Yayoi Kusama"
— // wat 🦀 (@watabo_shi) January 25, 2023
setup=_=>{createCanvas(W=800,W,WEBGL)
background`gold`
noStroke`#つぶやきProcessing #genuary #genuary2023`
fill(y=-498)
for(j=0;j++<30;)for(i=N=13+j%5*16,d=W/N,y+=d+6;i--;)circle((i-N/2+.5)*d,y-d/2,d)
g=get()
clear(W,W,W,W)
texture(g)
box(s=1300,s,W*3)} pic.twitter.com/TicfgpU0i9
つぶやきProcessingで黄色いかぼちゃのドット柄をテクスチャにしてbox()に貼り付けてみました。createGraphics()ではなく一度描画してget()したものをテクスチャとして渡しているのがポイントです。
DAY 26 : "My kid could have made that"
#genuary26 "My kid could have made that"
— // wat 🦀 (@watabo_shi) January 26, 2023
setup=_=>{createCanvas(W=800,W)
S=strokeWeight
S(40)
rect(0,0,W)
S(17)
rotate(.8)
for(i=99;r=i*6,i--;)curveVertex(270+r+cos(a=noise(i)*6)*30,sin(a)*30+acos(cos(i*.065))*(i%2?90:-90))
endShape()}//#つぶやきProcessing #genuary #genuary2023 pic.twitter.com/eBoQml7TGp
つぶやきProcessingでacos(cos())で作った三角波にnoise()を加えて、子供の手書きっぽくしてみました。
DAY 27 : "In the style of Hilma Af Klint"
#genuary27 Hilma Af Klint
— // wat 🦀 (@watabo_shi) January 27, 2023
setup=_=>{createCanvas(W=800,W)
s=W/9
R=rect
R(0,0,W)
for(i=49;i--;)x=i%7,y=~~(i/7),fill(x<3&&y<3?'#99b':x>3&&y>3?'#eb2':abs(x-3)&&abs(y-3)?'#e22':`#つぶやきProcessing #genuary #genuary2023`),R(x*s+s,y*s+s,s)
noFill(stroke``)
strokeWeight(3)
R(s,s,s*7)} pic.twitter.com/cKJWlKI78v
ヒルマ・アフ・クリントのWikiに載っている「De Tio Största, n°10 Alderdomen」という作品をつぶやきProcessingで真似してみました。ちゃんと外側のstroke()を消しているのがポイントです。見た目はシンプルですが結構悩みました。
DAY 28 : "Generative poetry"
#genuary28 : "Generative poetry"
— // wat 🦀 (@watabo_shi) January 28, 2023
茨木のり子の詩を行単位で分割してシャッフルしてみた。
230128https://t.co/1eBDn6AWTB #p5js #creativecoding #dailycoding #genuary #genuary2023 pic.twitter.com/W0AV0Cx9mA
茨木のり子の「自分の感受性ぐらい」という詩を1,2,3行単位で分割してシャッフルして再構築してみました。行を入れ替えても成立しちゃうのがおもしろいですね。
DAY 29 : "Maximalism"
#genuary29 : "Maximalism"
— // wat 🦀 (@watabo_shi) January 29, 2023
230129https://t.co/xuJZXH08vp #p5js #creativecoding #dailycoding #genuary #genuary2023 pic.twitter.com/KgZxUv9UlX
DAY 1 - 28 までのスケッチを一枚の横長テクスチャにまとめて、それをシェーダー側でUVスクロールさせています。box()の面ごとにUVの向きが変わるので、面白い動きになりました。
DAY 30 : "Minimalism"
#genuary30 : "Minimalism"
— // wat 🦀 (@watabo_shi) January 30, 2023
setup=_=>{createCanvas(W=800,W,WEBGL)
g=createGraphics(W,W)
box(W*3)
for(f='',i=2;i++<8;)f+=`drop-shadow(0 0 ${i**2.2}px)`
g.stroke`#つぶやきProcessing #genuary #genuary2023`.noFill(noStroke``).drawingContext.filter=f
texture(g.rect(0,0,W))
box(W)} pic.twitter.com/xMYkHlf92C
以前つくったスケッチをちょっと改変してミニマリストのなにもない部屋(それか美術館のホワイトキューブ、?)を描きました。
DAY 31 : "Deliberately break one of your previous images, take one of your previous works and ruin it. Alternatively, remix one of your previous works."
#genuary31 : "Deliberately break one of your previous images, take one of your previous works and ruin it. Alternatively, remix one of your previous works."
— // wat 🦀 (@watabo_shi) February 1, 2023
1日遅れたけど完走した〜〜🎊
230131https://t.co/5C7MwP4f3y #p5js #creativecoding #dailycoding #genuary #genuary2023 pic.twitter.com/qnOGhkoyfS
DAY 1 で作ったスケッチ画像の色情報を元に、DAY 24 の繊維風の描画をしてみました。
最終日を初日のリミックスで締めくくるのはエモいですね…!