Pure JavaScript planetoid particles with light source and bumpmapping

Die Idee für dieses Experiment kam mir als ich bei Oleg Pashkovsky die „Animation with code #12“ sah und mich an ein älteres meiner Experimente erinnerte.
Das Ziel war nun eine Art Kombination beider Experimente. Ich wollte es ermöglichen einen ähnlichen Look zu erhalten wie bei Oleg und gleichzeitig verschiedene Planetoiden im dreidimensionalen Raum zu visualisieren.
Mit meinen vergangenen 3D Partikelexperimenten war bereits der Grundstein gelegt. Es blieb nur ein großes Problem. Für die Szene brauchte ich eine Lichtquelle. Und genau eine solche Lichtquelle hatte ich bisher noch nicht in meine Experimente mit implementiert. Da ich bei den Canvas Experimenten auf 3D Frameworks wie z.B. Three.js verzichte, musste ich eine Lösung finden das Ganze von Grund auf neu zu schreiben. Mein Glück, ich hatte noch das Buch „Foundation HTML5 Animation with JavaScript“ (Affiliatelink) von Keith Peters im Bücherregal stehen. Hier fand ich einen simplen Ansatz für eine rudimentäre Umsetzung einer Lichtquelle die nicht zu viel Rechenleistung beansprucht. 

var dotProd = particle.vx * light.x + particle.vy * light.y + particle.vz * light.z;

var normMag = Math.sqrt( particle.vx * particle.vx + particle.vy * particle.vy + particle.vz * particle.vz );

var lightMag = Math.sqrt( light.x * light.x + light.y * light.y + light.z * light.z );

var lightFactor = ( Math.acos( dotProd / ( normMag * lightMag ) ) / Math.PI ) * light.brightness;

Darüber hinaus sind in diesem Experiment weitere Neuerungen zu sehen die ich so bisher noch nicht umgesetzt hatte. Wenn man sich den Erdball aus meinem alten Experiment anschaut, dann sieht man die wenig schöne Verteilung der Partikel zur Abbildung des Planetoiden. Die jetzige Verteilung der Partikel ist da deutlich homogener. Aber auch hierbei gab es ein Problem. Die Platzierung der Partikel war Abhängig von den Koordinaten der Textur. Die damals eingesetzte Methode um Pixel-Koordinaten in Latitude und Longitude umzurechnen und dann auf eine Sphere zu mappen war also hinfällig. Die Lösung war der umgekehrte Weg. Ich erstelle die Sphere für den Planetoiden und hole mir dann erst die nötigen Pixel-Koordinaten zum Auslesen der Farbwerte aus der Textur. Die Lösung hierfür sind UV-Koordinaten. Mit erstaunlich wenig Mathe kommt man auf diesem Weg an 2D Koordinaten aus einer 3D-Sphere. 

p = p.normalize();

var u = Math.atan2( p.x, p.z ) / ( 2 * Math.PI ) + 0.5; 
var v = Math.asin( p.y ) / Math.PI + 0.5;

var x = u * texture.width;
var y = v * texture.height;

Und zu guter Letzt wollte ich dann noch Bumpmapping implementieren, damit die Oberfläche der Planetoiden plastischer und detailreicher erscheint. Normalerweise geschieht das über eine Bumpmap, oder auch height map genannt. Ich bin für dieses Experiment aber einen ganz anderen Weg gegangen. Ich berechne für jedes Partikel einen Wert, der auf der Basis der Farbe des Partikels basiert. Daraus ergibt sich ein Prozentwert. Eine Art Schwellenwertverfahren. Weiß ist also 100% und schwarz ist 0%. Mit einer simplen Formel multipliziere ich jetzt diesen Prozentwert in Kombination mit einer Variablen für die Stärke des Effekts zu den Koordinaten der Partikel. Auf diese Weise bekommen hellere Partikel einen größeren Radius als dunkle Partikel. Ein z.B. ein dunkles Tal auf dem Planetoiden ist somit also tatsächlich tiefer als ein heller Berg. Im Gegensatz zum klassischen Bumpmapping nehme ich in diesem Experiment also sehr wohl Einfluss auf die Geometriekomplexität. Da ich aber keinen Namen für diesen von mir eingesetzten Weg habe wird hier einfach, und vielleicht fälschlicher Weise, von Bumpmapping gesprochen.

