Processing Tutorial 3







3d-cartoon-goldfish-set-1-15263189Variables give us the power to vary our programs creatively.


1. Information on Demand


Variables store information (data) that your computer uses in flexible ways.


Variables can quickly create color and motion in your designs.




2. Types of Variables


There are many types of variables that a computer may use depending on the density of the information.


The type of variable must be specified in the program so the computer can actually use it.



Types of Variables Include:

Integer Variables

These are variables that hold whole numbers (no fractions, no decimals).

Example Values: -2,-1,0,1,2,3

The Processing code for declaring an integer variable: “int”

red-dotFloat Variables

These are variables that hold decimal numbers (fractions, not whole numbers). The name “float” comes from thinking of these decimal numbers as having “floating point values.”

Example Values: 4.3, 7.9999, 0.876764, -10.98

The Processing code for declaring a float variable: “float”

red-dotCharacter Variables

These are variables that hold letters, letters are enclosed by single quotes. You may use variable integers to create an interactive program that responds when certain keys are pressed. 

Example Values: ‘c’,’t’,’a’

The Processing code for declaring a character variable: “char”

red-dotBoolean Variables

These are variables that hold the value of either true or false.

Examples (only two options): true, false

The Processing code for declaring a boolean variable: “boolean”


Variables must have:

1.  type

2. name

3. value

…specified for your computer to use them.


–> Exercise 1:

Consider the information you just read above.

Now, in the box below with the 4 colored lines of code, identify for each line:

1. What type of variable is in the line of code?

2. What is the assigned name of the variable?

3. What is the assigned value of the variable?

*Your answers can be written as a //comment in a code file.

**This is not functioning code, this is just an exercise to help you identify parts of variable.




3. Assigning Operations to Variables


When do variables make your designs interesting? 

When they are assigned operations.

Try this bit of code:



The two variables at the top:

…will stay at the values 0 and 100 unless you tell the computer to do something with them.


They are both plugged into the ellipse at the X and Y position (see in your code)

 and at first stay at 0, 100:

red-dotBut, this line of code changes everything! It is called the “assignment operator”.

It is the assignment operator and it tells the computer to do something to circleX every time it cycles through void draw().

What it is the assignment operator telling the computer to do?


–> Exercise 2 (four parts):

A. Change the name of the two variables to something silly and replace them in the code everywhere they are used so that code still works exactly the same (with the new names of your custom variables).

B. Identify with a code comment// which line of code is the assignment operator.

C. Explain how the assignment operator changes the value of the first variable as it loops through draw() in a code comment.

D. Add a second assignment operator in your draw() code under the first assignment operator but change this one that it does something different using your second variable to alter the sketch.   


–> Exercise 3:

Move one or both of the above variables into the two argument positions of the ellipse so that the circle grows evenly in size. You may also need to change the start position or assignment operators of the ellipse. There are many possible options to solve this problem. The key is to start your circle in the middle of the screen and then grow it evenly using variables.


–> Exercise 4:

Now, change the assignment operation so that the circle grows faster.


–> Exercise 5:

Now change one line of code so that the circle follows the mouse as it grows.


–> Exercise 6:

Now we will test multiple custom variables at once.

Enter the following code:


A. What are the assignment operators?

Show where they are as //comments in your code?


B. Now run the code and compare the code with the design window.

Give a detailed explanation as to what is changing based on your variables and assignment operators.
Put this explanation in your //comments.  


C. Why might you use a float variable instead of an integer variable?

Test the differences and explain why in your code //comments.



–> Exercise 7:

First, code the 4 pink circles on a 200×200 sized canvas:


Second, using variables, the setup() function, the draw() function, and an assignment operator so that you change the position of the circles and move them from left to right.

You will only need one variable and one assignment operator to achieve this result.



Hang in there!

If you are having a hard time then click here to see the answer but then work backwards to see why this solution works.


–> Exercise 8

Code these three inner gray rectangles inside a 200×200 sized canvas on white background.


Next, play around with these 3 squares using custom variables and assignment operators to make something new.

Change their colors and positions, then add motion. Use more than one variable and assignment operator.

Play around, be creative.



More Println() Uses

You already know the command println()

In Tutorial 2, you used it to help you understand the coordinates of the mouse with mouseX and mouseY:

You can also use println() to give information about any custom variable.

This will help you debug your code!


In the following program, the ellipse() is supposed to be visible and moving across the X axis with the variable “cat” —


So, we use the println() function to show what is happening with the variable “cat”

