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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>setup</b></span>() { <span style="color: #CC6600;">size</span>(300, 300); <span style="color: #CC6600;">smooth</span>(); } <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>draw</b></span>() { <span style="color: #CC6600;">background</span>(255); <span style="color: #CC6600;">fill</span>(0); <span style="color: #CC6600;">text</span>(<span style="color: #006699;">"mouseX: "</span> + <span style="color: #006699;">mouseX</span> + <span style="color: #006699;">"nmouseY: "</span> + <span style="color: #006699;">mouseY</span>, 10, 10); } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>setup</b></span>() { <span style="color: #CC6600;">size</span>(300, 300); <span style="color: #CC6600;">smooth</span>(); <span style="color: #CC6600;">background</span>(255); } <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>draw</b></span>() { } <span style="color: #CC6600;">void</span> <span style="color: #CC6600;">mouseClicked</span>() { <span style="color: #7E7E7E;">//Zeichenfarbe 0, also Schwarz</span> <span style="color: #CC6600;">stroke</span>(0); <span style="color: #7E7E7E;">//Strichdicke 2 Pixel</span> <span style="color: #CC6600;">strokeWeight</span>(2); <span style="color: #7E7E7E;">//keine Füllfarbe</span> <span style="color: #CC6600;">noFill</span>(); <span style="color: #7E7E7E;">//Kreis an Mauskoordinaten zeichnen</span> <span style="color: #CC6600;">ellipse</span>(<span style="color: #006699;">mouseX</span>, <span style="color: #006699;">mouseY</span>, 25, 25); <span style="color: #7E7E7E;">//mit Schwarz füllen(benötigt für text)</span> <span style="color: #CC6600;">fill</span>(0); <span style="color: #7E7E7E;">//Text ausgeben. Text ist der Code der Maustaste,</span> <span style="color: #7E7E7E;">//Koordinaten des Textes sind X-Punkt - 6</span> <span style="color: #7E7E7E;">//und Y-Punkt + 3 der Maus</span> <span style="color: #CC6600;">text</span>(<span style="color: #006699;">mouseButton</span>, <span style="color: #006699;">mouseX</span> - 6, <span style="color: #006699;">mouseY</span> + 3); } <span style="color: #CC6600;">void</span> <span style="color: #006699;">keyPressed</span>() { <span style="color: #7E7E7E;">//Wenn Taste gedrückt wurde, Hintergrund auf Weiß,</span> <span style="color: #7E7E7E;">//das bedeutet alles zuvor gezeichnete verschwindet</span> <span style="color: #CC6600;">background</span>(255); <span style="color: #7E7E7E;">//Gedrückte Taste ausgeben</span> <span style="color: #CC6600;">println</span>(<span style="color: #006699;">"Taste "</span> + <span style="color: #006699;">key</span> + <span style="color: #006699;">" wurde gedrückt"</span>); } |
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“]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>setup</b></span>() { <span style="color: #CC6600;">size</span>(400, 300); <span style="color: #CC6600;">smooth</span>(); <span style="color: #CC6600;">background</span>(255); } <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>draw</b></span>() { <span style="color: #7E7E7E;">//void draw() muss auf jeden Fall dastehen, andernfalls</span> <span style="color: #7E7E7E;">//würden auch Ereignisse nicht funktionieren.</span> } <span style="color: #7E7E7E;">//Wenn eine Maustaste gedrückt ist und die Maus</span> <span style="color: #7E7E7E;">//bewegt wird</span> <span style="color: #CC6600;">void</span> <span style="color: #CC6600;">mouseDragged</span>() { <span style="color: #7E7E7E;">//Strichdicke 2 Pixel</span> <span style="color: #CC6600;">stroke</span>(2); <span style="color: #7E7E7E;">/*Hier zeichnen wir nun eine Linie von der aktuellen</span> <span style="color: #7E7E7E;"> Mausposition bis zur letzen Mausposition*/</span> <span style="color: #CC6600;">line</span>(<span style="color: #006699;">mouseX</span>, <span style="color: #006699;">mouseY</span>, <span style="color: #006699;">pmouseX</span>, <span style="color: #006699;">pmouseY</span>); } <span style="color: #7E7E7E;">//Wenn eine Taste gedrückt wird:</span> <span style="color: #CC6600;">void</span> <span style="color: #006699;">keyPressed</span>() { <span style="color: #7E7E7E;">//Fenster wird quasi geleert</span> <span style="color: #CC6600;">background</span>(255); } |
[/expand]
[expand title=“Hintergrundfarbe ist X-Koordinate der Mausposition“]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>setup</b></span>() { <span style="color: #CC6600;">size</span>(255, 255); <span style="color: #CC6600;">smooth</span>(); } <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>draw</b></span>() { } <span style="color: #CC6600;">void</span> <span style="color: #CC6600;">mouseMoved</span>() { <span style="color: #7E7E7E;">//Hintergrundfarbe ist X-Koordinate der Mausposition</span> <span style="color: #7E7E7E;">//Daher auch nur eine Fensterbreite von 255</span> <span style="color: #CC6600;">background</span>(<span style="color: #006699;">mouseX</span>); <span style="color: #7E7E7E;">//Keine Rahmen</span> <span style="color: #CC6600;">noStroke</span>(); <span style="color: #7E7E7E;">//Mit orange füllen</span> <span style="color: #CC6600;">fill</span>(255, 127, 0); <span style="color: #7E7E7E;">//Rechteck, welches mit der X-Position</span> <span style="color: #7E7E7E;">//der Maus mitwächst</span> <span style="color: #CC6600;">rect</span>(0, <span style="color: #006699;">height</span> / 2, <span style="color: #006699;">mouseX</span>, 25); } |
[/expand]
[expand title=“Balken nach Mausposition“]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>setup</b></span>() { <span style="color: #CC6600;">size</span>(255, 255); <span style="color: #CC6600;">smooth</span>(); } <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>draw</b></span>() { } <span style="color: #CC6600;">void</span> <span style="color: #CC6600;">mouseMoved</span>() { <span style="color: #CC6600;">background</span>(255); <span style="color: #CC6600;">strokeWeight</span>(5); <span style="color: #CC6600;">rect</span>(0, 10, <span style="color: #006699;">mouseX</span>, 10); <span style="color: #CC6600;">rect</span>(0, 40, <span style="color: #006699;">mouseX</span> * 2, 10); <span style="color: #CC6600;">rect</span>(0, 70, <span style="color: #006699;">mouseX</span> / 2, 10); <span style="color: #CC6600;">rect</span>(0, 100, <span style="color: #006699;">mouseY</span>, 10); <span style="color: #CC6600;">rect</span>(0, 130, <span style="color: #006699;">mouseY</span> * 2, 10); <span style="color: #CC6600;">rect</span>(0, 160, <span style="color: #006699;">mouseY</span> / 2, 10); } |
[/expand]
[expand title=“Balken nach Tastencode“]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>setup</b></span>() { <span style="color: #CC6600;">size</span>(255, 255); <span style="color: #CC6600;">smooth</span>(); } <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>draw</b></span>() { } <span style="color: #CC6600;">void</span> <span style="color: #CC6600;">mouseMoved</span>() { <span style="color: #CC6600;">background</span>(255); <span style="color: #CC6600;">strokeWeight</span>(5); <span style="color: #CC6600;">rect</span>(0, 10, <span style="color: #006699;">mouseX</span>, 10); <span style="color: #CC6600;">rect</span>(0, 40, <span style="color: #006699;">mouseX</span> * 2, 10); <span style="color: #CC6600;">rect</span>(0, 70, <span style="color: #006699;">mouseX</span> / 2, 10); <span style="color: #CC6600;">rect</span>(0, 100, <span style="color: #006699;">mouseY</span>, 10); <span style="color: #CC6600;">rect</span>(0, 130, <span style="color: #006699;">mouseY</span> * 2, 10); <span style="color: #CC6600;">rect</span>(0, 160, <span style="color: #006699;">mouseY</span> / 2, 10); } |
[/expand]
mouseButton mouseClicked() mouseDragged() mouseMoved() mousePressed() mousePressed mouseReleased() mouseX mouseY pmouseX pmouseY key keyCode keyPressed() keyPressed keyReleased() keyTyped()
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
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
Stimmt, hatt‘ Ich wohl ’nen Denkfehler drin ^_^ Hoffe Ich schaffs, wieder mehr Processing Tutorials zu machen.
Gruß
Marius