var threshold = ( particle.color.r + particle.color.g + particle.color.b ) / 3;

var percent = threshold / 255;

var distance = ( percent / bumpScale ) + 1;

particle.x *= distance;
particle.y *= distance;
particle.z *= distance;

Genug erzählt. Komment wir endlich zum Experiment. Ich empfehle wie immer das Experiment in einem neuen Browser Tab zu öffnen. Ihr könnt es euch aber auch gleich hier unterhalb auf dieser Seite anschauen. Über den Button „Open Controls“ könnt ihr diverse Einstellungen vornehmen und verschiedene Texturen laden.



Die kleine Sphere in diesem Experiment symbolisiert die Lichtquelle. Verschwindet diese Lichtquelle hinter dem Planetoiden wird sie durch ein kleines rotes Kreuz visualisiert.
Ihr könnt mit Hilfe der Einstellungen die Anzahl der Partikel auf bis zu 125000 steigern. Auf diese Weise lässt dich der Detailgrad erhöhen, aber dafür kann die Performance leiden. Falls euer Rechner schon etwas älter ist könnte es also auch sinnvoll sein die Anzahl zu verringern. Ansonsten könnt ihr, wie bei meinen anderen Experimenten auch, die Szene abhängig von eurer Mausposition drehen. Für User mit mobilen Geräten und Touchscreen sind Touch-Events implementiert mit denen ihr die Szene ebenfalls steuern könnt. 
Die Texuren für den Planetoiden kommen von Planet Texture Maps und von Robert Stein III. Die Texturen habe ich lediglich in der Größe angepasst. Ansonsten entsprechen sie den Originalgrafiken.
Verlinkungen zu Amazon in diesem Blogpost sind so genannte Affiliate Links.

Tornado Simulation

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.
 

Up to 1.572.864 Particles with custom Displacement Shader

Bei diesem Experiment habe ich seit längerer Pause mal wieder mit ThreeJS gearbeitet.
Nach den ganzen Canvas Experimenten zuletzt war es mal wieder an der Zeit auf die volle Leistung von WebGL Zugriff zu haben.
Ich habe dazu mein „Distorted Sphere“ Canvas Experiment für ThreeJS portiert.
Wo bei den Canvas Experimenten bei 50.000 bis maximal 100.000 Partikeln Schluss war, geht es nun auch mit bis zu 1.572.864 Partikeln, und dass bei 60FPS (auf einer flotten Maschine).
Ich habe dazu meine ersten (Displacement Particle) Shader geschrieben, damit die ganzen Berechnungen nicht auf der CPU, sondern der GPU berechnet werden. Die beiden Shader (vertex und fragment) sind bestimmt noch nicht perfekt, aber ich stell die euch hier weiter unten zur freien Verfügung. 

Die Partikel habe ich mit Hilfe der „Points“-Klasse, dem ShaderMaterial und der BufferGeometry von ThreeJS realisiert. Auch hier gibt es die entscheidenen Code-Schnipsel weiter unten mit dazu. Die Berechnung, bzw. Anordnung, der Partikel wird hier nicht näher erklärt, aber dafür seht ihr wie ihr Partikel adden könnt und was nötig ist um diese mit den beiden Shadern zu animieren.
 
Wie immer könnt ihr über das Menü diverse Einstellungen vornehmen und so das Experiment aktiv beeinflussen. Die Steuerung erfolgt per Maus (Klick + Drag und Srollrad) oder Touch-Gesten.

Hier geht es direkt zum Experiment. Besonders zu empfehlen für Mobile User/Touch Devices!
Der Fullscreen-Modus funktioniert im Moment leider nur im Chrome Browser fehlerfrei.

Hier die beiden Shader (vertex und fragment):

