p5js Kurs: Lektion 4: Bedingungen

27. April 2021

|In p5js, p5js Kurs 2021

Beispielprogramme dieser Lektion

1. Das Beispielprogramm „Links und Rechts“

Wenn Du den Mauszeiger über das Programmfenster bewegst, siehst Du den Text „Links“, wenn der Mauszeiger in der linken Hälfte des Programmfensters steht, sonst „Rechts“.

Programm im Editor öffnen

▽ Code

function setup() {
  createCanvas(300, 300);
}

function draw() {
  background(171, 130, 255);
  fill(0);
  textAlign(CENTER);
  textSize(30);
  
  if (mouseX < width / 2) {
    text("Links", mouseX, mouseY);
  } else {
    text("Rechts", mouseX, mouseY);
  }
}

Zeile 8 und 9: Setzt Eigenschaften der Schrift

Zeile 11: Wenn die Maus auf der linken Seite des Programmfensters steht (mouseX < width / 2, also kleiner als die Hälfte der Breite):
Zeile 12: Schreibe „Links“ an die Position des Mauszeigers

Zeile 14: Wenn die Bedingung aus Zeile 11 nicht erfüllt ist: Schreibe „Rechts“ an die Position des Mauszeigers

Übungsaufgaben

1.1 Wenn der Mauszeiger links ist, soll die Hintergrundfarbe weiß sein, und die Schriftfarbe schwarz. Wenn der Mauszeiger rechts ist, soll es umgekehrt sein. Nimm gerne auch andere Farbkombinationen!
1.2 Schreibe eine Variante des Programms, bei dem nicht zwischen links und rechts, sondern zwischen oben und unten unterschieden wird.

▽ Lösung 1.2

function setup() {
  createCanvas(300, 300);
}
 
function draw() {
  background(171, 130, 255);
  fill(0);
  textAlign(CENTER);
  textSize(30);
   
  if (mouseX < width / 2) {
    background(0);
    fill(255);
    text("Links", mouseX, mouseY);
  } else {
    background(255);
    fill(0);
    text("Rechts", mouseX, mouseY);
  }
}

▽ Lösung 1.2

function setup() {
  createCanvas(300, 300);
}
 
function draw() {
  background(171, 130, 255);
  fill(0);
  textAlign(CENTER);
  textSize(30);
   
  if (mouseY < height / 2) {
    text("Oben", mouseX, mouseY);
  } else {
    text("Unten", mouseX, mouseY);
  }
}

2. Das Beispielprogramm „Mouse Over“

Schritt 1

Programm im Editor öffnen

▽ Code

let xPos, breite;

function setup() {
  createCanvas(300, 300);
  xPos = width / 3;
  breite = 100
}

function draw() {
  background(255, 215, 0);
  
  if (mouseX > xPos &&
      mouseX < xPos + breite) {
    fill(255, 0, 0);
  } else {
    fill(255);
  }
  
  rect(xPos, 0, breite, height);
}

Zeile 1: xPos und breite stehen für die linke Seite und die Breite des senkrechten Bandes
Zeilen 5 und 6: Die Eigenschaften des Bandes werden festgelegt

Zeilen 12 und 13: Wenn der Mauszeiger innerhalb des Bandes ist:
Zeile 14: setze die Füllfarbe rot
Zeile 16: Wenn die Bedingung aus Zeile 12-15 nicht erfüllt ist: Setze die Füllfarbe weiß

Zeile 22: Zeichne das Band

Schritt 2

Programm im Editor öffnen

▽ Code

let yPos, hoehe;

function setup() {
  createCanvas(300, 300);
  yPos = height / 3;
  hoehe = 100
}

function draw() {
  background(255, 215, 0);
  
  if (mouseY > yPos &&
      mouseY < yPos + hoehe) {
    fill(255, 0, 0);
  } else {
    fill(255);
  }
  
  rect(0, yPos, width, hoehe);
}

Zeile 1: xPos und hoehe stehen für die linke Seite und die Breite des waagerechten Bandes
Zeilen 5 und 6: Die Eigenschaften des Bandes werden festgelegt

Zeile 22: Zeichne das Band

Schritt 3

Programm im Editor öffnen

▽ Code

let xPos, yPos, seitenlaenge;

function setup() {
  createCanvas(300, 300);
  xPos = width / 3;
  yPos = height / 3;
  seitenlaenge = 100
}

function draw() {
  background(255, 215, 0);
  
  if (mouseX > xPos &&
      mouseX < xPos + seitenlaenge &&
      mouseY > yPos &&
      mouseY < yPos + seitenlaenge) {
    fill(255, 0, 0);
  } else {
    fill(255);
  }
  
  rect(xPos, yPos, seitenlaenge);
}

Zeile 1: xPos, yPos und seitenlaenge stehen für die Koordinaten der oberen linken Ecke des Quadrates und dessen Seitenlänge
Zeilen 5-7: Die Eigenschaften des Quadrates werden festgelegt

Zeilen 13-16: Wenn der Mauszeiger innerhalb des Quadrates ist:
Zeile 17: setze die Füllfarbe rot
Zeile 18: Wenn die Bedingung aus Zeile 12-15 nicht erfüllt ist: Setze die Füllfarbe weiß

Zeile 22: Zeichnet das Quadrat

Übungsaufgaben

2.1 Sorge dafür, dass auch die Hintergrundfarbe sich ändert, wenn die Maus im Quadrat ist.

▽ Lösung 2.1

let xPos, yPos, seitenlaenge;
 
