Dynamic Processing.js Sketches in a Tweet

by David Humphrey

Yesterday, no doubt delirious from having made it through exams, processing.js developer Andor Salga idly tossed out a challenge:

Anyone interested in a @ProcessingJS #Twitter 140 char challenge?
He followed it up with the first sketch-in-a-tweet (spaces added for line breaking only):

f=0;k=stroke;r=rotate;s=300;int draw(){f++;r(f/s);k();d();translate(sin(f/9)*9,0);  
k(0,9,0);d()}int d(){for(i=0;i<6.4;i+=.1){r(i);line(s);r(-i)}}

It may not be obvious what this does just to look at the code, but that's quickly remedied. If you go to http://sketchpad.cc/ and click Create New Sketch, you can copy-paste that code and run it (you don't even need to create an account!).

The great thing about http://sketchpad.cc/ is that it's half Etherpad, half Processing.js, which means it's so easy to experiment on the fly, and to do so with lots of other people at the same time. And throughout the day, people did a lot of such experiments. Within an hour of his first tweet, Andor's original sketch had been rewritten more than 200 times, and looked completely different, and really beautiful:

f=0;k=stroke;r=rotate;s=180;w=300;size(300,300);m=millis;  
int draw(){f++;r(f/s);k();d();translate((m()/10)%w,(m()/52)%w);k(26,59,200);d()}  
int d(){for(i=0;i<w/2;i++){k(i,(i*(m()/100)%255)/255,(m()/100)%200);  
r(i);(i%2==0)?ellipse(w/2-i,w/2-i,1,1):line(i*2);r(-i)}}

I spoke with quite a few Processing developers who were trying this yesterday, and they were confused at a few things these processing.js sketches rely upon. A Processing.js sketch can be valid Processing code, but it can also be a hybrid of Processing and JavaScript, or pure JavaScript. Therefore we can do things like:

  • Use variables without declaring them, and without giving a type (JavaScript will create the variable on first use)
  • Leave out semi-colons where context ensures there is no ambiguity (JavaScript will insert them for us)
  • Shorten built-in Processing function names to single letters (JavaScript lets attach functions to variables)
  • Cheat and change void return types to int (JavaScript is typeless). Pomax took this to the next level by introducing a class type X, which was undefined, but never used, and therefore valid :)
    One of my favourites was a complete Mandelbrot done in under 140 characters by Pomax, lonnen, and others:
d=a=100;b=a*a;X draw(){for(i=0,d++;i++<b;){u=i%a/a-1;v=i/b-1;  
for(p=q=j=n=0;p*p+n<5&j++<a;){n=q*q;q=2*q*p+v;p=p*p-n+u}set(i%a,i/a,~j<<d)}}

Yesterday reinforced for me two important truths that I wanted to share:

  1. Creativity loves constraint
  2. The web was made to enable playfulness