Learning Processing, Lesson 1

09/03/2009

Over the next few weeks months I will be teaching a small introduction to programming course at Viget Labs. I'll be using Processing as a means to explore some basic programming concepts and I'll be following the excellent book Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction by Daniel Shiffman. Each lesson will have an accompanying blog post that outlines the topics we'll try to cover and links to any resources we may need. Here are some notes on Lesson 1.

Points

  • Explained the difference between the Cartesian coordinate system and the Processing coordinate system.
  point(x, y);
  line(x1, y1, x2, y2);

Shapes

  rect(x, y, w, h);
  rectMode(CORNER); // default
  rectMode(CENTER);

  rectMode(CORNERS);
  rect(x1, y1, x2, y2);

  ellipseMode(CENTER); //default
  ellipse(x, y, w, h);

Color

  • Covered grayscale, RGB, HSB and alpha colors in Processing.
  • Walked through some examples in order to explain how color funcations apply to shapes.
  noStroke();
  stroke();
  noFill();
  fill();

Zoog!

http://www.learningprocessing.com/examples/chapter-1/example-1-5/

The Processing Application

  • Serves as the Processing IDE, Integrated Development Envronment.
  • IDE is a fancy acronym that refers to the app you write code with.
  • Talked about the idea of "sketches" & the sketchbook.

Syntax

  • Reviewed the three general statement types of function calls, assignments, and control structures.
  • Explained that in the beginning, almost every line will be a function call.
  • Dissected a function call into its constituent parts of name & arguments.
  println("omg sheuz!");
  // single line comment
  /*
  multi
  line
  comment
  */

The Reference

http://processing.org/reference/

Interaction

  • Discussed setup() and draw().
  • Covered the mouseX, mouseY, pmouseX, pmouseY constants.
  • Showed that draw() redraws on each frame by placing background() in setup().
  • Defined some mousePressed(), mouseReleased(), and mouseClicked() event handlers.
  void draw() {
    background(208);
    // a rect that follows the mouse around
    rectMode(CENTER);
    rect(mouseX, mouseY, 20, 20);    
  }

  void draw() {
    // draw on the screen with a pen
    line(mouseX, mouseY, pmouseX, pmouseY);
  }