Transition to Processing

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.

Learning Processing: Introduction- Macquarie University Students have access via the library

Install Processing

Processing is available for all 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.

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

line(0,0,width, height);
line(0, height, width, 0);

What is the end result?

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.

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? If we think of the process as a conversation betwen 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 wil 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.

Building up digital data

Computers are made of wires that have a voltage on them. High voltage can be distinguished from low voltage. Like distinguising a a torch that is on from a torch that is off. Everything your computer does is built from these wires.

One wire lets you have two values:

  • off = 0
  • on = 1

Two wires lets you have 4 values

  • off off = 0
  • off on = 1
  • on off = 2
  • on on = 3

We have a short-hand for this

  • 00 = 0
  • 01 = 1
  • 10 = 2
  • 11 = 3

This is called binary representation of numbers, each extra wire doubles the number of values you can represent. Once you get to 8 wires, you can represent 256 separate numbers.

Each wire is called a “bit”, each bundle of 8 bits is called a “byte”.

Your CPU is built around a certain bundle of wires as its default size. Whatever this default bundle size is will be called a “word”. Your 64bit computer has 64 bits in a word. Older 32 bit computers have only 32 bits in a word. Tiny little microcontrollers might work on only 8 bits (a byte) at a time.

The memory the computer uses is broken up in a more complex way in reality, but for our purposes, you should think of memory as a big table of “words”. I.e. a big table of 64 bit chunks.

How many values can you store in 3 bits? How about 5?

Solution

3 bits gets you 8 values (0-7 or 1-8), 5 bits gets you 32 values.

Integer Division

Processing insists that if you divide one integer by another, you should get an integer back as the result. This is simple enough for 4/2 which is 2 but what answer should you get from 4/3? Processing will do integer division as a quotient and remainder just like you did in primary school. / gets you the quotient and the new operation % gets you the remainder:

  • 4/2 = 2
  • 4/3 = 1 because the full answer would be “1 remainder 1”
  • 8/3 = 2 because the full answer would be “2 remainder 2”
  • 7/3 = 2 because the full answer would be “2 remainder 1”
  • 4%3 = 1 because the full answer would be “1 remainder 1”
  • 8%3 = 2 because the full answer would be “2 remainder 2”
  • 7%3 = 1 because the full answer would be “2 remainder 1”

Compute the following expressions according to processing’s rules:

  • 3+5
  • -2*5
  • 12/3
  • 17/5
  • 17/6
  • 12%3
  • 17%5
  • 17%6
  • 12.0/5.0
solutions
  • 3+5 = 8
  • -2*5 = -10
  • 12/3 = 4
  • 17/5 = 3
  • 17/6 = 2
  • 12%3 = 0
  • 17%5 = 2
  • 17%6 = 5
  • 12.0/5.0= 2.4