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.

   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.

   → Beispiel

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

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

Arbeitsauftrag

Die Geschwindigkeit, in der draw() aufgerufen wird, kann durch den Befehl frameRate() verändert werden.