introduction
the goal of "tsubuyaki processing" is to create a visualization using processing whose source code fits inside a single tweet (280 characters). character counts on this page do not include leading spaces. some gifs may not show the full animation due to length
try it out
may 21, 2025
f=0 v=Array(40).fill(1) y=[...v.keys()].map(n=>n*8) u=[...v] x=[...y] draw=_=>{ f++||createCanvas(w=500,w) background(0,f-1?10:255) stroke('#FFB000') y.forEach((n,i)=>{ if(x[i]>w||x[i]<0)u[i]=-u[i] x[i]+=4*u[i] if(n>w||n<0)v[i]=-v[i] y[i]+=v[i] circle(x[i],y[i],2) }) }
may 20, 2025
f=0 draw=_=>{ f++||createCanvas(w=500,w) background(0) stroke('#FFB000') d=sin(f/w) L=line L(q=250,490,q,s=300) A(q,s,75,-PI/2,6) } A=(x,y,l,t,i)=>{ if(i){ u=x+l*cos(b=t+d) v=y+l*sin(b) L(x,y,u,v) A(u,v,l*0.8,b,--i) u=x+l*cos(b=t-d) v=y+l*sin(b) L(x,y,u,v) A(u,v,l*0.8,b,i) } }