👦こども作 let t = 0; function setup() { createCanvas(400, 400); rectMode(CENTER); } function draw() { background(220); translate(200, 200); rotate(sin(t / 40)); rect(0, tan(t / 20) * 20, cos(t / 10) * 10 + 40, sin(t / 10) * 20 + 40); t +=1; } //#つぶやきprocessing pic.twitter.com/d0EWBhO6FJ

海王星 #p5js #creativecoding #generativeart #pixelart #つぶやきProcessing pic.twitter.com/tviLJy523I

#つぶやきProcessing 「ブロックからの抜け穴」 f=0 draw=_=>{ f++||createCanvas(W=500,W) background(0) for(x=-f%20;x<600;x+=20) for(y=-f%20;y<600;y+=20){ r=(dist(250,250,x,y)/40|0)*20 noise(x+f,y+f)<.5||rect(x-r/2,y-r/2,r) } } pic.twitter.com/5knl3OamZA

#つぶやきProcessing 「黒の兵隊の行進」 f=0 draw=_=>{ f++||createCanvas(W=500,W) background(0) fill(0) stroke(W) for(y=f%3-999;y<999;y+=3){ circle(1e3*noise(y-f)-250,y+20*abs(sin(y/9)),99) } } pic.twitter.com/zIbnCeQwTK

#つぶやきProcessing 「黒い昇華・白い堕天」 f=0 draw=_=>{ f++||createCanvas(W=500,W) background(0) for(x=0;x<600;x+=20) for(y=x<250?-f%20:f%20-20;y<W;y+=20){ fill(t=noise(x,x<250?y+f:y-f)<(x<250?.4:.6)?0:W) stroke(x<250?W:0) rect(x,y,20,20) } } pic.twitter.com/7k8K7kmRMV

//WIP 関数を返す関数 #つぶやきProcessing #p5js t=0 draw=_=>{t++||createCanvas(W=(w=200)*2,W) B=(a,b,c)=>(x)=>a*(X=1-x)*X+x*(b*2*X+c*x) C=(r,t,o)=>r*cos(t)+o F=B(T=t%W,C(-w,U=t/w,w),C(w,-U,w)) G=B(0,C(w,U-1.6,w),C(w,-U+1.6,w)) for(x=0;x<1;x+=.05) point(F(x),G(x))} pic.twitter.com/ftQQRMDs5e

Mathematics, spirals, nature, growth. Visualization and code by the amazing ひさだん, @hisadan, scrapbox.io/hisadan/, CC BY-SA 2.0. Code: //#つぶやきProcessing float r, t; void setup() { size(800, 800); } void draw() { background(0); stroke(-1); for (r=0;… pic.twitter.com/VzchEnCPJ4

#つぶやきProcessing 「円のスプリッタ」 f=0 draw=_=>{ f++||createCanvas(W=500,W) b=blendMode b(BLEND) background(0) for(r=1e3;r>0;r-=50){ fill(W-r) circle(250,250,r) } b(DIFFERENCE) for(x=0;x<W;x+=20) for(c of[0,1]){ rect(x,0,20,(f*noise(x)*5)%1e3-c*W) } } pic.twitter.com/rKtvaQsgeY

どうして240文字では入らなかった。 下記リンク先か、GIFのALTを見て下さい。 openprocessing.org/sketch/2260032 #つぶやきProcessing #p5js pic.twitter.com/9Vg0QWCd3B

2Dな映像好きな方には #つぶやきProcessing もオススメ

#つぶやきProcessing 「揺れる軌道」 f=0 draw=_=>{ f++||createCanvas(W=500,W) background(0) stroke(W) noFill() for(r=0;r<2e3;r+=20){ arc(250,-99,r,r,(i=PI/2+sin((f+9e3)*noise(r)/30))-PI/6,i+PI/6) } } pic.twitter.com/aNos1QhJYb

#つぶやきProcessing 「反復する時針異常」 f=0 draw=_=>{ f++||createCanvas(W=500,W) background(0) fill(W) circle(250,250,400) fill(0) for(y=f%5-5;y<W;y+=5){ rect(250+150*noise(y-f),y,W,9) rect(t=100+150*noise(y-f,9),y,250-t,9) } } pic.twitter.com/kEZTWovZrV

//夢で「UKのUをLしても気が付かない」と誰かが言ってた #つぶやきProcessing #p5js t=0,d=40 draw=_=>{ createCanvas(W=(w=200)*2,W)+textSize(d) T=(x,y,C,D)=>(text(C,x,y),text(D,x-d,y)) for(x=0;x<W;x+=d*1.5) for(y=0;y<W;y+=d*1.5) fill(x/2,y/2,t%w), T(x,y,random()<.9?"U":"L","K") t++} pic.twitter.com/ErRPyFTJqN

//WIP 二次のベジェ曲線 #つぶやきProcessing #p5js t=0 draw=_=>{ createCanvas(W=(w=200)*2,W)+strokeWeight(4) B=(a,b,c,x)=>a*(1-x)**2+b*2*x*(1-x)+c*x*x for(x=0,p=q=0;x<1;x+=.1) line(l=p,q,p=B(0,W*sin(t/w)+w,W,x),(q=B(0,w*cos(t/w)+w,W,x),stroke(l/3,p/3,q/3),q)) t+=4} pic.twitter.com/PTOl41V9Lu

