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. the images on this page are just previews. to see the full animation, please run the code

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

you can also run the code in your browser: http://editor.p5js.org/

"electric fence", 233 chars

  f=x=0
  h=[u=20,v=70,90,u,v,50,80]
  d=100
  draw=_=>{
    f++||createCanvas(w=500,w)
    background(0)
    stroke('#FFB000')
    for(j=1;j<=5.6;j+=0.4){
      h.map((n,i)=>{
        line(e=i*d-f%d,j*n,e+d,j*h[i+1])
        line(e,n,e,n*5.4)
      })
    }
    if(!(++f%d)){
      h.shift()
      h.push(random(v)+u)
    }
  }

run in browser

"snowdrift jumper", 260 chars

  f=g=0
  d=100
  h=[w=500,y=480,u=380,y,u,u,y]
  draw=_=>{
    f++||createCanvas(w,w)
    background(w)
    h.map((n,i)=>
      line(e=i*d-f%d,n,e+d,h[i+1])
    )
    k=lerp(s=h[1],t=h[2],f%d/d)
    if(!(++f%d)){
      g=g?g:k-lerp(s,t,1.02)
      h.shift()
      h.push(random(d)+u)
    }
    y=min(a=y-g,k)
    g=a>k?0:g-.1
    circle(d,y-11,20)
  }

run in browser

"moiré worm", 170 chars

  f=0
  draw=_=>{
    f++||createCanvas(w=500,w)
    background(0)
    fill(0)
    stroke('#FFB000')
    for(i=w;i>0;)
    circle(
      i+cos(2*f/w)*sin(2*f/w+i/20)*50+50,
      i+sin(2*f/w)*cos(2*f/w+i/20)*50+50,
      i--
    )
  }

run in browser

"parallel photons", 249 chars

  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.map((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)
    })
  }

run in browser

"fractal acacia", 258 chars

  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)
    }
  }

run in browser