CSC103 Processing Lab -- Part 1

--D. Thiebaut 20:23, 27 February 2012 (EST)

---

Download and Install Processing

• Go to http://processing.org/download/ and download the version for your system
• Install as you would a typical new application
• Test Processing by
  • Starting the application
  • Opening the File menu
  • Selecting the examples option
  • And picking an application at random (Effects, FireCube, for example!)
• If you see a rotating cube on fire in space, you're good to go!

A First Example

Assuming that you have Processing installed on your computer, type in the following code in the IDE:

void setup() {
  size(480, 480 );
  smooth();
}

void draw() {
  ellipse(mouseX, mouseY, 80, 80);
}

• Run your program.
• Notice that the program draws circles (ellipses with the same horizontal radius as vertical radius) that overlap each other, following the mouse around.
• When the mouse is outside the window, the graphics window stops moving the circles. This is because the graphics window is sensitive to the mouse only when the mouse is over the window.

Some explanations

• Once again, a Processing program is called a sketch, and we'll use both terms here interchangeably.
• The sketch contains our two functions: setup() and draw().
• Setup() is executed first and sets the size of the graphics window to 480 pixels wide by 480 pixels high. You can change these around to see how the new window is affected.
• smooth() is called by setup() to make the display of graphics shape smoother to the eye. This will slow down the program a tiny bit, but in most cases, this is something we'll want to do. You can try removing the smooth() call and see how it affect your program.
• The draw() function is listed next. This function is called 30 times a second. All it does is to draw an ellipse at the x and y location of the mouse on the graphics window. Top-left is 0, 0. Bottom right is 479, 479 (since our window size was set to 480, 480).
• And that's it!

This is our first example of animation with Processing. It's easy to do. Just make the draw() function draw something on the graphics window where the mouse is located, and do it 30 times a second. As the mouse moves, the new shapes are drawn following the mouse.

Some variations to try

Variation #1

• Locate the rect() graphics function in Processing's reference section.
• Notice how it should be used:

• Change the ellipse to a rectangle in the sketch as follows:

void setup() {
  size(480, 480 );
  smooth();
}

void draw() {
  // ellipse(mouseX, mouseY, 80, 80);
  rect( mouseX, mouseY, 80, 80 );
}

• the two slashes in front of the line with the ellipse() function transforms this line into a comment. A comment is line of code that does not contain any code, and contains textual information that is skipped by the processor when it runs the program.
• The rect() function is asked to use mouseX, and mouseY as the coordinates of where to put the rectangle. The width and height of the rectangle are set to 80 pixels each.

Variation #2

• Locate the background() graphics function in Processing's reference section.
• Read the description of the background() function.
• Add a call to the function background() in the draw() function. Pass it the value 200, which is light grey (you would use 0 for full black, and 255 for full white).

void setup() {
  size(480, 480 );
  smooth();
}

void draw() {
  background( 200 );
  // ellipse(mouseX, mouseY, 80, 80);
  rect( mouseX, mouseY, 80, 80 );
}

• Try the sketch.
• What is happening? Why is there only one rectangle on the screen?
• Comment out the rectangle function by putting two slashes in front of it, and uncomment the ellipse function by removing the two slashes that prefix it. Try the sketch again!

Variation #3

• Let's fill the ellipse with a color. This is accomplish with the fill() function.
• Find the description for fill() in the reference section of Processing.org (you know where to go, by now!)
• Add a call to fill() in the draw() function:

void setup() {
  size(480, 480 );
  smooth();
}

void draw() {
  background( 200 );
  fill( 150 );
  ellipse(mouseX, mouseY, 80, 80);
  //rect( mouseX, mouseY, 80, 80 );
}

• Try the sketch!
• If you want to change the color for something more appealing, try this color table: http://web.njit.edu/~kevin/rgb.txt.html
• Pick a color that you like, and copy the three numbers in the third column from the left. Put these numbers in the fill() function, separated by commas. For example, assume you want to use the GreenYellow color:

Change the fill() function call to read:

fill( 173, 255, 47 );

• Try it!