Cosmic Particle Animation

This web project, "Cosmic Anomaly Visualizer," creates an interactive 3D animation of various cosmic phenomena using thousands of glowing particles. Viewers can explore a Pulsar, a Spiral Galaxy, and a Black Hole, each presented with a unique particle structure, color, and motion. An accompanying information panel provides detailed telemetry for the currently displayed anomaly, and users can navigate between the different cosmic objects with smooth, morphing transitions.

The project's structure is built with standard web technologies. The index.html file sets up the main layout, including a container for the 3D canvas, an information panel, and navigation buttons. The style.css file handles the visual presentation, applying a dark, space-themed aesthetic, positioning UI elements, and creating effects like a subtle vignette and a frosted glass look for the panels.

<div id="swarm-container"></div>
<div id="info-panel">
  <!-- ... info content ... -->
</div>
<div id="nav-container">
  <!-- ... navigation buttons ... -->
</div>

These HTML elements serve as containers for the 3D canvas, the information display, and navigation controls, respectively.

The core of the animation is powered by JavaScript, utilizing the Three.js library for 3D rendering. A large array of cosmicInfo objects stores all the descriptive text for each phenomenon. When a user interacts with the navigation buttons, the updateInfo function populates the #info-panel with relevant data, while the 3D scene prepares for a transition.

const cosmicInfo = [
  {
    name: "Pulsar (Neutron Star)",
    copy: "A highly magnetized, rapidly rotating neutron star...",
    form: "Hyper-dense core, twisting toroidal magnetic filaments...",
    palette: "Blinding magenta core, deep neon violet flux lines...",
    motion: "Violent rotational spin with oscillating magnetic sweeping."
  },
  // ... more objects
];

This JavaScript array stores all the descriptive text and properties for each cosmic phenomenon displayed in the info panel.

The particle system itself is defined using custom GLSL shaders. The vertexShader is crucial, containing functions like getPulsarPos, getGalaxyPos, and getBlackHolePos that mathematically define the unique 3D shape and movement of each cosmic object. It also handles the smooth morphing between these shapes by interpolating (mix) between the current and target particle positions based on a uMorphProgress uniform. The fragmentShader then renders each particle as a soft, glowing point, contributing to the overall ethereal visual effect.

// Inside vertexShader
vec3 getPulsarPos(float id, vec3 rnd) { /* ... logic ... */ }
vec3 getGalaxyPos(float id, vec3 rnd) { /* ... logic ... */ }
vec3 getBlackHolePos(float id, vec3 rnd) { /* ... logic ... */ }

void main() {
  vec3 p1 = getPos(uCurrentShape, aId, aRandom);
  vec3 p2 = getPos(uTargetShape, aId, aRandom);
  float morph = cubicInOut(uMorphProgress);
  vec3 finalPos = mix(p1, p2, morph);
  // ... further transformations and gl_Position
}

Inside the vertex shader, dedicated functions generate the base positions for each cosmic shape, and then mix is used to smoothly interpolate between the current and target shapes during transitions.

The animation loop, animate(), continuously updates the scene. It increments uTime for ongoing particle motion and morphProgress during transitions, passing these values as uniforms to the shaders. Post-processing effects, specifically UnrealBloomPass, are applied via an EffectComposer to create the intense glow around the particles, enhancing the cosmic visual. User interaction with OrbitControls allows for camera rotation, adding to the immersive experience.

function animate() {
  requestAnimationFrame(animate);
  const delta = clock.getDelta();
  const elapsedTime = clock.getElapsedTime();

  controls.update();

  if (isTransitioning) {
    morphProgress += delta * 0.45;
    // ... reset morphProgress if >= 1
  }

  material.uniforms.uTime.value = elapsedTime;
  material.uniforms.uMorphProgress.value = morphProgress;
  material.uniforms.uCurrentShape.value = currentShape;
  material.uniforms.uTargetShape.value = targetShape;

  composer.render();
}

This animate function is the heart of the application, continuously updating the 3D scene, managing morphing progress, and rendering the output using the post-processing composer.