Critical Code

If Statement

If statements state that “if something (is equal, less-than, greater-than, true etc.)”, execute the code inside the statement. For instance, in the statement below, if the mouses X position is greater than 400, draw a red rectangle.

function setup() {
  createCanvas(800, 200);
}

function draw() {
  background(0);
  if(mouseX > 400){
      fill(255, 0, 0);
      rectMode(CENTER);
      rect(400, 100, 40, 40);
  }
}

If-Else Statement

If-else statements state that “if something (is equal, less-than, greater-than, true etc.)”, execute the code inside the “if” statement brackets, otherwise, execute the code “else” statement brackets. For instance, in the statement below, if the mouses X position is less than than 50, draw a rectangle, otherwise, draw and ellipse.

function setup(){
    createCanvas(800, 200)
}
function draw(){
    if (mouseX < 50){
        rect(300, 300, 20, 20);
    }else{
        ellipse(300, 300, 20, 20);
    }
}

For-Loop

For statements are a bit more obtuse, but if you follow the initial logic, everything should fall into place. For-loops work by “looping” over a variable, until that variable reaches a certain value. As you can see a for loop is comprised of three initial smaller statements: var i=0; i < 50; i++

Lets break down these statements so that we understand them individually.

We’ll start by defining a variable. Traditionally, this variable is “i”, but ultimately it can be anything you want. Here, we’ll set an integer variable “i” equal to 0. var i=0

The next two statements act much like an “if” statement. Here if “i” is less than 50, then “i++”. What is i++? i++ is a shortened syntax for “add 1 to the value” or i+1. So we’re saying, “if i is less than 50, add 1 to i” i < 50; i++

If we consider the for-loop below, we are starting with the variable “i” equalling zero, and the code inside of the for-loop will be executed every time until “i” is equal to or greater than 50.

So this for-loop will draw an ellipse 50 times. We can use the “i” variable to add some space between each ellipse by adding that i variable times whatever distance we would like (here 40px) and adding it to the x position of the ellipse.

function setup(){
   createCanvas(800, 200);
}
function draw(){
  background(0);
  fill(255, 0, 0);
  for (var i=0; i < 50; i++){
    ellipse(10+i*40, 300, 30, 30);
 }
}

Similarly, we can “nest” for-loops inside of each other to iterate over them multiple times. Here we have two for-loops and we’re iterating over an ellipse with both and shifting each on the x and y position.

function setup(){
    createCanvas(800, 200)
}

function draw(){
 background(0);
 fill(255, 0, 0);
 for (var i=0; i < 50; i++){
    for(var j=0; j < 50; j++){
      ellipse(10+i*40, 0+j*40, 30, 30);
    }
  }
}