Processing.js Experiment

Over the last few weeks when I wasn’t working or fighting hackers on my blog (If You follow me on Twitter you know what I mean), I had the chance to give Processing.js a try, Processingjs is a port of the Processing programming language,and it lets You program images, interactions and animations for the web without using Flash or Java applets, it uses JavaScript to draw shapes and manipulate images on the HTML5 canvas element (You’ll need a browser that supports it …cough..IE…cough…ISSUE 15), so if you like building data visualizations, creating user-interfaces and developing web-based games Processing.js might be your thing.
So I decided to do a simple test and boy it was really simple to implement existing Processing sketches.
Here’s a little 3 steps explanation on how I did that experiment;

Step Number 1.-

First things first in order to play with Processing.js you’ll need to download and include it inside the tag of your html file.

You need a <ahref="http://www.google.com/chrome"target="_blank">modern browser</a> to view this.

So what’s going on here ? You need to tell the canvas the location of the sketch that you’ll be running (in this case the worms.pjs file), in the datasrc attribute and a explaining text in case the user’s browser dont support HTML5 yet other way all they’ll see is a blank screen.

Step Number 3.-

The actual Processing.js that will display those playfull worms on Your HTML, if you’ve used Processing before you’ll notice that there’s actually nothing diffrent form what You do in a regular Processing sketch and if you copy and paste this in the Processing enviroment it will run as any other sketch.

Hope this little explaings helps You get started with Processing.js, I’ll be doing a little more of experimentation with it myself and tell You how it goes.

Until next time See You.

Author: Dave Gamez

Digital Craftsman from México and have more than 14 years of experience both in design and development in the digital field.
I currently work in web, desktop, mobile and illustration projects alike and spend my time between being Technology Director at Team-O a Digital Studio I co-founded with Cecy Meade and doing consultancy work, when time allows it I like to experiment and tinker with code, animation and illustration.
View all posts by Dave Gamez