Die Tornado Simulation ist ein Experiment das ich schon seit langem starten wollte. Und mit meiner 3D Particle-Engine, die jetzt schon in so zahlreichen anderen Experimenten zum Einsatz kam, und etwas Zeit ließ sich diese Simulation jetzt endlich mal umsetzen. Für die Simulation selbst kommen keine weiteren Frameworks wie z.B. Three.js zum Einsatz. Einfach pures JavaScript. Dadurch konnte ich auch in diesem Experiment die Dateigröße mit 13KB recht klein halten. Zum Rendern nutze ich das Canvas-Element und das ImageData Interface um Zugriff auf die Pixel zu bekommen. Wer sich für dieses Thema interessiert, ich hatte dazu mal ein Tutorial geschrieben. Aber zurück zum Tornado. Ziel war es im weitesten Sinn eine möglichst realistische Simulation eines Tornados mit den zur Verfügung stehenden Mitteln zu realisieren. Die Höhe des Tornados ergibt sich aus der Anzahl der „Radial Segments“. Diese sind in einer sich drehenden Spirale angeordnet, die nach oben hin exponentiell größer wird. Auf die Animation der Verschiebung der Spirale könnt ihr mit „Spiral Disp.“ Einfluss nehmen. Um jedes der „Radial Segments“ kreisen die „Tubular Segments“. Deren Anzahl kann nur auf ein Maximum festgelegt werden, da hier der Zufall mitbestimmt wie viele „Tubular Segments“ pro „Radial Segment“ generiert werden. Jedes einzelne „Tubular Segment“, also Partikel, erhält einen per Zufall generierten Graustufen-Wert und kann eine Spur hinter sich herziehen, deren maximale Länge ihr in den Einstellungen per „Max Trail Length“ beeinflussen könnt. Auch auf die Geschwindigkeit und Drehrichtung der Partikel könnt ihr mit „Max Speed“ Einfluss nehmen. Mit „Min Radius“ könnt ihr zudem noch festlegen wie groß/klein der Radius des Tornados unten am Boden ist. Geht einfach mal in die Einstellungen mit „Open Controls“ und spielt mit den Werten. Aber bitte etwas vorsichtig. Langsame Rechner könnten hierbei schnell an ihre Grenzen gebracht werden! Ihr könnt die Anwendung direkt hier unterhalb starten (einfach mit der Maus über das untenstehende Fenster fahren), oder ihr öffnet die Simulation in einem neuen Browserfenster. Vor allem User mit mobilen Endgeräten und älteren Rechnern sollten sich die Simulation in einem extra Fenster anschauen. Viel Spaß und haltet eure Hüte fest.
Die Lissajous-Figur ist aus mathematischer Sicht das parametrische Schaubild einer Funktion erfunden vom französischen Physiker Jules Antoine Lissajous. Hier umgesetzt mit JavaScript ohne weitere Frameworks und dadurch unter 15KB klein. Spielt einfach mal mit den Parametern. Damit lassen sich interessante Ergebnisse erzielen. Um ein harmonisches Ergebnis zu erziehlen, sollten die Werte der drei Parameter W1, W2 und W3 nah beieinander liegen. Wie z.B. in den Voreinstellungen sichtbar. Ihr könnt die Anwendung direkt hier unterhalb anschauen, oder, besonders für mobile Endgeräte empfehlenswert, in einem neuen Browserfenster.
Dwitter? Du meinst bestimmt Twitter! Nein, Dwitter. Was ist Dwitter? „A social network for short JavaScript demos“. Dwitter ähnelt Twitter sehr. Nur mit dem Unterschied, dass man mit den 140 Zeichen (bytes) keine Textnachrichten verfasst, sondern kleine JavaScript Demos programmiert. Die große Herausforderung, und gleichzeitig auch der Reiz, besteht darin, sein Vorhaben in 140 Zeichen Code zu verpacken. Dabei muss man seinen Code brutal optimieren und lernt immer wieder neue Kniffe und Tricks um hier und da ein paar Zeichen einzusparen. Natürlich gibt es Tools wie z.B. das sehr empfehlenswerte „JavaScript Compression Tool“ und andere, aber deren Einsatz allein reicht in den meisten Fällen nicht aus, oder kann nur unterstützend eingesetzt werden. Am besten schaut man sich andere Beispiele auf Dwitter an und versucht deren Code zu verstehen. So kann man ziemlich schnell viele Tricks zum optimieren seines Codes sammeln. Hier mal meine ersten Gehversuche auf Dwitter: https://www.dwitter.net/u/Niklas
Und wieder ein three.js Experiment. Warum Tentakeln? Weil ich mit dem Ergebnis in dem Experiment zuvor nicht zufrieden bin. Bei „Procedurally generated trees in JavaScript“ sehen die Baumstämme und Äste einfach viel zu wenig natürlich aus. So gerade und abgehakt wachsen keine Pflanzen und auch die Verbindungen der Äste untereinander wird man so nicht in der Natur vorfinden. Auf der Suche nach einer Lösung bin ich über die TubeGeometry gestolpert. Mit dieser lässt sich die Form einer Röhre abbilden. Und, für mich besonders wichtig, man kann ihr einen Pfad mit Koordinaten mitgeben und die TubeGeometry richtet sich danach aus. Und das allerbeste, die TubeGeometry akzeptiert als Pfad auch eine CatmullRomCurve3. Eine Kurve, bzw. etwas genauer gesagt ein Spline, die eine gegebene Anzahl an Kontrollpunkten sehr soft miteinander verbindet. Stichwort: Kubisch Hermitescher Spline, oder auch Centripetal Catmull–Rom spline. Das einzige Problem das jetzt noch bestand war, dass die TubeGeometry nur einen Radius als Parameter akzeptiert. Gibt man ihr einen Radius von 3, dann hat sie an ihrem Anfangspunkt den selben Radius 3 wie am Endpunkt. Mein Ziel aber was es einen Start, und einen End-Radius definieren zu können. So soll es z.B. möglich sein, dass sich die Röhre zum Ende hin konisch verjüngt. Um das zu erreichen musste ich die TubeGeometry umschreiben. Herausgekommen ist dabei die TentacleGeometry.js. Und weil mich beim Entwickeln die ersten Formen so stark an Tentakeln erinnerten ist dieses Experiment hier entstanden. Das Ganze ist also eher nur ein Zwischenschritt für ein neues „Procedurally generated trees“-Experiment. Ihr könnt das Experiment direkt hier starten, oder ihr öffnet die Anwendung in einem neuen Browser-Fenster.
Das Thema ist nicht ganz neu für mich. Bereits 2006 und 2007 hatte ich damals noch mit Flash erste Gehversuche gestartet. Allerdings noch in 2D und aus heutiger Sicht wenig schön anzusehen. Jetzt bin ich nicht nur einen anderen Weg gegangen, sondern auch einen Schritt weiter. Bei dem neuen Experiment ist eine Dimension hinzugekommen und umgesetzt ist das Ganze nun mit JavaScript. Als 3D Bibliothek kommt wie zuletzt auch wieder three.js zum Einsatz. Mit Hilfe einer rekursiven Funktion und vielen per Zufall generierten Werten erzeuge ich hier Bäume, oder zumindest baumähnliche Gebilde. Wie immer, wenn der Zufall im Spiel ist, kann es auch mal Überraschungen geben. Damit die Performance auch auf älteren Rechnern stimmt, habe ich es mit den Wachstumszyklen nicht übertrieben. Aber schaut einfach selbst. Ihr könnt direkt hier starten, oder ihr öffnet die Anwendung in einem neuen Browser-Fenster.
