Using Images with Processing.js and Demos

Two items following up from class 3/20/13:

First: Using images with Processing.js

In class we went over how to import images into your Processing sketch while it is running locally on your own computer. One thing we didn't cover before we ran out of time was an extra simple step for using those same images after you convert your Processing sketch to Processing.js.

For every image you use in your Processing.js sketch:

1. Add the following line of code before anything else in the .pde:

/* @pjs preload="fileName.jpg"; */ 

(change the file name to the name of your own image file)

2. Save that image file in the same project folder as your .pde, .js, and .html files.

Here is a project folder which serves as a working example. It is also covered on the Processing.js website here: http://processingjs.org/reference/image_/


Second, demos:

I have shared a folder with the demos we went through in class, as well as extras to take a look at:
Processing Demos: 3/20/13

There are also many many helpful examples on the Processing website:
http://processing.org/learning/basics/