sTech Resources:     Home     Blog     Forum     Examples     Projects     Tasks     Tutorials

Processing Tasks

Introduction to Processing

Books

• Greenberg, Ira. Processing : creative coding and computational art 2007 Book 006.66 GRE Cambridge : Main
• Reas, Casey. Processing : a programming handbook for visual designers and artists 2007 Book 005.1 REA Cambridge : Main
• Reas, Casey and Fry, Ben (2010) Getting started with Processing. O'Reilly.

Getting started with Processing is available as a book and an ebook at the library.

First Examples

• 1. Read chapters 2, 3 and 4 of 'Getting Started with Processing' by Casey Rhys and Ben Fry. It's a ebook in the library if you don't have it.
• 2. Implement and experiment with the ideas there. If you need more guidance, try the following (and then continue with one or more of the above!).

Code for Processing

//////////////////////////////////////
// Draw the mouse
//////////////////////////////////////

void setup() {
size(480, 120);
fill(0, 102);
smooth();
noStroke();
}

void draw() {
ellipse(mouseX, mouseY, 9, 9);
println("I'm running");
}

//////////////////////////////////////
// Click
//////////////////////////////////////

void setup() {
size(240, 120);
smooth();
strokeWeight(30);
}
void draw() {
background(204);
stroke(102);
line(40, 0, 70, height);
if (mousePressed == true) {
stroke(0);
}
line(0, 70, width, 50);
}

//////////////////////////////////////
// Pointillism
//////////////////////////////////////
/**
 * Pointillism
 * by Daniel Shiffman. 
 * 
 * Mouse horizontal location controls size of dots. 
 * Creates a simple pointillist effect using ellipses colored
 * according to pixels in an image. 
 * 
 * Updated 27 February 2010.
 */
 
PImage img;

int smallPoint = 2;
int largePoint;
int top, left;

void setup() {
  size(200, 200);
  img = loadImage("eames.jpg");
  //img = loadImage("sunflower.jpg");  // an alternative image
  noStroke();
  background(255);
  smooth();
  largePoint = min(width, height) / 10;
  // center the image on the screen
  left = (width - img.width) / 2;
  top = (height - img.height) / 2;
}

void draw() { 
  float pointillize = map(mouseX, 0, width, smallPoint, largePoint);
  int x = int(random(img.width));
  int y = int(random(img.height));
  color pix = img.get(x, y);
  fill(pix, 128);
  ellipse(left + x, top + y, pointillize, pointillize);
}


//////////////////////////////////////
// just the dot
//////////////////////////////////////

void setup() {
size(480, 120);
fill(0, 102);
smooth();
noStroke();
}
void draw() {
background(204);
ellipse(mouseX, mouseY, 9, 9);
}


//////////////////////////////////////
// size by speed of dot
//////////////////////////////////////

void setup() {
size(480, 120);
smooth();
stroke(0, 102);
}
void draw() {
float weight = dist(mouseX, mouseY, pmouseX, pmouseY);
strokeWeight(weight);
line(mouseX, mouseY, pmouseX, pmouseY);
}


//////////////////////////////////////
// and many more...
//////////////////////////////////////

Now try more examples from one of the books mentioned above. Think of a few simple actions and results you'd like to see and try to implement them. Save the results in a logical and sensible way.

The Projects

The projects and tasks are designed to help you through the various courses and materials that you'll have to deal with, and also to provide an active and practical element to what could otherwise become a rather dry and technical exercise. Tasks are small exercises - you may be asked to complete one or two per week. Projects are larger and carry a higher percentage of the mark. We will undertake two, three, four or more projects and tasks. The final project is usually an individual choice project, and will be worth significantly more than the others in terms of percentages in your portfolio. We will usually try to set aside a time to perform the projects in a public setting.