9.2 – Review!

What we’ve covered so far:

  • Variables
  • Loops
  • Conditionals
  • Functions


  • A variable is a placeholder for a value (think of it like a bucket). You declare what it is, assign it a value, carry it around with you throughout your code and use it when you need to.
  • The power of variable comes when we change (vary) them.
  • First you declare a variable, then you initialize it with a value, then use that variable in one or more place in your code, and finally you’re free to update that variable with a new value and it will change everywhere.

Declaring variables

Variables have a type. Some examples are:

  • int – whole number
  • float- decimal number
  • boolean- true/false
  • char – character
  • string – a series of characters


The WHILE loop requires three steps

  • An initial condition
  • A while loop that stops at some point based on a boolean question
  • A loop operation
rect(x, 100,100,100);
x = x + 1; //THE INCREMENT

A FOR loop condenses the initial condition, boolean test, and iteration into one line of code:

for(int x = 0; x < 25; x++){
rect(x, 100,100,100);

int x = 0 declares a local variable x and sets its initial condition (it is common to use the name “i” as your variable when writing FOR loops)
x < 25 is the boolean test
x++ is the increment

For loops are handy because unlike the while loop, you don’t need to reset your x variable at the top of the draw loop. You’re using a local variable that is reset when it’s declared inside of the for loop (it’s like making a new variable everytime we loop through draw).

We can nest for loops (very helpful when drawing rows and columns):

void setup(){

void draw(){
for(int x = 10; x<= width; x+=30){
    for(int y = 10; y<= height; y+=30){



Important syntax distinctions!

== (asks is it equal to?)
= assigns a value

This is NOT going to work!

if(key = '1'){
//do something

You can ask multiple questions. Separate with an “and” or an “or”, but each section has to be a complete logical statement:

if(key == '1' || x < 50 && y > 100 ){
//do something

The full list of questions you can ask about numbers:

  • < less than
  • > greater than
  • == equal to (**note 2 equal signs)
  • <= less than or equal
  • >= greater than or equal
  • != not equal


Functions are a means of taking the parts of our program and separating them out into modular pieces, making our code easier to read, debug, revise, and most importantly, reuse!

Creating a user-defined function in 3 easy parts

  • A return type
  • Function name
  • Arguments

It looks like this

returnType functionName(arguments){

//code to run



Return types can be either void, or any of the data types we commonly see when we make a variable:

  • int
  • float
  • boolean 

Whenever you specifiy a return type other than void, you need a return statement. When you call this function, it will return a piece of information to you of the same data type as your return type.

An example of a function that returns something is collision testing. We would want the function to return “true” if two shapes are touching, and “false” if they’re not. Collision testing can get real complicated, real fast, so let’s look at a very simple example that’s testing if a ball is colliding with a paddle (like in Pong).

First we need to test if the right side of the ball (ballx + ballw) is touching the left side of the paddle (paddlex): ballx + ballw > paddlex

We also need to test if the bottom of the ball  (bally + ballh) is more than the top of the paddle (paddley):  bally + ballh > paddley

But, the top of the ball (bally) also has to be less than the bottom of the paddle (paddley + paddleh): bally < paddley + paddleh

If we put it all together:

if (ballx + ballw > paddlex && bally > paddley && bally < paddley + paddleh)

When we write a function, we want to abstract this to work with any shape. We can rewrite this as:

if (x1 + w1 > x2 && y1 > y2 && y1 < y2 + h2)

Now we just need to pass in these arguments into our function:

boolean collision(int x1, int y1, int w1, int h1, int x2, int y2, int w2, int h2) {
  if (x1 + w1 > x2 && y1 > y2 && y1 < y2 + h2) {
    return true;
  else {
    return false;

And we call is like so:

collision(ballx, bally, ballw, ballh, rectx, recty, rectw, recth)

Collision will return either true or false. We need to do something with that information. We can either set it equal to a variable, or we can use it in a boolean test:

if (collision(ballx, bally, ballw, ballh, rectx, recty, rectw, recth)) {
speed = speed * -1;

Download the whole example here.

Leave a Reply

Your email address will not be published.