Pseudocode

Wenn sich der Cursor im 1. Drittel des Sketches befindet, soll eine rote Hintergrundfarbe verwendet werden. Im 2. Drittel soll der Hintergrund blau werden, ansonsten soll der Sketch einen grünen Hintergrund haben.

P5

function setup() {
  createCanvas(960, 240);
  textFont("Georgia");
  textSize(30);
  fill(255);
  stroke(0);
}

function draw(){

  if (mouseX < width/3) { // Cursor im linken Drittel

    background(255, 0, 0);
    text("1. Drittel", 10, height-40, width-10, 60);

  } else if (mouseX < (width/3)*2) { // Cursor im mittleren Drittel

    background(0, 0, 255);
    text("2. Drittel", width/3 + 10, height-40, width/3, 60);

  } else { // Cursor im rechten Drittel; muss hier nicht explizit angegeben werden (kann man aber…)

    background(0, 255, 0);
    text("3. Drittel", (width/3)*2 + 10, height-40, width/3, 60);

  }

  // Strich beim 1. Drittel des Sketches
  line(width/3, 0, width/3, height);

  // Strich beim 2. Drittel des Sketches
  line((width/3)*2, 0, (width/3)*2, height);
}

Achtet darauf, dass Ihr bei if/then keine Klammern vergesst – sonst funktioniert es nicht!

P5

function draw() {

  if (1. Bedingung) {
    // dann soll das passieren
  } else if (2. Bedingung) {
    // dann soll das passieren
  } else {
    // ansonsten – wenn beide oberen Bedinungen nicht zutreffen
  }

}

Ihr könnt beliebig viele else if einbauen und somit sehr viele Bedingungen abfragen!

Wenn es sehr viele unterschiedliche Bedingungen gibt, ist switch() übersichtlicher – schaut Euch dies mal an!