7: Interaktionen

Vorheriger Schritt

Nächster Schritt

Was du in diesem Schritt lernst

• Auf Mausbewegungen reagieren.
• Auf Mausklicks reagieren.

Interaktionen mit der Maus

Im aktiven Modus sind nun Interaktionen einfach umsetzbar.

Arbeitsauftrag

1. Studiere das folgende Programm, probier es dann aus und erkläre seine Funktionsweise. Welche Bedeutung haben mouseX und mouseY?

   void setup() {
     size(200,200);
   }
   
   void draw() {
     circle(mouseX, mouseY, 20);
   }
   

2. Ergänze den Befehl background(200); in draw() vor circle(). Erkläre die Veränderung des Programms.
3. Verschiebe den background() Befehl hinter circle(). Deckt sich deine Beobachtung mit deiner Vermutung?

Übungsaufgaben

Arbeitsauftrag

1. Programmiere eine Linie, die in einer der vier Ecken beginnt und bis zum Mauszeiger zeigt.

   Klicken, um das Programm zu starten.

2. Programmiere ein "Fadenkreuz": Eine horizontale und eine senkrechte Linie, die sich genau beim Mauszeiger kreuzen.

   Klicken, um das Programm zu starten.

   Tipp: konzentriere dich zunächst auf eine der Linien und überleg dir ihre Start- und Endpunkte.

3. Zeichne ein Rechteck in die Mitte des Fensters, bei dem immer eine Ecke der Maus folgt.

   Klicken, um das Programm zu starten.

   Tipp: Bestimme die Entfernung der Maus auf der x- und y-Achse zum Mittelpunkt der Zeichenfläche. Die Breite / Höhe des Rechtecks ist doppelt so groß.

4. Ein mittig positioniertes Quadrat soll seinen Grauwert ändern, je nachdem, wo sich die Maus befindet. Ist die Maus ganz links, ist das Quadrat schwarz. Ist sie recht, wird das Quadrat weiß.

   Klicken, um das Programm zu starten.

   Tipp: Der Grauwert muss in einem Bereich von 0 bis 255 liegen. In welchem Bereich liegt der Wert der Mausposition? Um die Position auf den Grauwert zu übertragen (man spricht hier auch von Mapping), benötigst du den Dreisatz.

   Achtung: Damit Java korrekt mit Dezimalzahlen rechnet, musst du die Zahlen immer mit einer Nachkommastelle angeben (z.B. 400.0), ansonsten arbeitet Java nur mit Ganzzahlen bei der Division.

   Freiwillige Erweiterung: Kannst du auch ein Quadrat programmieren, dass abhängig von der Mausposition die Farbe ändert?

Lösung Aufgabe 1

void setup() {
  size(400, 400);
}

void draw() {
  background(200);
  line(0, 0, mouseX, mouseY);
}

Lösung Aufgabe 2

void setup() {
  size(400, 400);
}

void draw() {
  background(200);
  strokeWeight(3);
  line(0, mouseY, 400, mouseY);
  line(mouseX, 0, mouseX, 400);
}

Lösung Aufgabe 3

void setup() {
  size(400, 400);
}

void draw() {
  background(200);
  rect(mouseX, mouseY, 2*(200-mouseX), 2*(200-mouseY));
}

Lösung Aufgabe 4

void setup() {
  size(400, 400);
}

void draw() {
  background(200);
  noStroke();
  fill(mouseX/400.0*255.0);
  rect(100, 100, 200, 200);
}

Die letzte Mausposition

Die Schlüsselwörter mouseX und mouseY werden also im Programm immer durch die aktuelle Mausposition ersetzt. Für viele Interaktionen ist es aber hilfreich, die Veränderung der Mausposition zu kennen. Daher gibt es zwei weitere Schlüsselwörter, die durch die letzte Position der Maus ersetzt werden: pmouseX und pmouseY. (das p steht für "previous", also "vorherige".)

Arbeitsauftrag

1. Studiere das folgende Programm und stell eine Vermutung auf, welche Ausgabe es produziert. Probiere das Programm dann aus.

   void setup() {
     strokeWeight(2);
   }
   
   void draw() {
     line(pmouseX, pmouseY, mouseX, mouseY);
   }
   

2. Erstelle ein Programm, bei dem an der aktuellen Mausposition ein kleiner, grüner Kreis gezeichnet wird und an der vorherigen Position ein kleines rotes Rechteck.

   Klicken, um das Programm zu starten.

   Da draw() schnell hintereinander immer wieder ausgeführt wird, sind die Positionen fast identisch. (Versuch die Maus doch mal schnell zu bewegen.) Um einen deutlicheren Effekt zu sehen, ändere setup() so ab:

   void setup() {
     size(400, 400);
     frameRate(12);
   }
   

Auf Mausklicks reagieren

Um auf einen Klick der Maus zu reagieren, muss ein weiterer Programmblock neben setup() und draw() eingefügt werden:

void setup() {

}

void draw() {

}

void mousePressed() {
	
}

Zusammen mit den Mauspositionen von oben kannst du so schon richtig viel Interaktion in dein Programm einbauen:

void setup() {
	size(400, 400);
}

void draw() {
	// Nichts
}

void mousePressed() {
	fill(0);
	circle(mouseX, mouseY, 10);
}

Arbeitsauftrag

1. Probier das Programm aus.
2. Modifiziere das Programm so, dass statt Kreisen eine andere Figur "gestempelt" wird.
3. Schreibe ein Programm, dass den Bildschirm rot färbt, sobald die Maus geklickt wird.
4. Schreibe ein Programm, bei dem zunächst ein Kreis in der Mitte zu sehen ist. Sobald eine Maustaste gedrückt wird, wird der Kreis gelöscht.

   Tipp: Denk daran, dass "löschen" bisher immer "mit einer anderen Farbe übermalen" bedeutet hat.

Lösung Aufgabe 3

void setup() {
  size(400, 400);
}

void draw() {
  // Nichts
}

void mousePressed() {
  background(255, 0, 0);
}

Lösung Aufgabe 4

void setup() {
  size(400, 400);
  fill(0);
  circle(200, 200, 100);
}

void draw() {
  // Nichts
}

void mousePressed() {
  background(200);
}

Zusatzaufgabe

Die Geschwindigkeit, in der draw() aufgerufen wird, kann durch den Befehl frameRate() verändert werden. Dabei wird die Anzahl der Aufrufe pro Sekunde als Eingabe übergeben. frameRate(1); bedeutet also, dass draw() einmal pro Sekunde ausgeführt wird.

1. Schreibe eine "Uhr", die zu Beginn einmal "Start" ausgibt und dann jede Sekunde einmal "Tick". (Nutze den println() Befehl dafür.)
2. Schreibe ein Programm, das zweimal pro Sekunde die aktuelle X-Position der Maus ausgibt.

Sprinteraufgabe

Nimm dir noch einmal eines deiner Bilder aus dem letzten Schritt vor. Erweitere es um interaktive Elemente. Hier sind einige Ideen:

• Lass die Sonne oder ein Fahrzeug dem Mauszeiger folgen.
• "Stempele" bei einem Mausklick Äpfel in den Apfelbaum.
• Programmiere die Maus so, dass sie den Boden weiß übermalt und aus einer Sommer- eine Winterlandschaft macht.

Klicken, um das Programm zu starten.