“cat” is a a negative number going down, so it is starting off screen and moving left – that is why you can’t see it!

This example may seem simple but using println() to figure out what your variables are doing will be very useful later!


Exercise 9:

Write a program with one ellipse that has two animated changes using two custom variables and two assignment operators.

Add a println() command that shows what happens to your two custom variables when things change.


–> Exercise 10 (Review):

Try this bit of code:


In the above code, how do the system variables (width and height) instruct the position and size of the circle? How does the math work?


–> Exercise 10:

Now transform the above code so that there are two crossing lines.

Draw the two lines by using the system variables width() and height() in their code.



7. Randomizing Your Variables

Now, we can play with the code to get unexpected results. 

To achieve surprises in our designs, we will add into our tool box a new function called random().


Try this bit of code:

blue-dot Exciting?




Now, try this bit of code (warning: flickering lights!):


More interesting?


So, what is going on here? 

The random() function mashed up the ellipse variables to create multiple variations in size, color and transparency.




In the second code example, what gives the variables (r,g,b,a, diam, x and y) their values?


–> Exercise 11:

Do some tests in the code program of your choice and figure out exactly how random() works.  Write as comments in your code an explanation that teaches/explains how to use random() in detail including what arguments to specify in the random() command.


8. Controlling Random Options Explained


How does the random() function pick a number?


The random() function needs arguments in order to work.

It is not enough to say, “give me a random number,” you must specify the range that your random number will come from.


            Standard Language Example:

            “Give me a number between 1 and 20.”

            Code Translation:     

            random (1,20);


If you write only one argument in the random() function then it will assume that you mean a number between zero and that number.

         Code Example:

         random (12)


         Give me a number between 0 and 12.


It is important to note that random only works with floats.

This means that there is a very large range of possibilities that could happen in your random() function number selection. 

A function of random (1,100) could produce almost infinite possibilities for the number it generates.

It might be 1 or 1.1 or 1.2 or 1.3…all the way to the numbers like 99.9 and 99.91…and so on.



Bonus Information:

What if you don’t want that many possible values from your random() function? 

What if you only want random integers (whole numbers) generated?


Answer: To change the final value, you must use the rules of syntax to convert floats into integers.

This is called “casting.” 


Here’s an example of how you could declare a random variable and specify that all results must become integers:

int y = int (random(1,100));

In this example, the random function is generated as a float & then converted (by way of parenthesis) to an integer.



Make a brand new animated world – landscape, science fiction, art portrait, cartoon world, game styled place, etc. Think creatively! Create it so that has motion, visual changes and interactivity using your own custom variables, mouseX, mouseY and other concepts you have learned from the tutorials 1-3 or the beyond.


* Minimum 8 Animations/Changes (at least 3 must be user interactive using MouseX or MouseY, the remaining 5 must use 5 different custom variables (int, float, etc) as learned in this Tutorial 3 ).

* MUST NOT BE A RANDOM DESIGN. IT MUST BE A PLACE THAT IS VISUALLY DESIGNED WELL.  Aesthetic design choices matter! Kick it up a notch: consider perspective, how a light source works, and use color with intention!

* WANT TO USE CUSTOM PHOTOS? –> Download these Processing code examples to load and animate photographs. IMPORTANT: Please note that you will have to analyze the code in this download example to see how things work. In addition to writing the code for loading images you will also have to add your photos to your Processing program’s folder.

To do this, go here:





You just finished a large chunk of important computer coding basics. Now you have functions, variables and assignment operators in your tool box. 


Let the examples on this page and in previous sections be your reference/roadmap.


It is strategic to move through these exercises slowly and steadily so that you lock in your skills. 


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:


Incrementing Variables

Using Random 


Also, variables are explained here in another way by Jose Sanchez of the Plethora Project.



Bonus Variables (& assignment operators) Review Workout Exercises 

Please refer back to all exercises and videos in tutorials 1-3, especially tutorial 3 to solve the following exercises.
1) Use 1 custom variable to make an ellipse that grows only in width from the center of screen.
2) Use 1 custom variable to make a rectangle that grows only in height and that changes color.
3) Use a custom variable to make an ellipse that starts out transparent and then becomes opaque blue.
4) Use 2 custom variables to make a line that grows horizontally from the center in both directions.
5) Use 4 custom variables to make a line that grows in both directions diagonally.


Link: Variable Exercises Answers


Bibliography / Further Resources:
Learning Processing by Daniel Shiffman
(This book informed this curriculum and is highly recommended.)