Conditions in a programming language are instructions that direct the flow of a program. This works a bit like rail traffic: a train travels on a rail until it hits a switch, then the train changes its direction of travel. Conditions, therefore, change the course of a program. But how is the direction actually decided? The answer to this is logical operations based on the Boolean boolean logic (remember the logic gates exercise?).
We use logical operations in everyday life, here are some examples:
- When I'm hungry or thirsty, I go to the kitchen and get something
- If I have enough money and I have time, then I'll make a trip to India
In a p5.js programming language the spelling is different but the logic behind it remains the same.
- equal to ===
- not equal !=
- greater than >
- less than <
- greater than or equal to >=
- less than or equal to <=
- logical And &&
- logical Or ||
In code it looks like this:
| Code Block |
|---|
intvar x = 10; if(x === 10) { printlnprint("x is the same as 10"); } else { printlnprint("x is not the same as 10"); } |
...
| Code Block |
|---|
if([boolean expression])
{
// code that will be executed if the answer is true
}
else
{
// code that will be executed if the answer is false
} |
Of course, there are also some variations of writing styleWith booleans you can include the variable without using the operators:
| Code Block |
|---|
intlet x =10 true; /// Conditional without brackets Testing if a boolean value is "true" if (test) { stroke(0); point(width / 3, i); } // the conditional will run until the next semicolon if(x == 10) println("x ist gleich 10");Testing if a boolean value is "false" // The expression "if(!test)" is equivalent to "if(test == false)" if (!test) { stroke(255); point(width / 4, i); } |
If the first condition is false, we can test new condition with else if. We can keep doing this indefinitely.
| Code Block |
|---|
intconst x=10; // Here is a conditional with multiple cases // pay attention to the use of 'else if' if(x === 10) { printlnprint("x is the same as 10"); } else if(x === 9) { printlnprint("x is the same as 9"); } else if(x === 8) { printlnprint("x is the same as 8"); } else { printlnprint("x is not 10,9 or 8"); } |
...
For the multiple alternative cases, there is also the switch statement:
| Code Block | ||||
|---|---|---|---|---|
| ||||
let mode = 0; function setup() { createCanvas(400, 400); } function draw() { switch (mode) { case 100: println("x is the same as 10"); break; case 9: println("x is the same as 9"); break; case 8: println("x is the same as 8"); break; default: println("x is the same as 10,9 or 8"); break; |
...
background(255);
break;
case 1:
background(25);
break;
case 2:
background(92);
break;
case 3:
background(144);
break;
default:
//
}
//or alternatively using if conditionals
/*
if (mode == 0) {
// ready
}
else if (mode == 1) {
background(25);
}
else if (mode == 2) {
background(92);
}
else if (mode == 3) {
background(144);
}
*/
}
|
Exercise 4
Program a drawing app. The colour can be changed with the buttons '1' - '5'. The left mouse button draws and the right mouse button erases the drawing.
...
A possible solution to exercise 54:
| Code Block | ||
|---|---|---|
| ||
color myColor = color(255, 0, 0);// red by default
void setup()
{
size(600, 600); // def. window size
noStroke();
background(255);
}
void draw()
{
if (mousePressed && mouseButton == LEFT) {
fill(myColor);
ellipse(mouseX, mouseY, 15, 15);
}
if (mousePressed && mouseButton == RIGHT) {
fill(255); // white
ellipse(mouseX, mouseY, 15, 15);
}
}
void keyPressed()
{
switch(key)
{
case '1':
myColor = color(255, 0, 0);// red
break;
case '2':
myColor = color(0, 255, 0);// green
break;
case '3':
myColor = color(0, 0, 255);// blue
break;
case '4':
myColor = color(0, 0, 0);// black
break;
case '5':
myColor = color(255, 255, 0);// yellow
break;
default:
println("wrong key");
break;
}
}
|
...