3D Fireworks

Bei diesem JavaScript Canvas Experiment hab ich mich von einem alten Flash Experiment von mir selbst inspirieren lassen, welches ich damals für den Japantag in Düsseldorf geschrieben hatte:
„Fireworks, Japantag in Düsseldorf am Rheintum“
Das war 2009 und Flash war noch schwer angesagt. Bei dem alten Experiment musste ich noch auf die dritte Dimension verzichten, weil das die Performance kaum hergab. Und jetzt, mit JavaScript, kann man ein solches Feuerwerk fast problemlos abfeuern.
Ich bin jedes Mal wieder aufs Neue verblüfft wie sich JavaScript in den letzten Jahren weiterentwickelt hat.
Aber nun zum Experiment. Wie bei den vorhergegangenen Experimenten dieser Art, so nutzt auch dieses wieder Partikel für die Darstellung, die in Form von Pixeln direkt in das ImageData Array der Canvas geschrieben werden. Mit dieser Technik ist es möglich eine sehr große Anzahl an Partikeln gleichzeitig zu animieren und darzustellen. Und dank des Canvas Elements kann so ziemlich jeder Browser (außer dem Internet Explorer 9 und älter) das auch wiedergeben.
Zum Starten müsst ihr nur einmal kurz mit der Maus über die Fläche weiter unten fahren und schon geht’s los. Wie immer könnt ihr über „Open Controls“ diverse Einstellungen vornehmen und so direkt Einfluss auf das Feuerwerk nehmen. 

Folgend ein paar Anmerkungen zu den wichtigsten Einstellungen die direkt Auswirkungen auf das Feuerwerk haben:
Mit „Ground“ könnt ihr die Bodenplatte bzw. das Grid unten aus- und einblenden.
„Distance“ beschreibt die minimale Höhe in der die Feuerwerksraketen über der Bodenplatte explodieren.
Per „Interval“ bestimmt ihr die Häufigkeit mit der neue Raketen abgefeuert werden. Die Einheit hierbei sind Millisekunden. Und mit „Probability“ bestimmt ihr die Wahrscheinlichkeit mit der per Intervall neue Raketen in den Himmel entlassen werden. Wobei der Wert „1“ 100% entspricht. Bei „1“, also 100% werden alle 25 Millisekunden Raketen abgeschossen und bei „0.25“ nur mit einer Wahrscheinlichkeit von 25%.
Mit „Duration“ könnt ihr festlegen wie lange eine Explosion dauert.
Und per „Trail Length“ legt ihr fest ob die einzelnen Partikel eine Spur hinter sich herziehen sollen und wie lang diese ist.
Ich habe mich dieses Mal gegen die Option z-Sorting aktivieren zu können entschieden, weil ich das hierbei für nicht so wichtig fand, und weil das natürlich auch immer sehr viel Performance kostet. 

Besucher mit Mobile Devices, oder falls ihr das Experiment lieber in einem neuen Browserfenster starten wollt klickt einfach hier. Ansonsten geht’s direkt hier drunter los. Viel Spaß.