Lernpfad:Einführung in Processing/7
Interaktionen mit der Maus
Im aktiven Modus sind nun Interaktionen sehr leicht umsetzbar.
- Studiere das folgende Programm, probier es dann aus und erkläre seine Funktionsweise.
void setup() { size(200,200); } void draw() { circle(mouseX, mouseY, 20); }
- Ergänze den Befehl
background(200);
indraw()
vorcircle()
. Erkläre die Veränderung des Programms. - Verschiebe den
background()
Befehl hintercircle()
. Deckt sich deine Beobachtung mit deiner Vermutung?
Übungsaufgaben
- Programmiere eine Linie, die in einer der vier Ecken beginnt und bis zum Mauszeiger zeigt.
- → Beispiel
- 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.
- Zeichne ein Rechteck in die Mitte des Fensters, bei dem immer eine Ecke der Maus folgt.
- → Beispiel
- 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.
function setup() {
size(400, 400);
}
function draw() {
background(200);
line(0,0,mouseX,mouseY);
}
function setup() {
size(400, 400);
}
function draw() {
background(200);
strokeWeight(3);
line(0,mouseY, 400, mouseY);
line(mouseX,0, mouseX, 400);
}
function setup() {
size(400, 400);
}
function draw() {
background(200);
rect(mouseX, mouseY, 2*(200-mouseX), 2*(200-mouseY));
}
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".)
- 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); }
- 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);
}
- Probier das Programm aus.
- Modifiziere das Programm so, dass statt Kreisen eine andere Figur "gestempelt" wird.
- Schreibe ein Programm, dass den Bildschirm rot färbt, sobald die Maus geklickt wird.
- 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.
- Schreibe eine "Uhr", die zu Beginn einmal "Start" ausgibt und dann jede Sekunde einmal "Tick". (Nutze den println() Befehl dafür.)
- Schreibe ein Programm, dass zweimal pro Sekunde die aktuelle X-Position der Maus ausgibt.