uniform float size;

varying float distance;
uniform float distanceMax;

uniform float amplitude;
uniform float d;
uniform float pi;

varying vec3 v;

void main() {

    float x = position.x;
    float y = position.y;
    float z = position.z;

    distance = cos( x * d * pi ) * cos( y * d * pi ) * cos( z * d * pi ) * amplitude;

    v = vec3( x, y, z );
    v = normalize( v );
    v *= distance;

    vec3 pos = position + v;

    gl_PointSize = size;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );

}

varying float distance;
uniform float distanceMax;

uniform int colorScheme;

void main() {

    float percent = ( distance + distanceMax ) / ( distanceMax * 2.0 );

    if ( colorScheme == 0 ) {

        gl_FragColor = vec4( 1.0, percent, 0.0, 1.0 );

    } else if ( colorScheme == 1 ) { 

        gl_FragColor = vec4( 1.0 - percent, 1.0 - percent, 1.0 - percent, 1.0 );

    } else if ( colorScheme == 2 ) { 

        gl_FragColor = vec4( 0.0, percent, 1.0 - percent, 1.0 );

    } else if ( colorScheme == 3 ) { 

        gl_FragColor = vec4( percent, 0.0, 0.0, 1.0 );

    } else if ( colorScheme == 4 ) { 

        gl_FragColor = vec4( 0.0, percent, 0.0, 1.0 );

    } else if ( colorScheme == 5 ) { 

        gl_FragColor = vec4( 0.0, 0.0, percent, 1.0 );

    } else if ( colorScheme == 6 ) { 

        gl_FragColor = vec4( percent, 0.0, 1.0 - percent, 1.0 );

    } else if ( colorScheme == 7 ) { 

        gl_FragColor = vec4( 1.0 - percent, percent, percent, 1.0 );

    }

}

Und hier die entscheidene Code Passage zum erstellen der Partikel:

var geometry = new THREE.BufferGeometry();

var positions = new Float32Array( particles * 3 );

var index = 0;

for ( var i = 0, l = positions.length; i < l; i += 3 ) {

    // positions

    var phi = Math.acos( -1 + ( 2 * index ) / particles );
    var theta = Math.sqrt( particles * Math.PI ) * phi;

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

    positions[ i     ] = x;
    positions[ i + 1 ] = y;
    positions[ i + 2 ] = z;

    index++;

}

geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

uniforms = {

    amplitude: { type: 'f', value: 0 },
    d: { type: 'f', value: d },
    pi: { type: 'f', value: Math.MATHPI180 },
    distanceMax: { type: 'f', value: sinusMaxAmplitude },
    size: { type: 'f', value: particleSize },
    colorScheme: { type: 'i', value: colorScheme }

}

var shaderMaterial = new THREE.ShaderMaterial( {

    uniforms: uniforms,
    vertexShader: document.getElementById( 'vertexshader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentshader' ).textContent

} );

points = new THREE.Points( geometry, shaderMaterial );

scene.add( points );

An dieser Stelle wird der Wert für die Amplitude in der render Function an die Shader übergeben:

uniforms.amplitude.value = sinusAmplitude;

Distorted Sphere

Ein weiteres kleines Experiment mit Partikeln.
Dieses Mal habe ich aus Partikeln eine Sphere „geformt“, die mit Hilfe der Sinus-, bzw. Kosinusfunktion deformiert wird.
Im Prinzip ist dieses Experiment eine Fortführung vom „Sinus Landscape“ Experiment. Nur wird in diesem Fall keine Plane, sondern eine Sphere deformiert. 

Die Herausforderungen hierbei waren die Partikel, egal welche Anzahl, gleichmäßig auf der Sphere zu verteilen und natürlich das Anwenden der Kosinusfunktion auf die Sphere. Wobei sich letzteres als erstaunlich einfach herausstellte, weil bereits fast alles aus dem „Sinus Landscape“ Experiment gegeben war. Ich musste lediglich noch die z-Position (neben x und y) mit in die Berechnung für die Amplitude/Höhe der Sinuswellen mit einbeziehen.

