If and if/else statments

If or If/Else?

If and if/else statements have several uses. This week we will look at how they can be used for super interactive animations. Also, I will add several of my programs as examples.

Since if statements are the basis of if/else statements, we are going to start with those.

The basic format for if statements is:

if(parameter){

code to be done if the parameter is true

};

The code inside the curly brackets will only be run if the parameters are true. For example, you want to make a dance floor program that has 4 rectangles. When you move your mouse over any rectangle, it changes color. This means that you will need parameters for your mouse’s X and Y coordinates. If you want two or more parameters to be true use &&. If only one parameter or part of the parameters need to true use ||, this means or. (The | symbol can be found under your backspace button.) Your code for the dance floor would look something like this:

draw = function() {
fill(130, 126, 130);
rect(0, 0, 200, 200); // top left
rect(200, 0, 200, 200); // top right
rect(0, 200, 200, 200); // bottom left
rect(200, 200, 200, 200); // bottom right

if (mouseX < 200 && mouseY < 200) {
fill(3, 255, 242);
rect(0, 0, 200, 200); // top left
}

if (mouseX > 200 && mouseY < 200) {
fill(244, 252, 0);
rect(200, 0, 200, 200); // top right
}

if(mouseX < 200 && mouseY > 200){
fill(255, 3, 205);
rect(0, 200, 200, 200); // bottom left
}

if(mouseX > 200 && mouseY > 200){
fill(21, 255, 0);
rect(200, 200, 200, 200); // bottom right
}
fill(0,0,0);
ellipse(mouseX, mouseY, 20,20);
};

Each set of parameters check that the mouse is inside one of the 4 quadrants. But what if you have parameters that could be happening at the same time?

This is where the if/else statements come in handy. The first part of the setup is generally the same.

If you only have 2 possibilities it would look like this:

if(first possibility’s parameters){

code that is run if true

}else{

code run if the first possibility isn’t true

};

If you have more possibilities the code would look like this:

if(first possibility’s parameters){

code run if true

}else if(second possibility’s parameter){

code run if true

}else{

code run if the last possibility is true

};

You can have as many else if statements you need. The last possibility can either be an else or an else/if statement. The code that gets run can be text, math, color change, etc. There are no restrictions to that code. The only thing you can’t do is put code in-between any of the if and if/else statements. This breaks the relationship and makes the code one big error message.

Here is an example of a program with if and if/else statements:

background(186, 184, 186);
fill(24, 18, 201);
ellipse(200, 200, 375, 375);
fill(0, 0, 0);
ellipse(200,200,244,244);
fill(0, 225, 255);
textSize(50);
var answer = floor(random(1, 4));
var num = round(answer);
if(num === 1){
text(“Yes”, 194, 215);
}else if(num === 3){
text(“Maybe”, 183,215);
}else if(num === 2){
text(“No”,172,219);
}

Next week we will wrap up the basics of JavaScript with some miscellaneous code that may come in handy.

Leave a Reply

Your email address will not be published. Required fields are marked *