What we’ve covered so far:
- Variables
- Loops
- Conditionals
- Functions
Variables
- 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
Loops
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
int x = 0; //THE INITIAL CONDITION while(x < 25) { //THE BOOLEAN TEST EXIT STRATEGY 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(){ size(400,400); } void draw(){ background(255); for(int x = 10; x<= width; x+=30){ for(int y = 10; y<= height; y+=30){ fill(0); rect(x,y,20,20); } } }
Conditionals
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
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) { println("collision"); 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.