Maus-Input

Jetzt wo Ihr Emoji skalierbar, variabel, in einer Funktion und animiert ist, ist es Zeit es interaktiv zu machen. Als erstes Beispiel soll es auf die Bewegung der Maus reagieren. Um die Position des Mauszeigers zu benutzen, hat p5js zwei Variablen: mouseX und ?mouseY.

Der folgende Code gibt immer wieder die aktuelle Mausposition aus.

function draw() {
    console.log(mouseX + " / " + mouseY);
}

Aufgabe

Arbeiten Sie in G1C 02 Interaktion Vorname Nachname. Benutzen Sie die Mauskoordinaten um an jeder Position der Maus einen kleinen Kreis zu malen. Speichern Sie es als mouse-track.js ab.

Erweitern Sie danach den Code so, dass der Kreis der Maus folgt (aber nicht mehr an jeder Stelle einen Kreis hinterlässt).

Video

Eine Erklärung mit Live-Coding finden Sie auch im zugehörigen Video:

Aufgabe

Bauen Sie ein einfaches Zeichenprogramm mit dem line Befehl. Beim Bewegen der Maus werden nicht einfach nur Kreise gezeichnet, sondern die Strecke wird mit Linien verbunden.

Speichern Sie das Ergebnis als paint.js.

Lösungshinweis

Sie müssen sich die aktuellen Maus-Koordinaten in eigenen Variablen merken, damit Sie sie im nächsten draw() durchlauf noch "wissen".

Bonusaufgabe (freiwillig und etwas kniffliger)

Lassen Sie Ihren Emoji der Maus mit einer Verzögerung folgen wie im folgenden Beispiel. Speichern Sie diese freiwillige Aufgabe unter emoji-follower.js, wenn Sie sie erledigen.

Maus-Follower

Maustasten

Außer der Position gibt es noch mehr Möglichkeiten die Maus zu nutzen. Es gibt die Variable mouseIsPressed die Ihnen ausgibt ob die linke Maustaste zur Zeit geklickt ist. Das ist zum Beispiel innerhalb der draw()-Funktion nützlich im nachfolgenden Code-Beispiel haben wir das eingesetzt.

function draw() {
	console.log("Ist die Maustaste gedrückt? " + mouseIsPressed);
}

Außerdem gibt es noch die Funktionen mousePressed(), mouseReleased() und mouseClicked() die man benutzen kann um mitzubekommen, dass die Maustaste gedrückt oder losgelassen wurde. Diese Funktionen werden - wie die draw() Funktion - von P5.js besonders behandelt. Wenn sie vorhanden sind, werden sie von P5.js nämlich automatisch aufgerufen. Den Unterschied zwischen Clicked, Pressed und Released haben wir im Video bei 3:55 erklärt. Aber mit dem folgenden Stück Code können Sie es auch selbst herausfinden!

function mousePressed() {
	console.log("Die Maustaste wurde gedrückt");
}

function mouseReleased() {
	console.log("Die Maustaste wurde losgelassen");
}

function mouseClicked() {
	console.log("Die Maustaste wurde geklickt");
}

Vergessen Sie nicht, Ihre Ergebnisse zu committen und zu pushen! Abgabe bis 16.11.2022 / 18:00 Uhr via Gitlab.