Eingeführte Variablen und Befehle: mouseX, mouseY, pmouseX, pmouseY, mousePressed, mouseButton, map(wert, originalWerteBereichStart, originalWerteBereichEnde, neuerWerteBereichStart, neuerWerteBereichEnde), constrain(wert, werteBereichStart, werteBereichEnde)
Die folgenden Beispiele zeigen, wie direkt in der Methode draw() auf die Maus-Eingaben des Benutzers reagiert werden kann.
Die aktuelle Position des Mauszeigers ist als Koordinate (mouseX, mouseY) in den entsprechenden Variablen gespeichert. Diese beiden Variablen werden vor jedem Aufruf von draw() aktualisiert. Die jeweils vorherige Position ist als Koordinate (pmouseX, pmouseY) in den entsprechenden Variablen gespeichert ("p" für "previous").
Das Programm verbindet die vorherige Position der Maus mit der aktuellen Position, und fäbt den Quadranten ein, in dem sich die Maus gerade befindet:
Damit es nicht zu schnell geht, wird die FrameRate auf 10 Bilder / Sekunde runtergesetzt. Zudem wird in draw() jedes Mal die Hintergrundfarbe neu gesetzt, damit die letzte Zeichnung von draw() gelöscht wird.
Source Code: MausBewegungVerfolgen.java
Das Program zeigt zu einem Bild das Originalbild und drei verschiebene Einfärbungen des Bildes, in Abhängigkeit von der Mausposition. Wichtig ist dabei, dass der Farbton im Wertebereich 0..255 liegen muss, auch wenn die Mauskoordinaten im Wertebereich 0..width (Fensterbreite) bzw. 0..height (Fensterhöhe) liegt. Für Umrechnungen von einem Wertebereich in einen anderen stellt Processing die Methode map() zur Verfügung:
map(mouseX, 0, width, 0, 255)
Source Code: MausPositionAlsFarbton.java
Das Programm zeigt, wie die Boole'sche Variable mousePressed anzeigt, ob eine Maustaste gedrückt ist, und wie die int-Variable mouseButton angibt, welche Maustaste gedrückt wurde:
In diesem Beispiel wird der Hintergrund in draw() nicht gelöscht, so dass der Benutzer eine "Zeichnung" machen kann.
Source Code: MausButtonsReagieren.java
Wichtig: Der obige Ansatz, direkt in der Methode draw() auf Mausereignisse zu reagieren, eignet sich nur für einfache Programme, wo nicht unterschieden werden muss zwischen "Maus gedrückt" (und noch nicht wieder losgelassen), "Maus losgelassen" oder "Maus geklickt". Das Programm MausButtonsKlickReagierenzeigt, wie die Methode mouseClicked verwendet werden kann, um nur bei Mausklicks (aber nicht bei gedrückter, bewegter Maus) Kreise zu zeichnen:
Source Code: MausButtonsKlickReagieren.java
Schreiben Sie ein Programm, dass die Pixel im Bereich der Mausposition graufärbt. Wenn eine Maustaste gedrückt wird, sollen die Pixel im Rechteck (mouseX-20, mouseY-20)-(mouseX+20, mouseY+20) grau gefärbt werden:
Am besten schreiben Sie zunächst ein Programm, das nur den Pixel an der aktuellen Mausposition grau färbt. Dann erweitern Sie das Programm, so dass es die Pixel im Rechteck um die Mausposition herum grau färbt.
Wichtig ist dabei, dass Sie das Originalbild unverändert lassen und die Farbveränderung in einem neuen Bild speichern. Je nach Farbveränderung würden Sie sonst, wenn Sie nur auf einem Bild arbeiten, diese bei jedem Mausklick wieder verändern.
Wichtig ist zudem auch, dass Sie für das Lesen und Schreiben von Pixeln immer sicherstellen, dass die (x,y)-Koordinaten der Pixel innerhalb des Bildes liegen – Mauskoordinaten können auch ausserhalb liegen! Eine einfache Möglichkeit ist die Methode constrain(), hier an einem Beispiel illustriert:
int constrainedX = constrain(x, 0, img.width - 1); int constrainedY = constrain(y, 0, img.height - 1);
Die Variable constrainedX wird nie Werte kleiner 0 und nie grösser als img.width-1 werden und somit immer ein gültiger X-Wert im Bild img darstellen.
Source Code-Gerüst für Ihre Lösung: AufgabeBildLokalGraustufen.java
Schreiben Sie ein Programm, dass die aktuelle Mausposition anzeigt, wobei zum Beispiel die Grösse eines Kreises oder seine Füllfarbe oder Rahmenfarbe oder Strichgrösse von der Mausgeschwindigkeit abhängen:
Für die Geschwindigkeit der brauchen Sie die aktuelle Position der Maus (mouseX, mouseY) sowie die vorherige Mausposition (pmouseX, pmouseY). Sie können die "Geschwindigkeit" auf verschiedene Arten berechen, und so verschiedene Effekte erzielen, zum Beispiel:
// "Geschwindigkeit" = X-Abstand + Y-Abstand; Funktion abs(wert) liefert Absolutwert von wert float speed = abs(mouseX - pmouseX) + abs(mouseY - pmouseY); // "Geschwindigkeit" = geometrischer Abstand der beiden Mauspositionen; // sqrt(wert) liefert Quadratwurzeln von wert float speed = sqrt((mouseX - pmouseX) * (mouseX - pmouseX) + (mouseY - pmouseY) * (mouseY - pmouseY));
Source Code-Gerüst für Ihre Lösung: AufgabeMausVerfolgenMitKreisen.java
Schreiben Sie ein Programm, dass eine Spur der Mausbewegung anzeigt, die mit der Zeit verblasst:
Um eine Spur zu zeichnen, müssen Sie eine gewisse Anzahl Mauspositionen speichern. Sie können dazu zum Beispiel für die X- und Y-Positionen jeweils in einem Array speichern. Dann können Sie die Positionen zyklisch in diesen Arrays speichern: Wenn die Arrays "voll" sind, füllen Sie sie wieder von vorne. Das Programmgerüst dazu könnte wie folgt aussehen:
int num = 60;
float mx[] = new float[num];
float my[] = new float[num];
public void draw() {
// Mausposition in Arrays speichern; als Index im Array wird frameCount
// verwendet, wobei mit % num jeweils der Rest der Ganzzahldivision
// durch num (Länge des Arrays) genommen wird, so dass
// mIndex die Werte 0..num-1, 0..num-1, ... annimmt.
int mIndex = frameCount % num;
mx[mIndex] = mouseX;
my[mIndex] = mouseY;
// hier die Mauspositionen anzeigen
}
Bei der Darstellung der Mauspositionen können Sie zum Beispiel die Grösse der Kreise oder ihre Füllfarben oder Rahmenfarben oder Strichgrössen verändern, damit der Effekt einer verblassenden Spur entsteht.
Source Code-Gerüst für Ihre Lösung: AufgabeMausVerfolgenMitSpur.java