First few hours with processing.js.

February 18th, 2010

I finally had a chance to check out processing. This language seems to have a lot potential for creating things that would be difficult or impossible with plain javascript:

What is processing.js?

Processing is an easy-to-learn, open-source programming language for making images, animation, and interactions. Think of it like Flash but without all the nonsense. John Resig recently ported the language over to javascript for use on the web. The result — processing.js — uses javascript to draw shapes and manipulate images on the HTML5 Canvas element.

How does it work?

1 Download the latest version of processing.js.

You can download the latest stable release here. The package will contain a few files. First, the processing library which you’ll need to include in your header like any other javascript library:

        <script src="processing-0.4.js"></script>

Next, an example.pjs file. This is where you’ll write your actual processing code. You’ll need need to reference this file somewhere in the body of your webpage: 

        <canvas datasrc="example.pjs"></canvas>

2 Create a setup() block to hold your basic configuration logic.

A setup() block holds your basic configuration logic (i.e. the stuff you want to happen one time when the file is loaded). A simple setup() block might look like this:

        void setup() {
        	size(255,255);
        	background(224); // light gray
        }

3 And create a draw() block to manage your animation.

You place your animation code inside a draw() block. This code will run as a continuous loop. This means it can be response to interactions, such as mouse position. This little block, for example, will draw a thin black line based on mouse position:

        void draw() {
        	// set line color to black
        	stroke(0);
        	// draw line between previous and new mouse coordinates
        	line(pmouseX,pmouseY, mouseX,mouseY);
        }

Where can I learn more?

There are not many processing.js specific resources. But don’t worry. Both processing.js and the standard processing language use the same java-like syntax. This means you can freely mix-n-match resources from either project.

With that in mind, here’s a few leads:

Tags: ,

Your thoughts?

Preview