2/21/2017

Tentacle Creature

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.


2/07/2017

Procedurally generated trees in JavaScript


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.