Bienen

Maus-Interaktion

Im folgenden Beispiel soll der Text 'angeklickt' angezeigt werden, wenn man mit der Maus einen Kreis anklickt und es soll der Text 'nicht angeklickt' angezeigt werden, wenn man mit der Maus ausserhalb des Kreises auf den Zeichenbereich klickt.

Dazu legt man eine Variable textInhalt fest, die am Anfang noch keinen Text speichern soll.

var textInhalt = '';

Der Text soll schwarz ausgegeben werden, er soll 25 Pixel groß sein und er soll an der angegebenen Koordinate links ausgerichtet sein. Das erreicht man mit folgender Sequenz:

fill('Black');
textSize(25);
textAlign(LEFT);
text(textInhalt, 20, 30);

Unser Programmiersystem p5.js erkennt automatisch, wenn man eine Maustaste gedrückt hat. Sobald man eine Taste gedrückt hat, wird die Funktion mousePressed() aufgerufen und die Anweisungen in dieser Funktion ausgeführt:

function mousePressed() {
  Anweisungen...
}

In diesem Programm soll der Text geändert werden, je nachdem ob man innerhalb oder ausserhalb des Kreises die Zeichenfläche anklickt. Den Abstand zwischen zwei Punkten kann man wie folgt berechnen:

dist(200, 200, mouseX, mouseY) 

Diese Anweisung liefert den Abstand zwischen den Punkten P(200/200) und Q(mouseX/mouseY), wobei mouseX die aktuelle x-Koordinate der Maus ist und mouseY die aktuelle y-Koordinate der Maus ist.

Die Abfrage wird in folgendem Ablaufdiagramm verdeutlicht:

Die Funktion, mit der festgestellt wird ob der Kreis angeklickt wurde, sieht wie folgt aus:

function mousePressed() {
  if (dist(200, 200, mouseX, mouseY) < 50) {
    textInhalt = 'angeklickt';
  }
  else {
    textInhalt = 'nicht angeklickt';
  }
}

Blume

Für die Blumenwiese benötigen wir ein Blume. Diese kann z.B. mit folgender Sequenz entworfen werden:

strokeWeight(0);
fill('LightCoral');
ellipse(230, 200, 40, 40);
ellipse(170, 200, 40, 40);
ellipse(200, 230, 40, 40);
ellipse(200, 170, 40, 40);
fill('DarkRed');
ellipse(200, 200, 35, 35); 

Innerhalb von draw() wird es langsam unübersichtlich. Eleganter ist es, wenn man die Sequenz für die Blume in eine eigene Funktion schreibt und dann innerhalb von draw() diese Funktion aufruft.

Mit function blume() legt man eine neue Anweisung fest, die mit blume(); aufgerufen werden kann.

function blume() {
  fill('LightCoral');
  ellipse(230, 200, 40, 40);
  ellipse(170, 200, 40, 40);
  ellipse(200, 230, 40, 40);
  ellipse(200, 170, 40, 40);
  fill('DarkRed');
  ellipse(200, 200, 35, 35);  
}

Innerhalb von draw() kann die Blume gezeichnet werden, indem man die Anweisung blume(); schreibt.

Biene

Jetzt sollte noch eine Biene durch die Gegend fliegen. Die Biene soll dabei dem Mauszeiger folgen. Das schafft man mit folgendem kleinen Trick:

Man ruft die Funktion biene() auf, aber übergibt der Funktion zusätzlich noch die Koordinaten der Maus:

biene(mouseX, mouseY);

Die Funktion biene() könnte dann wie folgt aussehen:

function biene(biene_x, biene_y) {
  strokeWeight(0);
  fill('Black');
  ellipse(biene_x, biene_y, 10, 20);
  fill('Yellow');
  ellipse(biene_x, biene_y+15, 15, 25);
  fill('Black');
  ellipse(biene_x, biene_y+25, 15, 25);  
  fill('GhostWhite');
  ellipse(biene_x-17, biene_y+15, 35, 18);
  ellipse(biene_x+17, biene_y+15, 35, 18); 
}

Dadurch, dass alle 1/50 Sekunden die Mauskoordinaten an die Funktion biene() weitergegeben werden und die Biene neu gezeichnet wird, erscheint es so, als würde die Biene über den Zeichenbereich fliegen.

Zufallsblume

Damit ein kleines Spiel entsteht, soll die Blume zufällig auf die Wiese gesetzt werden, so dass man sich beim Treffen der Blume anstrengen muss.

Die Koordinaten der Blume erzeugt man mit unserer random()-Anweisung, durch die Zufallszahlen erzeugt werden. Zuerst werden Variablen für die Koordinaten der Blume eingeführt:

var x_wert;
var y_wert;

Zufallszahlen zwischen 50 und 450 werden mit folgenden Anweisungen erzeugt:

x_wert = random(50,450);
y_wert = random(50,450);

Der Funktion blume() werden dann die zufälligen Koordinaten übergeben:

blume(x_wert, y_wert);

In der Funktion blume() werden dann die Koordinaten mit Variablen ersetzt:

function blume(blume_x, blume_y) {
  strokeWeight(0);
  delta_bluete = 30;
  fill('LightCoral');
  ellipse(blume_x+delta_bluete, blume_y, 40, 40);
  ellipse(blume_x-delta_bluete, blume_y, 40, 40);
  ellipse(blume_x, blume_y+delta_bluete, 40, 40);
  ellipse(blume_x, blume_y-delta_bluete, 40, 40);
  fill('DarkRed');
  ellipse(blume_x, blume_y, 35, 35);  
}

Damit erscheint die Blume zufällig auf der Wiese:

STOP!!! Die Blume bewegt sich viel zu schnell, so hat man keine Chance sie zu treffen. Wir müssen die Änderung der Koordinate verlangsamen. Das geht mit einem mathematischen Trick:

if (frameCount%40 == 0) {
    x_wert = random(50,450);
    y_wert = random(50,450);
}

Erklärung:

frameCount%40 bedeutet: teile die Anzahl der Schleifendurchläufe seit dem Start des Programms (= frameCount) durch 40 und gib als Ergebnis den Rest der Rechnung aus.

Beispiele:
452:40 = 11 Rest 12, also ist 450%40 = 12
13:4 = 3 Rest 1, also ist 13%4 = 1
165:50 = 3 Rest 15, also ist 165%50 = 15

if (frameCount%40 == 0) { bedeutet also: wenn der Rest der Division frameCount:40 gleich 0 ist, dann mach folgendes...

Die Anweisungen in dieser Verzweigung werden also nur alle 40 Durchläufe der draw()-Funktion ausgeführt.

Das sieht schon besser aus.

Bienen-Spiel

Im letzten Schritt sollen die Treffer gezählt werden. Dazu legen wir die Variable treffer fest:

var treffer = 0;

Ausgegeben werden als Text jetzt die Treffer:

text('Punkte: ' + treffer, 20, 30);

und die Anzahl der Treffer wird wie folgt verändert:

function mousePressed() {
  if (dist(x_wert, y_wert, mouseX, mouseY) < 20) {
    treffer = treffer + 1;
  }
}

Damit ist unser kleines Spiel fertig.