function setup() {
  createCanvas(300, 300);
  xPos = width / 3;
  yPos = height / 3;
  seitenlaenge = 100
}
 
function draw() {
   
  if (mouseX > xPos &&
      mouseX < xPos + seitenlaenge &&
      mouseY > yPos &&
      mouseY < yPos + seitenlaenge) {
    background(255, 215, 0);
    fill(255, 0, 0);
  } else {
    background(255, 100, 0);
    fill(255);
  }
   
  rect(xPos, yPos, seitenlaenge);
}

3. Das Beispielprogramm „Treffer zählen“

Wenn das Programm startet, dann ist der Punktestand 0. Jedes Mal, wenn Du in das Quadrat klickst, dann erhöht sich der Punktestand um 1.

Programm im Editor öffnen

▽ Code

let xPos, yPos, seitenlaenge;
let punkte;

function setup() {
  createCanvas(300, 300);
  xPos = width / 3;
  yPos = height / 3;
  seitenlaenge = 100;
  punkte = 0;
}

function draw() {
  background(0, 205, 102);
  rect(xPos, yPos, seitenlaenge);
  textAlign(CENTER);
  textSize(20);
  text("Punkte: " + str(punkte), width/2, height-50);
}

function mousePressed() {
  background(0, 205, 102);
  
  if (mouseX > xPos &&
      mouseX < xPos + seitenlaenge &&
      mouseY > yPos &&
      mouseY < yPos + seitenlaenge) {
    punkte = punkte + 1;  
  }
  
}

Zeile 1: xPos, yPos und seitenlaenge stehen für die Koordinaten der oberen linken Ecke des Quadrates und dessen Seitenlänge
Zeile 2: punkte steht für den Punktezähler
Zeilen 7-10: Die Eigenschaften des Quadrates werden festgelegt und der Punktezähler auf 0 gesetzt

Zeile 15: Zeichnet das Quadrat
Zeile 18: Zeichnet die aktuelle Punktezahl

Zeile 21: Bei jedem Drücken der Maustaste:
Zeilen 24-27: Wenn der Mauszeiger innerhalb des Quadrates ist:
Zeile 28: Erhöhe den Punktestand um 1

Übungsaufgaben

3.1 Bestrafe einen Klick außerhalb des Quadrates mit einem Punktabzug.
3.2 a) Sorge dafür, dass nach jedem Klick das Quadrat eine neue, zufällige Position innerhalb des Programmfensters bekommt.
3.2 b) Verbessere die Lösung der letzten Aufgabe: Das Quadrat soll vollständig innerhalb des Programmfensters liegen.

▽ Lösung 3.1

let xPos, yPos, seitenlaenge;
let punkte;
 
function setup() {
  createCanvas(300, 300);
  xPos = width / 3;
  yPos = height / 3;
  seitenlaenge = 100;
  punkte = 0;
}
 
function draw() {
  background(0, 205, 102);
  rect(xPos, yPos, seitenlaenge);
  textAlign(CENTER);
  textSize(20);
  text("Punkte: " + str(punkte), width/2, height-50);
}
 
function mousePressed() {
  background(0, 205, 102);
   
  if (mouseX > xPos &&
      mouseX < xPos + seitenlaenge &&
      mouseY > yPos &&
      mouseY < yPos + seitenlaenge) {
    punkte = punkte + 1;  
  } else {
    punkte = punkte - 1; 
  }
   
}

▽ Lösung 3.2

let xPos, yPos, seitenlaenge;
let punkte;
 
function setup() {
  createCanvas(300, 300);
  xPos = width / 3;
  yPos = height / 3;
  seitenlaenge = 100;
  punkte = 0;
}
 
function draw() {
  background(0, 205, 102);
  rect(xPos, yPos, seitenlaenge);
  textAlign(CENTER);
  textSize(20);
  text("Punkte: " + str(punkte), width/2, height-50);
}
 
function mousePressed() {
  background(0, 205, 102);
   
  if (mouseX > xPos &&
      mouseX < xPos + seitenlaenge &&
      mouseY > yPos &&
      mouseY < yPos + seitenlaenge) {
    punkte = punkte + 1;  
  } else {
    punkte = punkte - 1; 
  }
  
  xPos = random(width);
  yPos = random(height);
   
}

▽ Lösung 3.3

let xPos, yPos, seitenlaenge;
let punkte;
 
function setup() {
  createCanvas(300, 300);
  xPos = width / 3;
  yPos = height / 3;
  seitenlaenge = 100;
  punkte = 0;
}
 
function draw() {
  background(0, 205, 102);
  rect(xPos, yPos, seitenlaenge);
  textAlign(CENTER);
  textSize(20);
  text("Punkte: " + str(punkte), width/2, height-50);
}
 
function mousePressed() {
  background(0, 205, 102);
   
  if (mouseX > xPos &&
      mouseX < xPos + seitenlaenge &&
      mouseY > yPos &&
      mouseY < yPos + seitenlaenge) {
    punkte = punkte + 1;  
  } else {
    punkte = punkte - 1; 
  }
  
  xPos = random(width-seitenlaenge);
  yPos = random(height-seitenlaenge);
   
}

Navigation

Übersicht

Vorherige Lektion

Nächste Lektion

Dieser Kurs wurde entwickelt mit freundlicher Unterstützung und Kooperation in Workshops mit der Lernoase im Freizeitheim Vahrenwald in Hannover.
Alle Materialien stehen unter der Lizenz CC BY-NC-SA 4.0 mit Namensnennung „Pit Noack“.