/blog/processing-ereignisse-mouse-x-und-mouse-y-287

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:

<table border="1" style="border-collapse: collapse; padding: 5px;"> <tr><th>Funktionsname</th><th>ErklÃ¤rung</th></tr> <tr><td>mousePressed()</td><td>Wenn die Maustaste runtergedrÃ¼ckt wird</td></tr> <tr><td>mouseClicked()</td><td>Wenn die Maus gedrÃ¼ckt und wieder losgelassen wird</td></tr> <tr><td>mouseDragged()</td><td>Wenn die Maustaste gedrÃ¼ckt ist und die Maus bewegt wird</td></tr> <tr><td>mouseMoved()</td><td>Wenn die Maus bewegt wird</td></tr> <tr><td>mouseReleased()</td><td>Wenn die Maustaste losgelassen wird</td></tr> <tr><td>keyPressed()</td><td>Wenn eine Taste gedrÃ¼ckt wird</td></tr> <tr><td>keyReleased()</td><td>Wenn eine Taste losgelassen wird</td></tr> <tr><td>keyTyped()</td><td>Solang eine Taste gedrÃ¼ckt ist</td></tr> </table>

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

<table border="1" style="border-collapse: collapse; padding: 5px;"> <tr><th>Befehl</th><th>ErklÃ¤rung</th></tr> <tr><td>mouseButton</td><td>gedrÃ¼ckte Maustaste</td></tr> <tr><td>key</td><td>Die gedrÃ¼ckte Taste</td></tr> <tr><td>keyCode</td><td>der Tastencode der gedrÃ¼ckten Taste</td></tr> </table>

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:

<div style="border: 2px solid #555555; border-radius: 10px; box-shadow: 3px 3px 5px #000011; padding: 7px;"> <pre> void setup() { size(300, 300); smooth(); background(255); } void draw() { } void mouseClicked() { //Zeichenfarbe 0, also Schwarz stroke(0); //Strichdicke 2 Pixel strokeWeight(2); //keine FÃ¼llfarbe noFill(); //Kreis an Mauskoordinaten zeichnen ellipse(mouseX, mouseY, 25, 25); //mit Schwarz fÃ¼llen(benÃ¶tigt fÃ¼r text) fill(0); //Text ausgeben. Text ist der Code der Maustaste, //Koordinaten des Textes sind X-Punkt - 6 //und Y-Punkt + 3 der Maus text(mouseButton, mouseX - 6, mouseY + 3); } void keyPressed() { //Wenn Taste gedrÃ¼ckt wurde, Hintergrund auf WeiÃ, //das bedeutet alles zuvor gezeichnete verschwindet background(255); //GedrÃ¼ckte Taste ausgeben println("Taste " + key + " wurde gedrÃ¼ckt"); } </pre> </div>

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"]

<div id="id_lightbox"> <div id="id_box_header"> Sourcecode </div> <div id="id_box_main"> <pre> void setup() { size(400, 300); smooth(); background(255); } void draw() { //void draw() muss auf jeden Fall dastehen, andernfalls //wÃ¼rden auch Ereignisse nicht funktionieren. } //Wenn eine Maustaste gedrÃ¼ckt ist und die Maus //bewegt wird void mouseDragged() { //Strichdicke 2 Pixel stroke(2); /*Hier zeichnen wir nun eine Linie von der aktuellen Mausposition bis zur letzen Mausposition*/ line(mouseX, mouseY, pmouseX, pmouseY); } //Wenn eine Taste gedrÃ¼ckt wird: void keyPressed() { //Fenster wird quasi geleert background(255); } </pre> </div></div>[/expand] [expand title="Hintergrundfarbe ist X-Koordinate der Mausposition"] <link rel="stylesheet" href="/script/css/style.css" type="text/css"> <div id="id_lightbox"> <div id="id_box_header"> Sourcecode </div> <div id="id_box_main"> <pre> void setup() { size(255, 255); smooth(); } void draw() { } void mouseMoved() { //Hintergrundfarbe ist X-Koordinate der Mausposition //Daher auch nur eine Fensterbreite von 255 background(mouseX); //Keine Rahmen noStroke(); //Mit orange fÃ¼llen fill(255, 127, 0); //Rechteck, welches mit der X-Position //der Maus mitwÃ¤chst rect(0, height / 2, mouseX, 25); } </pre> </div></div> [/expand] [expand title="Balken nach Mausposition"] <link rel="stylesheet" href="/script/css/style.css" type="text/css"> <div id="id_lightbox"> <div id="id_box_header"> Sourcecode </div> <div id="id_box_main"> <pre> void setup() { size(255, 255); smooth(); } void draw() { } void mouseMoved() { background(255); strokeWeight(5); rect(0, 10, mouseX, 10); rect(0, 40, mouseX * 2, 10); rect(0, 70, mouseX / 2, 10); rect(0, 100, mouseY, 10); rect(0, 130, mouseY * 2, 10); rect(0, 160, mouseY / 2, 10); } </pre> </div></div> [/expand] [expand title="Balken nach Tastencode"] <link rel="stylesheet" href="/script/css/style.css" type="text/css"> <div id="id_lightbox"> <div id="id_box_header"> Sourcecode </div> <div id="id_box_main"> <pre> void setup() { size(255, 255); smooth(); } void draw() { } void mouseMoved() { background(255); strokeWeight(5); rect(0, 10, mouseX, 10); rect(0, 40, mouseX * 2, 10); rect(0, 70, mouseX / 2, 10); rect(0, 100, mouseY, 10); rect(0, 130, mouseY * 2, 10); rect(0, 160, mouseY / 2, 10); } </pre> </div></div> [/expand] <div style="border: 2px solid #555555; border-radius: 10px; box-shadow: 3px 3px 5px #000011; padding: 7px;"> Lies die Befehle am besten in der Referenz nach, wenn du etwas noch nicht ganz verstanden hast: <a href="http://www.processing.org/reference/mouseButton.html" target="blank">mouseButton</a> <a href="http://www.processing.org/reference/mouseClicked_.html" target="blank">mouseClicked()</a> <a href="http://www.processing.org/reference/mouseDragged_.html" target="blank">mouseDragged()</a> <a href="http://www.processing.org/reference/mouseMoved_.html" target="blank">mouseMoved()</a> <a href="http://www.processing.org/reference/mousePressed_.html" target="blank">mousePressed()</a> <a href="http://www.processing.org/reference/mousePressed.html" target="blank">mousePressed</a> <a href="http://www.processing.org/reference/mouseReleased_.html" target="blank">mouseReleased()</a> <a href="http://www.processing.org/reference/mouseX.html" target="blank">mouseX</a> <a href="http://www.processing.org/reference/mouseY.html" target="blank">mouseY</a> <a href="http://www.processing.org/reference/pmouseX.html" target="blank">pmouseX</a> <a href="http://www.processing.org/reference/pmouseY.html" target="blank">pmouseY</a> <a href="http://www.processing.org/reference/key.html" target="blank">key</a> <a href="http://www.processing.org/reference/keyCode.html" target="blank">keyCode</a> <a href="http://www.processing.org/reference/keyPressed_.html" target="blank">keyPressed()</a> <a href="http://www.processing.org/reference/keyPressed.html" target="blank">keyPressed</a> <a href="http://www.processing.org/reference/keyReleased_.html" target="blank">keyReleased()</a> <a href="http://www.processing.org/reference/keyTyped_.html" target="blank">keyTyped()</a> </div> 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

Processing - Ereignisse, mouseX und mouseY

Kommentare

Kommentar schreiben