Delique
Als ich den (Code)Pen "deliquescent" von Tiffany Rayside sah wollte ich unbedingt verstehen wie die Animation funktioniert.
Ich habe den Pen erst mal lokal zum laufen lassen gebracht, um in meiner gewohnten Umgebung damit spielen zu können. Dann hab ich mich an die Dissektion des Codes gemacht.
Aber was heißt eigentlich deliquescent?
Das Cambridge Dictionary
beschreibt deliquescent als
"the process of becoming liquid as a result of absorbing moisture from the air; the process of melting or
turning into a liquid"
Das hat Kagi Translate übersetzt mit "der Prozess des Flüssigwerdens
durch Aufnahme von Feuchtigkeit aus der Luft; der Prozess des Schmelzens oder der Verflüssigung"
Ich wollte verstehen wie die Mathematik hinter der Animation und Maus Interaktion funktioniert. Aber erst mal musste ich verstehen, was überhaupt ab geht. Ich habe den Code umstrukturiert, Variablen umbenannt und an Stellschrauben gedreht, um zu verstehen was was macht.
Neben der Umstrukturierung habe ich
- Controls hinzugefügt um die Animation beeinflussen zu können
- Farbwechsel und Farbwahl hinzugefügt und
- mobile touch events integriert
Folgend ist eingeklappt die ausführliche Erklärung der Animationslogik
Wie funzt das?
Generell
Wenn Du mit dem Grid interagierst (mit touch oder click) nähern dir sich die Zellen in
Reichweite. Wenn dein Input aufhört schwingen die Zellen wieder in ihre Ausgansposition. Aber
sie übertreiben etwas und schwingen hin und her, bis sie die Ausgangsposition erreicht haben.
Das wird
bestimmt durch die Velocity der Zellen. Die Velocity wird langsamer kleiner, als die Distanz zur
Ausgangsposition. Das ist kontrolliert durch die Stärke. Somit bewegt sich die Zelle weiter, auch wenn sie
die Ausgangposition erreicht hat, da die Velocity noch wirkt.
Variablen
Die Animation einer Zelle setzt sich grundlegend zusammen aus den Variablen
- Offset (Strecke zwischen aktueller Zellposition und Ausgangsposition der Zelle)
- dem Origin (wo die Maus input gibt)
- der Velocity der Zelle (wie schnell sie unterwegs ist)
- und die Positionen der Nachbarzellen
Kalkulation
Die nächste Zell Position wird durch folgende Faktoren beeinflusst
- Stärke (beeinflusst wie groß der Offset ist)
- Trägheit (beeinflusst wieviel der Velocity pro Bild weitergegeben wird)
- Offset Einfluss (wie stark Zellen auf die Verschiebung von der Ausgangsposition reagieren)
Die Drei beeinflussen wie weit eine Zelle ziehbar ist. Es ist ein Kampf zwischen der Maus Position und der Position die die Zelle einnehmen möchte. Wer in diesen Kampf verwickelt wird bestimmt die Reichweite und Beeinflussung (der Nachbarzellen)
Controls
Was machen Sachen?
| Größe | Die Kantenlänge des Rasters in Zellen |
| Reichweite | Die Distanz wie weit Zellen entfernt reagieren |
| Beeinflussung | Wie stark Zellen ihre Nachbarn beeinflussen (beendet animation bei 0) |
| Stärke | Wie stark Zellen reagieren (friert Zustand ein bei 0) |
| Trägheit | Wie träge das System ist (niedrigere Werte verstärken Reaktivität, höhere verlangsamen) |