Aber seht einfach selbst: Mit Hilfe der Einstellungen, die ihr unter „Open Controls“ findet, könnt ihr den Grad der Deformierung frei bestimmen. Unter dem Punkt „Sphere Settings“ könnt ihr die Anzahl an Partikeln bestimmen, die Stärke/Höhe der Deformationen, die Wiederholungen/Anzahl der Deformationen, den Radius der Sphere, die Animation pausieren und die Geschwindigkeit der Animationen steuern.

Die Einstellungen unter dem Punkt „Display Settings“ sind euch bestimmt schon aus den anderen Experimenten vertraut. Hierbei besonders interessant sind „Invert Output“ und „Pixel Size“.
Wie immer gilt, einfach mal mit den Reglern spielen und schauen was passiert. 
 
Per Mausklick/Touch auf die Sphere wechselt ihr durch verschiedene Farbeschemen. Die Drehung der Sphere bestimmt ihr mit der Position eurer Maus, bzw. ist abhängig von der Position eures Fingers, wenn ihr mit einem Touch-Device unterwegs seid.

Falls ihr das Experiment in einem neuen Fenster betrachten wollt (besonders zu empfehlen für Touch-Devices und User mit mobilen Endgeräten), dann klickt einfach hier.

Und hier noch ein recht schöner Screenshot von der Sphere mit veränderten Einstellungen:

Und noch ein Screenshot, wieder mit anderen Einstellungen:

Sound Visualizer V2

Auf Basis von meinem ersten Canvas Sound Visualizer habe ich eine neue Version erstellt.
Wie gehabt könnt ihr die Szenerie mit der Maus drehen und so die 20 unterschiedlichen 3D-Modelle von allen Seiten betrachten. 

Mit einem Klick wechselt ihr nicht nur die Modelle, sondern ändert auch das Farbschema. Alles Weitere geschieht von allein. Ihr könnt also Einfluss nehmen, aber müsst es nicht. Der Sound Visualizer kann euch auch ohne Interkation unterhalten.
Bis auf das Gesicht werden alle Modelle dynamisch erstellt und dank diverser Zufallsparameter nehmen bestimmte Modelle bei jedem Start neue Positionen usw. ein, weshalb sich jedes Mal ein neues Bild ergibt. Für mich war es in diesem Fall besonders schwierig einen schönen Übergang beim Wechsel zwischen den Modellen zu realisieren, aber im Endeffekt ist das ganz gut gelungen wie ich finde. 

Die verschiedenen Modelle bestehen jeweils aus 32768 Partikeln. Bei bestimmten Modellen, wie z.B. beim Gesicht, werden zusätzliche Partikel mit angezeigt, was die Gesamtzahl auf bis zu 65536 Partikel erhöht die gleichzeitig dargestellt und berechnet werden.
Jedes einzelne Partikel reagiert in einer bestimmten und vorher definierten Art und Weise auf den Audio Input. Dadurch und in Verbindung mit den unterschiedlichen Farbschemen entstehen in der Regel ziemlich einzigartige Bilder. 

Bitte gebt dem Sound Visualizer etwas Zeit zum Laden. Bei Interesse/Gefallen empfehle ich den kompletten Song durchlaufen zu lassen, damit ihr alle Modelle und Farben im Einsatz sehen könnt.
Falls euch der Song „Sleepless“ von „Hypp fractal“ aus dem Album „Glow“ nicht gefällt, dann könnt ihr über das Menü eure eigenen MP3´s laden und schauen wie sich der Sound Visualizer dazu verhält. 

Generell könnt ihr über das Menü diverse Einstellungen vornehmen. Der Fullscreen Mode ist dabei etwas mit Vorsicht zu genießen, da es sehr viel Perfomance kostet die Canvas auf Bildschirmgröße darzustellen. Mit einem flotten Rechner sollte das aber gut funktionieren.
 
