impromptu processing
in-browser graphics shell hack from mochikit & processing.js, requires the latest firefox 3, or nightly builds of webkit.
javascript based interpreter... make graphics and animations in the javascript style
processing language based interpreter... use the processing style language for your art
Click on either of the above two links to launch the programming environment.
Note:
Use control+enter or cmd+enter to execute multiple-line blocks of code inputted in the larger text areas.
The main Processing.js object that you will interact with is assigned to the variable "p."
Also, for your convenience, example Javascript code is populated in that interpreter's text area. Click anywhere on that code, and press control+enter or cmd+enter to render the basic example.
Basic Example
This draws a basic white circle on a black background:
p.background(0);
p.fill(255);
p.ellipse(50, 50, 50, 50);
Logic patterns
These are commented in the interpreter, so add or remove the comment slashes on each to see their output:
p.background(255);for(i=20;i < 60;i=i+4){p.ellipse(i, i, i, i)}
p.background(255);for(i=20;i < 80;i=i+4){p.ellipse(i, i-5, i, i);p.ellipse(i, i+5, i, i)}
MochiKit based animation
Try pasting this in:
forEach(range(0,20),function(frameNumber){var moveValue=frameNumber*2;callLater((1/60)*frameNumber,partial(p.ellipse,50+(frameNumber * moveValue/20),50+moveValue,50,50));});
This uses code in the style of traditional Processing, so a bevy of resources are available:
BY-NC-SA 2008 TMW for the Fuse Factory Saturday evening get-together, July 12th, 2008, at Junctionview Studios, Columbus, Ohio.
MochiKit and Processing.js are under their own licenses.