Processing Section 2

Now we want to move our designs! This is how computer programs work…



1. Flow

For interactive programming to work, the code must flow in order.


When you play video games, the software is flowing in a series of events.


 In the start of a video game, users select their characters and this event is called the SET-UP. 

Once the set-up is complete,  the conditions of the game are initialized.


Next, the game starts and as you play the computer assesses the choices you make.


In response to your choices, the computer draws new graphics that shift and vary with your character’s actions.


The cycle continues over and over again. This repetition of flow, action and response works as a loop.

These are the cycles of interactive programming.


Of course, eventually the cycle ends and you die.







To get things moving in our drawings, we will start by using the functions called: setup() and draw().

These are entry level loops.  

Here’s a diagram to illustrate setup() and draw() in action



Code Syntax:

In order to use functions in Processing, we need to write blocks of code. 

Blocks of code are enclosed by curly brackets: { } 

Blocks of code can be nested within blocks of code.




Indentations are used to aid with reading lines of code.

By indenting the lines of code in a complex program, it is easier for our eyes to navigate the many lines of text.



–> Exercise 1:

(save your answer in a text document)

Program the following lines of code, hit run and see what happens when you move your mouse.

Now compare the lines of code with your result in the Sketch window.

Screen shot 2013-07-12 at 11.01.12 AM

Answer the following questions:

1. Explain the color value of the circle. What do the four values control?

2. What did setup () tell the program to do?

3. What did draw() tell the program to do?

4. What do the functions mouseX and mouseY do in this program?


–> Exercise 2:

(save your answer in a text document, use your own words)

Change one line in the code you just programmed by moving the background() from the draw() function into the setup() function.

Your code will now look like this:



Now, considering these two versions of very similar code, explain why there is such a large difference in the two sketches?

Hint: think “loop”


Explanation is here



3. Variations of Functions Using X and Y  Values.

There are many interesting variations you can achieve with the functions: mouseX and mouseY.


–> Exercise 3:

Plug in this code:




Explain why each of the above four shapes vary in size, position and color?

(save your answer in a text document)

Keep in mind the below pixel grid system to help you understand the X and Y variations.




4. Adding New Functions: pmouseX and pmouseY.

In addition to using mouseX and mouseY, another pair of fun functions are:  

pmouseX and pmouseY

PmouseX and PmouseY work with the previous mouse position. 

(Derived from the X and Y coordinates).


–> Exercise 4:

Try the following code and explain what is happening between the pmouse functions and the mouse functions.

(save your answer in a text document)




5. Controlling Parameters through Speed.

Another way to vary functions inside your code and drawings is to play with the speed of your mouse movements. The speed at which something moves is calculated from analyzing how fast an object travels from one point to the next. In Processing, to get a number that represents the speed of your mouse, your first point is mouseX and your second point is PmouseX.

The difference between these two points (expressed as the absolute value) is the speed of your mouse.


Remember absolute value?

The absolute value of 4 is 4.

The absolute value of -4 is still 4.

In Processing, to express the absolute value of something through code, we write: abs()

So, to write code for expressing the speed of your mouse, you would write: abs(mouseX-pmouseX)


–> Exercise 5:

Look up the code in the Processing online reference for the strokeWeight() function (this function sets how thick lines will be drawn in your program). Combine the strokeWeight() function with the above lesson on mouse speed and the example code in exercise 4. Use these three tools to create a drawing program that varies the thickness of your lines with how fast you move your mouse.


Next, set your code so that the color of your lines also vary with your mouse movements.

There are many possible solutions.


Here, you can peek at one possible solution to see a model. But, make sure to play around with the code so that you make a new version.



6. More Function Tools for Your Coding Arsenal

When you click the mouse or type on the keyboard, Processing receives these actions as events.

In the order of operations, after set-up() functions (which happen once) and draw() functions (which continually loop), the event functions come next to tell the program when to execute a specific action.


To program these mouse and keyboard interactive tools use the following: 

mousePressed() and keyPressed()


–> Exercise 6:

Test out this code with your mouse and keyboard.



Explain how the lines of code are working together to make these actions happen with your mouse?



7.  Animation Programming: the frameRate Function



In computer animation, a speed is used to designate how fast images will flash across the screen.

Speed is expressed as: frameRate()


To code an animation, add into your program’s set-up() function the frameRate() function.

Here’s an example:


Since computers run at different speeds,

frameRate() is used to make sure that your sketch is consistent across multiple computers.


A basic standard frame rate to use is frameRate (30). If you do not enter a frameRate() then Processing will automatically default to frameRate (60). 60 frames per second can be tough for some computers to run.


Project Assignment:

1. Return to your landscape code design from Tutorial 1.

OR, start a brand new project that looks like a video game!!!!!



2. Now, (re)design your code to have flow using the 3 functions from above including:

void setup()

void draw()

void keyPressed () or void mousePressed

red-dot3. Set some part of your landscape to follow with your mouse movements.

red-dot 4. Set some aspect of color in your design to change color when the mouse changes location.

red-dot5. Set something in your design to change when the mouse is clicked or computer keys are pressed.

red-dot 6. Make sure to add in comments using //  to help you keep track of your code.


Screen shot 2013-07-11 at 11.57.52 AM

You can see the answer on how the above kitty was made interactive for this assignment.

Try to flesh out as much code as possible before peeking at the kitty model.


The kitty model will show you the solution for this particular design but you will have to adapt the code to your own unique design.

(Most of the kitty’s code probably won’t work for your creature but will serve as reference to how things work).


There are many fun choices you can make so play around with your code.


Take it slow and if you get stuck then rewind and track back line by line.

The goal is deep understanding, not racing to a finish line.


If the above concepts aren’t clicking for you or if you would like a fun review of these coding ideas, then try watching the very animated and informal free video tutorials by NYU professor and Processing champion, Daniel Shiffman.

Screen shot 2013-08-15 at 11.31.22 AM

The videos which reference this webpage:

Flow, Set-up and Draw

Built-in Variables


Using Println()


Screen shot 2013-08-14 at 10.26.55 AM