Mobile und Internet Explorer User gehen leider leer aus. Das liegt nicht an der Engine selbst, also den Partikeln usw., sondern daran, dass die Browser auf mobilen Endgeräten kaum, oder nur sehr schlecht, Audiowiedergabe unterstützen. Und in diesem Fall wird die Soundquelle nicht nur wiedergegeben, sondern auch analysiert. Ich hoffe das wird mit zukünftigen Browser Versionen besser und einheitlicher werden, aber bis dahin gibt es bei mobilen Endgeräten leider nichts auf die Ohren und somit können die Partikel auch nicht reagieren. Probiert es aber gerne mal aus und gebt mir Feedback falls es läuft. Aber da es sich hier nur um ein kleines Experiment handelt wollte ich nicht zu viel Zeit investieren das auch auf mobilen Geräten ans Laufen zu bekommen.

Ihr könnt den Sound Visualizer direkt hier auf der Seite starten. Am besten aber folgt ihr dem Link hier und öffnet das Ganze in einem neuen Browser Fenster.

Sinus Landscape

Und wieder ein kleines Experiment.
Mit Hilfe der Sinus-, oder der Cosinusfunktion wird hier eine Art Landschaft erstellt. Über diverse Parameter lässt sich das Erscheinungsbild der Landschaft frei konfigurieren.
Per Mausklick könnt ihr zwischen verschiedenen Farbeschemen switchen. Die Rotation der Landschaft ist, wie bei den älteren Experimenten hier, auch wieder abhängig von der Mausposition. Aber nicht nur die Rotation, sondern auch die Position der Landschaft selbst ist abhängig von der Mausposition.
Für dieses Experiment wieder mit im Programm, das z-Sorting. Je nach Ausgabegerät solltet ihr das z-Sorting aber nicht bei mehr als 5000 Partikeln aktivieren.  Das Sortieren kostet einfach noch immer sehr viel Performance. Vielleicht finde ich hier noch eine bessere Lösung, aber bis dahin muss es so gehen. Falls jemand Ideen oder Vorschläge zu dem Thema hat gerne hier in den Kommentaren schreiben. Weiter unten gibt´s die Function mit der ich das z-Sorting  erledige.
Schaut euch das Experiment direkt hier an, oder, speziell wenn ihr mit einem mobilen Gerät unterwegs seid, folgt bitte diesem Link hier. Viel Spaß.


Und hier noch die Function die für das z-Sorting verantwortlich ist. Das Array particleHolder beinhaltet alle Partikel die es darzustellen gilt, bzw. enthält die Partikel die sortiert werden müssen:

model.particleHolder = model.particleHolder.sort( function( a, b ) {

    return ( b.vectorPosition.z - a.vectorPosition.z );

} );

Pumping Torus Knot

Bei diesem Experiment wird ein Torusknoten abgebildet der Flüssigkeit durch sich durch pumpt. Die Geometrie dazu habe ich größtenteils von three.js übernommen, genauer gesagt aus der TorusKnotGeometry.js. Ich musste nur ein paar Parts umschreiben und habe dann noch das Pumpen ergänzt, welches ich mit einer simplen Sinus Kurve realisiert habe. Hier gibt es eine schöne Erklärung zum Thema Torusknoten in der auch die Gleichung dahinter erklärt wird.
Beim Experiment gibt es eine große Menge an möglichen Einstellungen. Ich will dieses Mal nicht zu sehr ins Detail gehen, bzw. die meisten Einstellungen sollten selbsterklärend sein. Probiert einfach mal ein paar Einstellungen aus und spielt an den Reglern.
Ich habe jetzt auch endlich Nutzer mit mobilen Endgeräten berücksichtigt. Neben einer verbesserten Darstellung und besonderen Einstellungen kann das Experiment nun auch über Touch Events gesteuert werden. Ben Centra hatte dazu dieses lesenswerte Tutorial geschrieben: Using Touch Events with the HTML5 Canvas.
Schaut euch das Experiment direkt hier an, oder, speziell wenn ihr mit einem mobilen Gerät unterwegs seid, folgt bitte diesem Link hier. Viel Spaß.

 

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ß.

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.