Interaction Design WikiCreative Coding

Conditionals (en)

deutsche Version

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 logic (remember the logic gates exercise?) . We use logical operations in everyday life, here are some examples:

In a programming language the spelling is different but the logic behind it remains the same.


In code it looks like this:

int x = 10;
if(x == 10)
{
   println("x is the same as 10");
}
else
{
   println("x is not the same as 10");
}


The code can almost be read out as intelligible language: If x is 10, write "x is equal to 10", if not then write "x is not equal to 10".

The syntax of a condition is always:

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 style:

int x=10;
 
// Conditional without brackets 
// the conditional will run until the next semicolon
if(x == 10)
println("x ist gleich 10");
 

If the first condition is false, we can test new condition with else if. We can keep doing this indefinitely.

int x=10;
  
// Here is a conditional with multiple cases
// pay attention to the use of 'else if'
if(x == 10) {
	println("x is the same as 10");
} else if(x == 9) {
	println("x is the same as 9");
} else if(x == 8) {
	println("x is the same as 8");
} else {
	println("x is not 10,9 or 8");
}


For the multiple alternative cases, there is also the switch statement:

int x=10;
switch(x)
{
case 10:
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;

Exercise 5

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 5: 

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;
  }
}