Week 2: Points, lines, shapes and color.

Order of operations

Processing adopts an order of operations as we understand them in math (yes that old thing.) Remember that the order goes

  • 1) Anything in brackets first
  • 2) multiplication (indicated by *) and division (indicated by /) from left to right
  • 3) plus (+) and minus (-) from left to right

Hello World

void setup() {
  size(400, 400);
void draw() {
  rect (20, 20, 100, 100);

Processing, (and many other languages) use semi-colons and curly brackets to help the computer interpret your code. The program does NOT interpret returns, tabs or extra spaces. So, according to Processing, the following code is exactly the same as the code above.

void setup() { size(400, 400);} void draw() {rect (20, 20,
100, 100); }

The word “void” means we are not sending the routine extra information (more on this later).
The most common errors will be forgetting to close a } or forgetting to add a ;

The semi-colon is called a “statement terminator”. It acts like a period does in English – in fact the only reason it’s not a period is it would be too confusing when you write a number with a decimal place. The curly bracket segments are called “functions blocks” – they allows us to section off different sections of the code.
Of course the first code is easier for us humans to read, so to quickly format your code go Edit – Auto Format (or command – T).

Every processing sketch needs a setup routine and a draw routine. The word “void” means we are not sending the routine extra information (more on this later).

The most common errors will be forgetting to close a } or forgetting to add a ;
When this happens Processing will kick out an error message that (hopefully) will be useful and the insertion point should jump to where the offending line is in your code. You will have to fix it yourself. Of course you may have made more than one mistake, in which case the program is only going to tell you about your first error.

Coordinate System

Processing uses Cartesian coordinates to position things on your screen. The top left corner is point (0,0). The x-coordinate gets bigger moving across the screen from left to right. The y-coordinate gets bigger moving from bottom to top.

So, in the code above, the line “size(400, 400);” means “create a window 400 pixels wide and 400 pixels high”, the line “rect (20, 20, 100, 100);” means “draw a rectangle with the top left corner at position 20, 20, that is 100 pixels wide and 100 pixels high”. There is a way to draw a rect using the coordinates of the center, not the top left, but this way is the default.


Screen Shot 2015-02-02 at 10.20.56 PM

Screen Shot 2015-02-02 at 10.21.01 PM

For more details see this tutorial.

Shapes and the Processing API

How do you know what are the keywords and what are not? Get familiar with the AIP (Application Programming Interface). You can get to it from the help menu, and even though it’s a webpage it’s local, so you don’t need to be online to view it. When you are experienced with programming and are faced with a new language, your first question will be “where’s the API?”

From processing go under the “help” menu to “reference”. Look in the 2d primitive section and create one sketch with a:

  • point
  • line
  • rect
  • circle
  • triangle
  • and a quadrilateral, (a four sided polygon)

Notice that the order matters, the 2d primitives that are lower in your script will get drawn later and so will be on top or “closer” to the screen.


The default color mode in processing is RGB (red green blue), however, if a color has 1 value it will be a grey scale with 0 being black, and 255 being white.

If the color has three values the first will be red, the second green and the third blue. If the colour has two or four values, the last value is an alpha, or transparency value with 0 being clear and 255 opaque.

//color functions
background(r,g,b);  //background can't have an alpha channel because there is nothing behind it! 

Look these up in the API to change the colors in your sketch.

Printing a message to the window

You can send information to the message window with the “println()” command. The ln in println mean line, and so puts the results on a new line in the meesage window.

mouseX and mouseY are processing keywords that can give us the x and y location of the mouse.

1) In a new sketch, draw an image of what you ate for dinner last night. Use println(mouseX); and println(mouseY); to get the the screen coordinates.