Hi,

der Easing-Effekt ist wirklich cool und lässt sich in vielerlei Hinsicht in alle möglichen Projekte einbringen. Easing bedeutet übersetzt in etwa soviel wie nachlassen oder Abschwächung. Viel faszinierender ist, was dahintersteckt. Es ist relativ einfach, eine ellipse der Maus folgen zu lassen, hierfür übergeben wir als Position einfach mouseX und mouseY übergeben. Aber würde es nicht viel cooler aussehen wenn die ellipse nicht starr am Mauscursor festklebt sondern mit etwas verzögerung nachzieht? Genau das ist das was Ich dir heute zeigen will. Die Funktionalität dahinter ist eigentlich nicht allzu kompliziert, ein bisschen Mathematik hier und da und voilà ... =)

Das Grundgerüst will Ich mit schwarzen Hintergrund und einer Fenstergröße von 300x300 (du wirst bewerkt haben dass das mein Lieblingswert ist) haben. Wie immer setzen wir noch smooth() ein, die ellipse füllen wir weiß. Zuerst legen wir einige Variablen fest, die brauchen wir dann für den Easing-Effekt. Sehen wir uns den Algorithmus an, der für die Verzögerung der Bewegung sorgt.

Wir haben eine Variable die das Ziel definiert. Das Ziel ist immer die Mausposition, dort soll sich die Ellipse schließlich hinbewegen. Dann brauchen wir noch 2 Variablen die wir am Ende als Position an die ellipse() übergeben und zwei temporäre Variablen die wir zur Berechnung innerhalb von draw() benötigen. Die temporären Variablen sollen als Wert das Ziel (Mausposition) minus x/y erhalten, x und y werden danach berechnet. Die Bedingung hierfür lautet: Wenn die Entfernung zwischen Mausposition und Position der Ellipse größer als 1 ist, dann soll sich die Ellipse noch auf den Mauscursor zubewegen. Würden wir diesen Fall nicht behandeln, würde die Ellipse sich auch noch bewegen, wenn die Maus stillsteht und die Ellipse aber bereits bei der Maus ist. Die Entfernung ist eine Distanz die wir einfach berechnen indem wir wir Mausposition minus Ellipsen-Position ermitteln. Hierbei kann auch eine negative Zahl herauskommen, doch wenn wir diese sogleich wieder ins positive kehren (-9 zu 9, -12 zu 12 und so weiter) ist die Distanz immer noch dieselbe. Dafür sorgt die abs()-Funktion, mit dieser wird jede Zahl ins positive gewandelt. So, jetzt genug des theoretischen, sehen wir uns die Praxis an:

<pre> <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>setup</b></span>() { <span style="color: #CC6600;">smooth</span>(); <span style="color: #CC6600;">background</span>(#000000); <span style="color: #CC6600;">size</span>(300, 300); } <span style="color: #CC6600;">float</span> x, y; <span style="color: #CC6600;">float</span> targetX, targetY; <span style="color: #CC6600;">float</span> easing = 0.05; <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>draw</b></span>() { <span style="color: #CC6600;">background</span>(#000000); targetX = <span style="color: #006699;">mouseX</span>; targetY = <span style="color: #006699;">mouseY</span>; <span style="color: #CC6600;">float</span> dx = targetX - x; <span style="color: #CC6600;">float</span> dy = targetY - y; <span style="color: #CC6600;">if</span>(<span style="color: #CC6600;">abs</span>(dx) > 1) { x += dx * easing; } <span style="color: #CC6600;">if</span>(<span style="color: #CC6600;">abs</span>(dy) > 1) { y += dy * easing; } <span style="color: #CC6600;">fill</span>(#FFFFFF); <span style="color: #CC6600;">ellipse</span>(x, y, 25, 25); } </pre>

Das ist der komplette Code (auch in der Processing Referenz gibt's hierzu was, schau mal dort nach). Wir speichern die Mausposition in Variablen, die ellipse bewegt sich mit der Geschwindigkeit des in der easing-Variable gespeicherten Wertes von 0.05 fort. Den Wert kannst du probeweise variieren. Du kannst noch ein Rechteck darüberlegen und dieses mit einem Alphawert versehen, auch ein interessanter Effekt:

<pre> <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>setup</b></span>() { <span style="color: #CC6600;">smooth</span>(); <span style="color: #CC6600;">background</span>(#000000); <span style="color: #CC6600;">size</span>(300, 300); <span style="color: #CC6600;">noStroke</span>(); } <span style="color: #CC6600;">float</span> x, y; <span style="color: #CC6600;">float</span> targetX, targetY; <span style="color: #CC6600;">float</span> easing = 0.05; <span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>draw</b></span>() { <span style="color: #CC6600;">fill</span>(#000000, 32); <span style="color: #CC6600;">rect</span>(0, 0, <span style="color: #006699;">width</span>, <span style="color: #006699;">height</span>); targetX = <span style="color: #006699;">mouseX</span>; targetY = <span style="color: #006699;">mouseY</span>; <span style="color: #CC6600;">float</span> dx = targetX - x; <span style="color: #CC6600;">float</span> dy = targetY - y; <span style="color: #CC6600;">if</span>(<span style="color: #CC6600;">abs</span>(dx) > 1) { x += dx * easing; } <span style="color: #CC6600;">if</span>(<span style="color: #CC6600;">abs</span>(dy) > 1) { y += dy * easing; } <span style="color: #CC6600;">fill</span>(#FFFFFF); <span style="color: #CC6600;">ellipse</span>(x, y, 25, 25); } </pre>

Ich habe noch in void setup() festgelegt, dass die Ellipse keinen Rand hat (noStroke()), das schaut doch schon recht gut aus, nicht =) Den Sketch kannst du dir auch in meinem OpenProcessing Portfolio ausprobieren.

Dieses Projekt jetzt noch eine gute Stufe komplizierter. Was Ich jetzt möchte ist mehrere Ellipsen die mit unterschiedlicher (inkrementierter) Verzögerung der Maus folgen, in Zusammenspiel mit transparenten Werten für den Alpha-Kanal wird daraus ein recht ansehnliches Ergebnis. Dafür brauchen wir jedoch eine extra Klasse für die Ellipse. Klassen sind ein ganz eigenes Kapitel und es Bedarf fundierter Kenntnisse der objektorientierten Programmierung, daher werden wir das direkt im nächsten Teil behandeln. Lösche also dein Projekt nicht, das wirst du für das nächste Tutorial brauchen. Nachtrag: Eine andere, etwas erweiterte Variation von dem Sketch eben kannst du dir auch hier nochmal anschauen, Ich habe noch eine Linie und eine Art Raster hinzugefügt, ich finde es sieht recht interessant aus.

Bis dahin Marius