Processing – Ereignisse, mouseX und mouseY

Hi,

heute will Ich dir Ereignisse(Events) näherbringen. Was sind denn Ereignisse? Ereignisse sind Benutzeraktionen, denn es passiert schließlich immer irgendtwas. Du bewegst die Maus -> ein Ereignis. Du drückst eine Taste -> ein Ereignis. Du klickst die Maus -> Ereignis. Du drückst und ziehst die Maus -> Ereignis. Du lässt die Maustaste los -> Ereignis. Du siehst, zo ziemlich alles was du tust, ist ein Ereignis. Und das tollte ist: Für alles was du tust, gibt es Events. Du hast die Möglichkeit, für jedes beliebige Ereignis Code zu hinterlegen. Es soll eine Ellipse gezeichnet werden wenn du die Maus klickst? Du willst eine bestimmte Füllfarbe, wenn Taste „H“ gedrückt wurde? Du willst Punkte zeichnen während die Maus bewegt wird? Kein Problem. Wie leicht das ist, will Ich dir nun zeigen.

Du hast für solche Aufgaben bestimmte Funktionen, du kannst teils aber auch einfach in void draw() abfragen, ob dies oder jenes gerade zutrifft. Die Namen dafür sprechen für sich, sieh her:

Funktionsname Erklärung
mousePressed() Wenn die Maustaste runtergedrückt wird
mouseClicked() Wenn die Maus gedrückt und wieder losgelassen wird
mouseDragged() Wenn die Maustaste gedrückt ist und die Maus bewegt wird
mouseMoved() Wenn die Maus bewegt wird
mouseReleased() Wenn die Maustaste losgelassen wird
keyPressed() Wenn eine Taste gedrückt wird
keyReleased() Wenn eine Taste losgelassen wird
keyTyped() Solang eine Taste gedrückt ist

Dafür gibt es noch extra fesst definierte Befehle, um die gedrückte Taste oder Mausbutton ausfindig zu machen:

Befehl Erklärung
mouseButton gedrückte Maustaste
key Die gedrückte Taste
keyCode der Tastencode der gedrückten Taste

Du siehst, es ist ganz einfach. Wie immer definierst du Anfang und Ende der Funktion durch geschweifte Klammern. Bevor Ich dir ein Beispiel zeige, noch 2 wichtige, sehr wichtige Befehle, mit denen du sicherlich auch öfter arbeiten willst und wirst, mouseX und mouseY. mouseX enthält jeweils die X-Koordinaten, an denen sich die Maus relativ zum Fenster befindet, mouseY die Y-Koordinaten. Versuche das folgende Beispielprogramm, was kannst du beobachten:

Kopiere den Code in deine Processing IDE und führe das Programm aus. Du siehst, mouseX und mouseY enthalten jeweils die Koordinaten an denen sich die Maus befindet. So ist es uns ein leichtes, eine Ellipse zu zeichnen, wenn eine Maus gedrückt wird. Dafür nehmen wir das mousePressed() oder mouseClicked() Ereignis. Noch kurz am Rande: Wenn du versuchst, über println() oder text() die Maustaste, die gedrückt wurde, wundere dich nicht, dass du Zahlen als Werte bekommst, 37 wenn es die linke, und 39 wenn es die rechte Maustaste ist. Das hängt mit den TastenCodes zusammen, dazu kommen wir aber erst noch. Versuche folgenden Code:

Kopiere den Code und probier ihn bei dir aus. Nun hast du eine ungefähre Vorstellung davon, wie Ereignisse funktionieren. Du kannst auch andere Ereignisse verwenden, spiele ein wenig mit Code herum.

Wie Ich bereits gesagt habe, zu den Ereignissen werde Ich nicht viel sagen, doch wie immer findest du unten in der Box die Liste mit Links zur Referenz, wo alles genauestens erklärt ist. Probiere einfach alles mögliche mit Farben, Formen, Linien, Punkten, Ereignissen und draw().

Bevor Ich diesen Artikel beende, möchte Ich dir unbedingt noch zwei Befehle zeigen. Du kennst ja nun schon mouseX und mouseY. Es gibt aber noch 2 ähnliche Befehle. pmouseX und pmouseY. Diese Werte enthalten die Koordinaten der letzen Mauskoordinaten. mouseX und mouseY sind immer aktuell, die Koordinaten die die Mausposition zur aktuellen Zeit hat. pmouseX und pmouseY sind die Koordinaten die mouseX und mouseY eine Bewegung davor hatten.

Ich hab‘ hier noch einige Beispielcodes, klappe einfach die Expander auf:

[expand title=“Beispiel um mit der Maus zu malen“]

Sourcecode

[/expand]

[expand title=“Hintergrundfarbe ist X-Koordinate der Mausposition“]

Sourcecode

[/expand]

[expand title=“Balken nach Mausposition“]

Sourcecode

[/expand]

[expand title=“Balken nach Tastencode“]

Sourcecode

[/expand]

Im nächsten Artikel zeige Ich dir Datentypen und Fallbedingungen, außerdem Operatoren. Ja, ganz recht, dann geht’s los mit der Programmierung. Zufallszahlen werden auch zum Einsatz kommen 🙂

Bis dahin..
Marius

3 Kommentare

  1. heyhooo^^
    …wollt Dich nur drauf hinweisen,dass
    die codes von
    Balken nach Mausposition
    und
    Balken nach Tastencode
    dieselben sind..
    geh nämlich die Beispiele grad durch um a weng des Gefühl fürs processing zu bekommen..
    mfGrinsen
    Sebastian

Schreibe einen Kommentar zu marius_gerum Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.