Lernpfad:Einführung in Processing/7

Vorheriger Schritt

Nächster Schritt

Interaktionen mit der Maus

Im aktiven Modus sind nun Interaktionen sehr leicht 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: konzentrier 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.

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 Maus-Position? Um die Position auf den Grauwert zu übertragen (man spricht hier auch von Mapping), benötigst Du den Dreisatz.

   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*255);
  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:

   function setup() {
     createCanvas(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.

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.

Arbeitsauftrag

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, dass zweimal pro Sekunde die aktuelle X-Position der Maus ausgibt.