ProcessingJS is almost fully implemented. If you hit the toggle you will see that the current implementation of processingJS supports just about every feature of the java implementation. It also now supports the 3d canvas. I have mostly been using processing for 2d experiments and I have found it extremely easy to use. I also like the fact some many other libraries mimic Processing. I have also been dabbling in openFrameworks and that framework makes c++ tolerable to me. It is kind of nice to easily play around with generative art it makes building classes (objects) a cinch. I also like how I can utilize JavaScript from within the processing code. Here is something I quickly put together that is kind of like a Spirograph. As you can see the code to create something that is visual complex is relatively simple. I have spent my free time reading and focusing on a few books lately (Programming Interactivity, Processing: A Programming Handbook for Visual Designers and Artists, and Algorithms for Visual Design Using the Processing Language). I would suggest them to anyone interested in learning Processing. Processing also has an android version as well. If you like processing than you might also like EnergizeGL library. The EnergizeGL library has a lot in common with processing and if you have experience in processing or openFrameworks you will easily be able to pick up the EnergizeGL framework. EnergizeGL also allows you to create textures that utilize the 2d canvas and as a result you can send JavaScript commands to the canvas making the textures interactive and I can see lots of potentially cool experimental visuals coming out of this framework.

ProcessingJS Code for SpiroGraphic:

//initialilze variables

int masterXflower = 1;
void setup() 
        size(590, 590);  // Size should be the first statement
        stroke(255);     // Set line drawing color to white
void draw() 
        background(255); 		pushMatrix();
		spiroGraphic sG1 = new spiroGraphic();
		spiroGraphic sG2 = new spiroGraphic();

class spiroGraphic{
		float angle = 0.0;
		float inc = 0.01;
		inc += 0.01;
		int locX = random(500)+(masterXflower*-1);
		int locY = random(-10, 100);
		angle = sin(inc) / 10.0 + sin(inc*1.2)/20.0;
		for(int i = 0; i < 35; i++){
			color shade = new color(random(10), random(255), random(255), random(convert(mouseX, 10, 50)));
			stroke(random(10), random(255), random(255), random(convert(mouseX, 50, 100)));
			fill(random(10), random(255), random(255), random(convert(mouseX, 50, 100)));
			stem st1 = new stem(locX+i, 25 + i, -1*angle/1.3*i, locY+i,shade);

class stem{
	    int locX; int units; float angle; int locY; color shade;
		stem(locX, units, angle, locY, shade){
			translate(locX, 500);
				for(int i = units; i > 0; i--){
					rotate(angle * (0.1 * mouseX*2));
					petal pt1 = new petal(locX+i+random(-2,2),locY+i+random(-2,2), random(2), mouseX, shade);

class petal{
		int locX; int locY; int size; int dir; color shade;
		petal(locX,locY,size,dir, shade){
			fill(random(10), random(255), random(255), random(convert(mouseX, 50, 100)));
			//ellipse(locX, locY, random(10), random(20));
			vertex(1.0*dir, -0.7);
			bezierVertex(1.0*dir, -0.7, 0.4*dir, -1.0,0.0,0.0);
			bezierVertex(0.0, 0.0, 1.0*dir,0.4,1.0*dir, -0.7);

int convert(mx, min, max)
   int range = max - min;
   int percent = round(mx/width);
   int n = (percent * range) + min;
   return n;
function isEven(num) {
  return !(num % 2);

Download Example / Launch Demo

It’s kind of funny when I originally wrote this post the current processinJS build was at 0.97 but it has recently been updated to 1.0! Processing is fun to play around with and relatively easy to pick up. You will also find lots of resources on line to help you learn processing. What you learn in Processing can be applied to a variety of other technologies and frameworks. So I recommend checking it out:)

Generative Art Framework Resources:
Links Worth Reading:
Processing for JavaScript Developers
Processing Introduction
Kinect why it matters..