Getting started with ProcessingJS
Adam — Tue, 31/08/2010 - 4:57pm
ProcessingJS, it's Processing but in Javascript & <canvas>.
The steps to get started with ProcessingJS in a stand alone environment are really straight forward but not documented anywhere. There is a really basic demo on the front page which basically implements these steps but it's not obvious that is what you need to download. Of course I only found that link after I wrote this up and figured this would be useful anyway.
Here's how you get started:
- Goto http://processingjs.org/download and download the latest
processing-js-x.x.x-examples.zip file. - Open the zip file and extract the following files into a working directory:
- processing-js-x.x.x-examples/processing.js
- processing-js-x.x.x-examples/examples/init.js
- Create a new html page called 'index.html' with the following:
<!DOCTYPE html> <html> <head> <script src="processing.js"></script> <script src="init.js"></script> <title>Getting Started with ProcessingJS</title> </head> <body> <script type="application/processing" target="#canvas1"> /* PROCESSINGJS.COM - BASIC EXAMPLE Delayed Mouse Tracking MIT License - Hyper-Metrix.com/F1LT3R Native Processing compatible */ // Global variables float radius = 50.0; int X, Y; int nX, nY; int delay = 16; // Setup the Processing Canvas void setup(){ size( 200, 200 ); strokeWeight( 10 ); frameRate( 15 ); X = width / 2; Y = height / 2; nX = X; nY = Y; } // Main draw loop void draw(){ radius = radius + sin( frameCount / 4 ); // Track circle to new destination X+=(nX-X)/delay; Y+=(nY-Y)/delay; // Fill canvas grey background( 100 ); // Set fill-color to blue fill( 0, 121, 184 ); // Set stroke-color white stroke(255); // Draw circle ellipse( X, Y, radius, radius ); } // Set circle's next destination void mouseMoved(){ nX = mouseX; nY = mouseY; } </script> <canvas width="200" height="200" id="canvas1"></canvas> </body> </html> - Open the index.html file in your browser.
You should see a grey box, 200x200 pixels in size, with a pulsating
blue and white circle that follows your mouse around.
The processing.js file does all the work of implementing the Processing environment, the init.js file just searches your html page for script tags with the type set to 'application/processing'. It then loads the Processing object into canvas tags based on the target/id pairs or on a first come first served basis.
- Login or register to post comments
- Printer-friendly version
