Alex R. Young





animation graphics canvas


Posted by Alex R. Young on .

animation graphics canvas


Posted by Alex R. Young on .

https://s3.amazonaws.com/dailyjs/images/posts/processing-logo.png" alt="" />

Processing.js is a JavaScript/HTML canvas port of Processing. Processing provides a
toolkit for programming images, animation and even games. It's hosted in
Java and provides its own mini-IDE. Processing.js can interpret
Processing projects, but runs them in a browser that supports canvas.

If you're familiar with Processing already you should be able to run
some of your projects in Processing.js. Just create a simple HTML page
with a canvas and include processing.js. The
examples/ folder in the source distribution demonstrates
how to do this using a script called
init.js -- this finds the canvas on the page and instantiates a processing object:

Processing(canvas, scripts[i].text);

Processing.js allows you to embed Processing scripts into HTML like

Calling Processing from JavaScript

If you're new to Processing but have a lot of JavaScript you want to
reuse, you can safely call Processing from your JavaScript code. I've
prepared an example project,
fire.js which demonstrates one way of mixing JavaScript and Processing. You can pass the current
Processing environment to a JavaScript class like this:

void draw() {

Keeping some level of separation between JavaScript code and "pure"
Processing seems like a good way to avoid confusion if you ever port to
another Processing platform.

Processing Basics

Every Processing project has setup() and
draw() functions. In this case I've instantiated a Fire
object and I'm passing this which is the current Processing
object. Then I can access Processing's functions from within my
JavaScript class.

The Processing reference gives
example code for all of the Processing functions. There's a lot of
drawing primitives like rect() and ellipse()
-- playing around with these is a good way to learn Processing.

Related Projects

ruby-processing is a Ruby port. It differs to Processing.js because it provides a Ruby-style
version of the Processing API. Even CamelCase method names have been
changed to underscores.

Although Processing.js and Processing are awesome projects, if you just
want to draw vector graphics you'd be better off with something like
Raphael. Processing is more suited to animated visualisations or interactive projects.