It is called software because it can can change.  The code you wrote last week couldn’t change.  Media gets increasingly powerful as it becomes increasingly changeable.   Video is a softer ware than film but is still pretty unmoveable.   Video is not a good medium capturing spatial visual dance and drama in a changeable way because its elements (pixels) cannot be easily rearranged into new meanings.  We will change all that in the few  weeks using the kinect camera which captures the structure of the scene in addition to the color of the scene.  For instance this camera can know the location of your limbs, not just their color.  You can decide how this new changeable and responsive medium is going to interesting in your work.

Here is the video versions of all of the material on this page.  You could also find it in chapters  4 and 5 of the book “Getting Started with p5.js”

Paragraphs (aka functions)  

Last week you wrote code like ordinary prose and the machine read it from top to bottom.  The is old style.  The great advantages of software is that it can have a non linear flow that repeats, that get redirected by if statements, and can be rewritten using variables.

The first step in having a changeable flow is to chunk our code into something like paragraphs that can be rearranged.  These code blocks are created by surrounding the lines of code with curly brackets “{ }”.   But we need to be able to call those blocks by name so we give them labels or names and thus “functions” are born.  (You will see that you have to put the word function before the function name and empty parenthesis ( )  after.  Later these parenthesis will be use for the function to send back or take in extra info but for now just put those in by rote.  The hardest part of this is making sure you have the right about of curly brackets facing the right way.

The two most famous functions in Processing are named “setup” and “draw.”

Naming the functions is not enough.  To get them to actually happen someone has to  call those function names.  You will do your own calling later but setup and draw are famous because p5 calls them for you.  It calls setup at the very beginning after you press the play button and calls  draw repeatedly so that code happens over and over.  It so happens that I put setup at the top of the page but it would have happened first because p5 called it first.  This means we are released from tyranny of things happening in the order they were written down the page.  This enables nonlinearity which is HUGE.  Also because draw is called over and over you have your first loop.   It is called the main loop of your program.  This allows your program to have an ongoing life that could outlive you.


While the draw loop allows your program to have a future, you need variables (or if statements) for that future to be any different from the past.  The program above will just keep drawing a circle in the sample place over and over.  But in the program below we are using a variable that Processing provides called mouseX which contains the location horizontal location of the mouse.  Try it and see how the the circle follows your mouse.  How would you get this circle to follow in the vertical dimension as well?  You have made a paint program and some movable media!

This variable is provided by the machine to reflect your movements.  This is the idea of IA (intelligence amplification).  The machine is just a prothesis,  extension,  or application of your expression.  Another strain of computation is about AI (artificial intelligence) where the program changes itself.  For that you need to create your own variables.  There are three steps to this:

  1. Declare the variable.  Use the keyword var  and then a name for your variable.  You usually do this at the very top of your program.
  2. Initialize the variable.  Put some initial value into it.  This is usually done in setup but can sometime be done at the same time you declare it at the top.
  3. Vary the variable.  You have to change it for to make any difference.
  4. Use the variable.  Change the way you call some function so things change along with variable.

Figuring out how to employ variables takes some getting used to.  It requires standing back and asking what in your program should change.  How would you get the color of the circle to go up and down.  What would be changing in that case?  What variable would you make and where would you insert it?

In a performance some people like IA variables like the mouseX which have more obvious linkage back to the person’s movements.  Other people find that to be too linear and prefer some AI with the machine to be adding interest by using variables and your programming with sounds and images changing on their own.  The dance between those two approaches  is a matter of taste.

If Statements

If statements are pretty easy to understand.  In some ways giving the machine some smarts feels like just giving it a bunch of rules to live by.  The hardest thing about if statements is usually getting the syntax right.

Again we will see the curly brackets of a code block like a function but these will be nested inside a function.  Before the code block there is  the word if followed by a statement that resolves to true or false in parenthesis.  Inside those parenthesis are things like “mouseX > 255”  “circleLoc == 0”   Notice that you have to use double equals == when comparing things as opposed to the single equals = when we assign a value to a variable in the previous code. Same word “equals” in english, two different jobs and thus symbols in programming.

More Useful Functions and Stuff

You have already used drawing functions like fill, ellipse, rect etc.  Here is the entire list of more stuff you can say in p5 (if you keep going you can learn to make your own functions). I just want to highlight a few more for now:

  1. random() which gives you a random number
  2. dist() which gives you distance between two points.
  3. println() shows what is inside variables in the black box below your code.  Your best friend in debugging.
  4. map() does math to convert one range of numbers into another range
  5. width and height are variables not functions but useful for knowing how big your screen is.
  6. // These two slashes  at the beginning of a line are neither a function or a variable but I thought I should mention them because they create a comment, a line that is not treated as code.  The kind of disable or hide that line from the machine.