Hier kommt die Sonne

Und wieder ein JavaScript Canvas Experiment.
Dieses Mal hab ich versucht einen Stern, bzw. unsere Sonne mit Hilfe von Partikeln nachzubilden.
Die Partikel werden per Zufall in einem vorher definierten Radius auf einer Sphere platziert. Klickt ihr mit der Maus in die Anwendung startet ihr die Animation und die Partikel bewegen sich vom Zentrum hin weg nach außen in den Raum.
Mit etwas Phantasie kann man die Photosphäre erahnen und natürlich, so hoffe ich jedenfalls, das von der Sonne ausgehende Licht und die Sonnenkorona.
Mit bis zu 5.000.000 (200.000 * 25) Partikeln kann man mit Sicherheit auch den schnellsten Rechner in die Knie zwingen. Besonders „Particle Amount“, „Follow Length“ und vor allem „Z-Sorting“ können euren Rechner schnell an seine Grenzen bringen. Probiert mal ein paar Einstellungen aus und verändert die Farben und das komplette Aussehen/Verhalten der Partikel.
Hier geht es direkt zum Experiment. Viel Spaß.



Für Interessierte hier noch die Funktion mit der ich die Partikel per Zufall auf der Sphere verteile. Die Funktion „getRandomSpherePos“ nimmt zwei Parameter entgegen. Mit „center“ bestimmt man wo das Zentrum der Sphere liegt und mit „radius“ gibt man den Radius der Sphere an. Die Funktion gibt dann ein Objekt mit den Werten x, y und z zurück.

function getRandomSpherePos( center, radius ) {

    var u = Math.random();
    var v = Math.random();
    var theta = 2 * Math.PI * u;
    var phi = Math.acos( 2 * v - 1 );

    var x = center.x + ( radius * Math.sin( phi ) * Math.cos( theta ) );
    var y = center.y + ( radius * Math.sin( phi ) * Math.sin( theta ) );
    var z = center.z + ( radius * Math.cos( phi ) );

    return { x:x, y:y, z:z };

};

Folgend ein beispielhafter Aufruf der Funktion um eine einzelne Position zurückzubekommen:

var center = { x:0, y:0, z:0 };
var position = getRandomSpherePos( center, 150 );

console.log( position );

Und hier auch noch einmal auf JSFiddle.