//これもWIP #つぶやきProcessing #p5js t=0 draw=_=>{ createCanvas(W=(w=200)*2,W)+noFill() P=t=>(T=t*4)<W?[W,T]:T<W*2?[W*2-T,W]:T<(U=W*3)?[0,U-T]:[T-U,0] L=(X,Y)=>line(...X,...Y) L(A=P(t),B=P((t+160)%W)) L(B,C=P((t+320)%W)) L(C,D=P((t+80)%W)) L(D,E=P((t+240)%W)) L(E,A) t=++t%W} pic.twitter.com/mAJgGQx8k0

//これもWIP #つぶやきProcessing #p5js t=0 draw=_=>{ t||createCanvas(W=(w=200)*2,W)+noFill() P=t=>(T=t*4)<W?[W,T]:T<W*2?[W*2-T,W]:T<(U=W*3)?[0,U-T]:[T-U,0] triangle(...P(t),...P((t+100)%W),...P((t+200)%W)) t=++t%W} pic.twitter.com/u7Te77lbB0

#つぶやきProcessing 「山積みのメモ」 f=0 draw=_=>{ f++||createCanvas(W=500,W) background(0) for(y=W;y>-99;y-=5){ push() translate(900*noise(y)-200,y) rotate(sin((f+9e3)*noise(y,9)/30)*PI/4) rect(-50,0,100,150) pop() } } pic.twitter.com/o49le6LfF3

#つぶやきProcessing 「山脈への殺到」 f=0 draw=_=>{ f++||createCanvas(W=500,W) background(0) stroke(W) strokeWeight(3) for(x=0;x<600;x+=20){ line(x,t=(f+9e3)*9*noise(x)%1300-400,x,t+400) for(c=0;c<400;c+=3) line(t+c,x+200*noise((t+c)/90,x),t+c+3,x+200*noise((t+c+3)/90,x)) } } pic.twitter.com/wH2iMX5Zz8

//WIP 境界が青く見えない？ #つぶやきProcessing #p5js t=0 draw=_=>{ t||createCanvas(W=(w=200)*2,W) T=x=>(w*w/2-(X-w)*(x-w))/(Y-w)+w circle(w,w,w) X=w*cos(t/5)+w Y=w*sin(t/5)+w line(0,T(0),W,T(W)) ++t} pic.twitter.com/XnQ4mZmwnY

//リーマン面かと… #つぶやきProcessing #p5jst=0 draw=_=>{createCanvas(W=(w=200)*2,W)+strokeWeight(9) for(i=t;i<t+97;i++) for(T=0;T<TAU;T+=.1) stroke((U=cos(T))*w,w,(V=sin(T))*w), point(W*sin(I=(i%W)/97*TAU)*((M=cos(t/35))*U+(1-M)*tan(V/T))+w,W*sin(I)*(M*V+(1-M)*atan(U/T))+w) ++t} pic.twitter.com/iUHs0V8uoS

#つぶやきProcessing 「団子並べ」 f=0 draw=_=>{ f++||createCanvas(W=500,W) background(0) stroke(W) fill(0) strokeWeight(3) for(x=-f%200;x<600;x+=100){ line(x,0,x,W) for(y=(x+f)%200<100?f%100-200:-f%100;y<600;y+=100){ circle(x,y,50) } } } pic.twitter.com/RdMlaqXibn

//三角関数sin(πx)/cos(πx)の無限乗積 第9項まで、x=0~4までで、どのくらいぶっ壊れるか #つぶやきProcessing #p5js t=0,S=100 draw=_=>{ t||createCanvas(W=(w=200)*2,W) M=(x,n)=>n>9?1:M(x,n+1)*(1-(x/n)**2) point(t,-(T=t/S)*PI*M(T,1)*S+S) point(t,-M(T,.5)*S+w+S) ++t} pic.twitter.com/11dpqWKOll

#つぶやきProcessing 「海底のケーブル線」 f=0 draw=_=>{ f++||createCanvas(W=500,W) background(0) stroke(W) for(x=-f%30;x<W;x+=30){ for(y=W,X=x;y>W*noise(x+f);y--){ t=x+9*sin(y/30+x+f) line(X+10,y,t+10,y-1) line(X,y,X=t,y-1) } ellipse(X+5,y,10,5) } } pic.twitter.com/EM9XeCRfCe

//無限乗積のパターン #つぶやきProcessing #p5js t=0,D=2 draw=_=>{r=random t||createCanvas(W=(w=200)*2,W) M=(x,n)=>n>noise(t)*9?1:M(x,n+1)*(1-(x/n)**2) C=(x,y,r,n)=>n>w?0:(point(r*(PI*(T=n*2/w)*M(T,1))+x,-r*M(T,.5)+y),C(x,y,r,n+1)) stroke(r(w),r(t),t) C(r(W),r(W),r(w),0) ++t} pic.twitter.com/1UOd67PQXP

