ringo-processing is a RingoJS package that allows you to write Processing sketches in (modern) JavaScript.

This is alpha code and mostly untested on anything other than OS X.

If you have questions (or answers!) please get in touch (on e.g. the RingoJS mailing list or the #ringojs IRC channel on Freenode).

• 2010-04-06: A first version of ringo/processing/web is in.

Once you have a working RingoJS installation:

ringo-admin install chl/ringo-processing

Alternatively, simply check out this Git repository inside the RingoJS packages directory.

Samples will be collected in a separate ringo-processing-samples project.

With minor divergences (see below), the Processing API as you know and (hopefully) love it is available as you'd expect.

ringo-processing currently supports two styles of writing sketches.

A sketch object (accessible as sketch) and the Processing API¹ are injected into a given scope:

require("ringo/processing").wire(this);

function setup() {
    size(400, 400);
    background(0);
    colorMode(RGB, 1);
    strokeWeight(5);
    stroke(0.75, 0, 0);
}

function draw() {
    line(0, 0, width, height);
    line(0, height, width, 0);
}

run();

This second style is particularly useful if you want to package sketches as re-usable RingoJS modules:

var {Sketch, RGB} = require("ringo/processing");

export("X");

function X() {};

X.prototype = new Sketch();

X.prototype.setup = function() {
    this.size(400, 400);
    this.colorMode(RGB, 1);
    this.background(0);
    this.strokeWeight(5);
    this.stroke(0.75, 0, 0);
};

X.prototype.draw = function() {
    this.line(0, 0, this.width, this.height);
    this.line(0, this.height, this.width, 0);
};

if (require.main == module.id)
    new X().run();

• frameRate: Implemented as read/write property instead of field/method pair.
• mousePressed/isMousePressed: mousePressed corresponds to the event handler, isMousePressed to the field.
• keyPressed/isKeyPressed: See above.
• mousePressed vs. mousePressedEvent &c.: *Event versions of event handlers get an event argument.
• Additional events: sketchResized, sketchResizing

Of course! Just start ringo, wire up ringo-processing and let it roll.

A typical (if not particularly exciting) REPL session might look like that:

require("ringo/processing").wire(this)
run({exit: false}) // do not exit when frame is closed
r = random, bg = background, f = fill // let's define some abbreviations
t = 10 // parametric design is about to begin!
draw = function() {f(100 + r(50), 0, 0); rect(r(width), r(height), t, t)}
noStroke() // those strokes definitely need to go
bg(0) // let's start over
size(600, 200)
t = 25
...

In order to run and modify an existing sketch interactively, explore the ringo -i option:

ringo -i ringo-processing-samples/lp/example-9-8.js

For now, see ringo/processing/web/demo. More spectacular documentation is being prepared.

Work in progress. Only OpenGL tested so far. Use use:

function setup() {
    use("opengl");
    size(800, 600, OPENGL);
    ...
}

Support for sketch-specific libraries is forthcoming.

• Performance: If you want speed, you'll probably need to use Java.
• Initialization: While wire sets up all functions, properties &c., actually using the Processing API will only work after calling run (which initializes the Processing applet). In other words: Apart from variable declarations, most initialization code should go into setup.
• Threads: Be advised that at least two threads are involved - the Swing event dispatching thread and the Processing animation thread. To ensure that code executes on the correct thread, call Processing API functions only from the Processing event handlers (setup, draw &c.); in case you need to interact with Swing, look up invokeLater/invokeAndWait in SwingUtilities.
• OpenGL sketches & REPL API interaction: Leads to segfaults (probably due to threading issues).

• ruby-processing: The gold standard when it comes to dynamic-language Processing wrappers.
• Spde
• incanter-processing

• A runner (to do away with boilerplate code in simple mode)
• A "control panel" similar to what ruby-processing offers
• Higher-order library (grid, eachPoint &c.)?
• NodeBox-like color utilities
• Probably not: Applet (web) export

• Web application PGraphics sugar: imageResponse &c.

ringo-processing is available under the same license as RingoJS.

Processing, core components of which are bundled with ringo-processing, is distributed under the terms of the GNU Lesser General Public License.

¹ Or: "appropriately-bound functions/properties/constants representing the Processing API"