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

to set up your own environment, follow these steps:
  1. download and install processing
  2. open the application and click the drop-down menu in the upper right that says java
  3. click manage modes
  4. select p5.js mode and click install
  5. return to the main application window, click the drop-down menu again and select p5.js
  6. you are now ready to run any of my code here and/or write your own


may 21, 2025

"parallel photons", 253 chars

click to load gif (5.27 MB)
  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

"fractal acacia", 258 chars

click to load gif (8.45 MB)
  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)
    }
  }