Processing Tips

General Resources Archive of videos of work done on processing ---
1006-w09 — Basic Processing codes and tips from last year's Interactivity Design 1 Wikispace (@ York)
YSDN 1006 Interactivity 1 — Andrew Hladkyj's Interactivity Design 1 (@ Sheridan) course website — Beginner-level tutorials on Processing — Processing function reference — Examples of Processing work — RGB Colour References — Practice exercises for Processing — Examples of Processing codes, based on Learning Processing by Daniel Shiffman — Examples of some complex works, some are broken down into steps — Another site featuring examples of students work done with processing from VCU Arts- Visual Programming.
Layers in Processing (Library) — This library adds a quasi "layering" ability to Processing which is very useful if you're getting into some sketches that are needing to have independent "daw()" functions (since you can't repeat this normally in a sketch). I discovered this library while working on my Proj. 2 since I was mainly using videos as a base layer and this would constantly re-draw the background (i.e. drawing a continuous line was impossible as you wouldn't see the trail it left due to the constant re-draw cause by the video). It might take a few minutes to get the tutorial under-wraps, but it could be very useful. (Although there may be other ways to do this, however this was the best I could find.)


For anyone having trouble exporting Processing pdfs with type, go here.
For anyone using Snow Leopard and cannot get the movie library to work, try this.

For people who have been experiencing troubles when trying to play show video in Processing, I found that it helps to put "P2D" in the size box.
i.e. use size(400, 200, P2D); instead of size(400, 200);
I do not know how exactly this works, but it does. Cheers, Fred.

Sample Coding

Saving Files Through Coding

save ("filename"+month()+day()+hour()+minute()+second()+".png");
A new, separate PNG file of your work will be saved every time you run your Processing code.

Image Array

int maxImages = 81; // Total # of images
int imageIndex = 0; // Initial image to be displayed is the first
MovieMaker mm;
// Declaring an array of images.
PImage[] images = new PImage[maxImages];
void setup() {
    mm=new MovieMaker(this,width,height,"",30,MovieMaker.JPEG,MovieMaker.HIGH);
  // Loading the images into the array
  // Don't forget to put the JPG files in the data folder!
  for (int i = 0; i < images.length; i ++ ) {
    images[i] = loadImage( "trip" + i + ".jpg" );
void draw() {
  // increment image index by one each cycle
  // use modulo " % "to return to 0 once the end of the array is reached
  imageIndex = (imageIndex + 1) % images.length;
    if(frameCount == 82)//change accordingly
    } else {
       mm.addFrame();//adds window's pixels to the movie.
Here is the code for the array of images that makes the picture appear one after the other. Work needs to be done on stopping the array at the end of the images, but you can speed up or slow down the sequence by changing the frameRate() option.
If you use a lot of pictures, it loads really slowly, and your computer might not even have enough memory to hold it.

Looping a Moving Image (from one side to the other)

PImage img;
//initial start for image
float x = 0.0; // x position variable
void setup() {
  img = loadImage("______.png");
  size(800, 600);
void draw() {
  //x representing the movement on the x-axis
  image(img, x, 0);
  x-=2; //rate of speed image moving to the left **(//-//)** by 2
  //if the image moves all the way till the end (its right side) than move it back to its starting point at Zero (0)
  if (x < -4000) {