Assumed Knowledge:
  • Basic Computer Literacy
  • Understands Files and Folders.
Learning Outcomes:
  • Become familiar with the Processing Programming Environment
  • Create your first Processing Programs on your Own Computer
  • Become familiar with the steps that occur when a processing program is run.
  • Be able to do arithmetic the way computers do.

Textbook

The textbook for this unit is “Learning Processing: A Beginner’s Guide to Programming Images, Animation, and Interaction” by Daniel Shiffman. Scan the following QR Code or click on this link to download it via Macquarie University.

Steps to download the book:

  1. Click on “Elsevier ScienceDirect Books Complete”.
  2. At ScienceDirect website, click on “Download all chapters” (you may need to authenticate yourself as an MQ student at this stage).

 

## QR Code for textbook

Install Processing

Processing is available for most desktop operating systems. You can’t run it on an iPad or a Chromebook however.

Download and install the processing environment on your own computer. Install the latest stable version (ask on forums if unsure).

Processing Coordinates

When you open Processing an run an empty program you get a pop-up output (Applet), containing a dark grey square region inside it - the display window. By default, Processing display window is of size 100 by 100, which means it’s 100 pixels wide and 100 pixels high. Each pixel is a cell, much like Excel cell.

  • The top-left pixel’s address is at (0, 0) and is known as the origin.
  • The pixel to the right of the origin is at (1, 0).
  • The pixel to the right of (1, 0) is at (2, 0).
  • and so on
  • The pixel below the origin is at (0, 1).
  • The pixel below (0, 1) is at (0, 2).

Exercise:

  • What is the location of a pixel that is a pixels to the right of (x, y)?
  • What is the location of a pixel that is a pixels to the left of (x, y)?
  • What is the location of a pixel that is a pixels above (x, y)?
  • What is the location of a pixel that is a pixels below (x, y)?
Solution
  • a pixels to the right of (x, y): (x+a, y)
  • a pixels to the left of (x, y): (x-a, y)
  • a pixels above (x, y): (x, y-a)
  • a pixels below (x, y): (x, y+a)

Exercise:

  • What is the location of a pixel that is 10 pixels to the right and 30 pixels above (50, 70)?
Solution

(60, 40)

Exercise:

  • What is the location of a pixel that is 10 pixels to the left and 30 pixels above (80, 40)?
Solution

(70, 10)

Exercise:

  • What is the location of a pixel that is 40 pixels to the right and 50 pixels below (10, 40)?
Solution

(50, 90)

Exercise:

  • What is the location of a pixel that is 40 pixels to the right and 50 pixels above (70, 50)?
Solution

(110, 0)

Sample processing programs

Example 1

Once you have done this, copy-and-paste the following code into the processing IDE and hit the run button.

line(0, 0, 100, 100);
line(0, 100, 100, 0);

Do you see any output window and if so, what is the end result? If not, what is the error message, and what do you think needs to be done to fix it?

Solution

You should see an X drawn across a small window. That window is a processing “sketch” that is being drawn in a small window according to your instructions. In this course we will learn how to give processing very complex instructions to make very complex sketches. These sketches are really just computer programs like any other but they are started by the processing IDE and you can inspect what is going on inside them with the debugger.

Example 2

Now, copy-and-paste the following code into the processing IDE and hit the run button.

line(0, 50, 50, 0)
line(50, 100, 100, 50);

Do you see any output window and if so, what is the end result? If not, what is the error message, and what do you think needs to be done to fix it?

Solution

Error message “Syntax error - Missing “;”. To fix it, a semi-colon must be placed at the end of the first instruction.

Here is a short video we recorded to demonstrate downloading and installing Processing, and creating a simple program with a handul of functions.

Here are some more video about basic processing shapes and colors.

How Processing Works

Programmers need to know how the machine they are programming actually work. This is one of your primary tasks early on. You can copy-and-paste some programs, and even make small changes to them, without understanding the underlying machine but you will run out of runway very quickly.

So, what exactly occurs when a processing program is run? The syntax of a Processing program is:

void setup() {
 //code that executes once, at the beginning of the program
}

void draw() {
 //code that executes AFTER setup(), over and over
}

If we think of the process as a conversation between different actors we would see a conversation like this:

Please run this program

I’m checking the program for errors

I’m converting the program to a runnable form

I’m running the code in setup

I’m running the code in draw

I’m displaying the results

I’m running the code in draw

I’m displaying the results

I’m running the code in draw

I’m displaying the results

I’m running the code in draw

I’m displaying the results

… and so on ad-infinitum until

I’m shutting this thing down.

Given the following things have occurred during the execution of a processing program, what do you expect to happen next

  • compiler has checked the program
  • compiler has converted the program
  • setup has run
  • draw has run
solution

The next step is for the result of the draw function to be put on the screen by the operating system/computer.

Which component is responsible for each of the following tasks:

  • convert text to a runnable program
  • work out what occurs in draw
  • put actual pictures on the screen
  • work out what occurs in setup
Solution

The compiler will convert text to a runnable program. Processing will work out what occurs in draw. The computer (or the operating system) will put actual pictures on the screen. Processing will work out what occurs in setup.

Practice programs

These are programs to help you start with simple sketches are work your way up to more complex animation (over the course of the session). Very helpful for incremental learning and assignments.

COMP1000PracticePrograms.zip