processing.js

http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines

What is it?

Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins.

Basically, it is how we put our Processing sketches onto the web.

What is it?

Processing.js is built with Javascript and HTML5

It automatically converts your Processing code into Javascript so that it can appear with all its functionality on a web browser.

How does it work?

1. Download the latest version from processingjs.org

How does it work?2. Make your Processing sketch and save your files as you usually would:

*.pde

Ex: sketch_aug08.pde

How does it work?

3. Make a web page that includes Processing.js and a <canvas>, which is an HTML5 element.

Once processing.js is in a web page, the browser will know what to do with it!

You need to include a src attribute inside a script tag with the processing.js file name (and the path to get to it from your web page location)

How does it work?

3. Continued… Now, add your <canvas> tag. It should have an attribute as well that calls your .pde file (and the path to get to it from your page).

Save your webpage HTML with your .js and .pde files

How does it work?

4. Open your page!

Javascript is telling the web browser how to obtain and show your Processing sketch on the website. You should see your images come to life!

How does it work?

**Note:

Processing.js does not work with ‘data’ folders like you use in Processing.

Make sure you save anything that’s called in your sketch (such as images) in your web page directory the same way you would anywhere else in your HTML code.

Why Use processing.js?1. No need for plug-ins

2. Uses web standards.

…

For more information, help, and examples, visit:

www.processingjs.org