Lernpfad:Einführung in Processing/7

Vorheriger Schritt

Nächster Schritt

Interaktionen mit der Maus

Im aktiven Modus sind nun Interaktionen sehr leicht umsetzbar.

Datei:Processing 2021 logo.svg

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

Datei:Processing 2021 logo.svg

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.

   → Beispiel

   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.

   → Beispiel

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ß.

   → Beispiel

   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.

Lösung Aufgabe 1

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

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

Lösung Aufgabe 2

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

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

Lösung Aufgabe 3

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

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

Lösung Aufgabe 4

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

function 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 rites Rechteck.

   → Beispiel

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);
}

Datei:Processing 2021 logo.svg

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.

Datei:Processing 2021 logo.svg

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.