Processing.js is a port of the visualization language, Processing. As its front-end, it allows you to write in the Processing language (while JavaScript “bindings” are doable, that’s not necessarily the intent). As for the back-end, Processing.js utilizes the Canvas HTML element as its rendering target.

The Processing language is a very simplified version of Java. It handles and feels very much the same way, except a good bit less verbose. Additionally, the platform introduces input awareness at a global level which allows for the rapid development you see in the screencast.

In this screencast, I explore building a trivial particle system. It is important to note particle systems can become incredibly complex beasts and I do not mean to marginalize the effort required to build them. The effect we achieve here is directly proportional to the time invested, and I plan to expand on this subject in the future.

In our particle class, seen here:

class Particle {
	float x, y;
	float xV, yV;
	float gravity, life;
	
	Particle(float initX, float initY) {
		x = initX;
		y = initY;
		life = 20;
		gravity = 1;
		
		xV = random(-5, 5);
		yV = random(-15, -20);
	}
	
	void update() {
		yV += gravity;
		
		x += xV;
		y += yV;
		
		if(life > 0) {
			life--;
		}
	}
	
	void draw() {
		ellipse(x, y, 10, 10);
	}
}

I make heavy use of the float data type. In execution, our example likely could have used integer values instead. However, if we had added any sort of rotation or adjusted gravity to a fractional value, it would have been necessary to use floats.

In conclusion, the Processing.js library is fascinating in its simplicity and shallow learning curve. I plan to continue exploring the platform in future screencasts.

Thanks again for watching.

Download an example file.

Links:
http://processingjs.org
http://processingjs.org/reference
http://processing.org