//三角関数の無限乗積近似：うまくつかない #つぶやきProcessing #p5js t=0,D=0 draw=_=>{ t||createCanvas(W=(w=200)*2,W)+strokeWeight(5)+(N=int(random(20,99))) M=(x,n)=>n>N?1:M(x,n+1)*(1-(x/n)**2) stroke(random(w),random(t),t) point(w/2*M(T=t/w+D,.5)+w,w/2*T*PI*M(T,1)+w) t=(t+=5)%W} pic.twitter.com/INQu8Ab7Ye

t=0 描画=_=>{ canvas生成=createCanvas,点=point, 正弦=sin,余弦=cos 繰返し=(a,b,c,d)=>{for(eval(a);eval(b);eval(c))eval(d)} t||canvas生成(W=(w=200)*2,W) 繰返し('i=1','i<w','i++','点((R=t-w/i)*余弦(T=t/7)+w,R*正弦(T)+w)') t=++t%w}//gifは同じ #つぶやきProcessing #p5js draw=描画 pic.twitter.com/1bucgrQHjk

#つぶやきProcessing 「裂け目無き世界」 f=0 draw=_=>{ f++||createCanvas(W=500,W) background(0) noStroke() for(z=f*6%25;z<250;z+=25){ fill(W,255*sin(z/250*PI)) rect(W*noise(z-f*6)-z/2,W*noise(z-f*6,9)-z/2,z) } } pic.twitter.com/HSdx5EBFLQ

#つぶやきProcessing 「縁の重なり」 f=0 draw=_=>{ f++||createCanvas(W=500,W) b=blendMode b(BLEND) background(0) noStroke() b(DIFFERENCE) for(i=0;i<TAU;i+=.01){ r=(f+9e3)*3*noise(i*99)%500 circle(250+r*cos(i),250+r*sin(i),r/5) } } pic.twitter.com/rQeaaO22zW

#つぶやきProcessing 「鍾乳石の洞窟」 f=0 draw=_=>{ f++||createCanvas(W=500,W) background(0) fill(0) stroke(W) strokeWeight(3) for(n=0;n<30;n++){ x=700-f*n/6%900 w=n*3 t=n%2?0:W quad(x,t,x+w,t,x+w/2,n%2?4*w:W-4*w) } } pic.twitter.com/0d3uPJTbln

#つぶやきProcessing 「弾ける粒」 f=0 draw=_=>{f++||createCanvas(W=500,W) background(0,30) stroke(W,W) noFill() for(n=1;n<5;n++)for(i=0;i<6;i+=PI/3){ N=$=>noise(n,l/5|0,$) l=f/20+n t=99*N(i*9) R=min(l%5*t,150) circle(W*N(4)+R*cos(I=i+N(0)),W*N(9)+R*sin(I)+max(0,l%5*t-150),20*n)}} pic.twitter.com/YXGfi3UPmg

//van der Polの起動群: a homage to 佐藤總夫 #つぶやきProcessing #p5js draw=_=>{createCanvas(W=(w=200)*2,W)+(N=50,h=.01,A=random()) P=t=>t*w/5+w for(x=-5;x<5;x+=.4) for(y=-5;y<5;y+=.4) for(i=0,[u,v]=[x,y];i<N;i++) [U,V]=[v*h+u,(A*(1-u*u)*v-u)*h+v], line(P(u),P(v),P(u=U),P(v=V))} pic.twitter.com/jKkrfQMZLe

#つぶやきProcessing 「赤いモンスター」 f=0 draw=_=>{ f++||createCanvas(W=500,W) background(0) noFill() for(n=0;n<50;n++){ c=(f+9e3)*noise(n)/99%1 stroke(W,W*c,W*c,W*sin(c*TAU)) beginShape() for(x=-W;x<W;x+=5) vertex(x+250,W-2e3*c*max(0,noise(x/99,n)-.3)) endShape() } } pic.twitter.com/BEtczM1exm

#つぶやきProcessing 「クラシックレコード」 f=0 draw=_=>{ f++||createCanvas(W=500,W) background(0) stroke(W) noFill() strokeWeight(3) for(x=-f%200;x<600;x+=200) for(y=-x/2;y<600;y+=200) for(r=0;r<181;r+=30){ t=$=>TAU*noise(x+f+y+x/2,r,$) arc(x,y,r,r,T=t(0),T+t(9)) } } pic.twitter.com/pmUIn98PEj

//Inspired by 福田平八郎 「漣」（今朝、日曜美術館で観た） #つぶやきProcessing #p5js t=0 draw=_=>{r=random t||createCanvas(W=(w=200)*2,W) for(x=0,p=0;x<W;x+=r((t+1)/9)) r(t)<20?stroke(51-t/3,51,88+t):stroke('ivory'), strokeWeight(4+t/39), line(p,t,p=x,t) t=(t+=2)%(W+w)} pic.twitter.com/KfUUqsuGt7

そういえば #つぶやきProcessing の説明をしていなかった。 Processingというデジタルアートのためのプログラミング言語があります。 processing.org #つぶやきProcessing はProcessingを使い、1ツイートに収まるプログラムで、どこまでアートを表現できるかに挑戦するものです。