Time Particle Animation

AI Overview: Sands of Time Particle Animation

This project is an interactive 3D visualization titled "Sands of Time." It features a massive system of 300,000 glowing particles that flow in a continuous loop, forming the elegant shape of a cosmic hourglass. The project creates a cinematic atmosphere using deep gradients, glowing "glass" UI elements, and a central core that pulses with light. Users can rotate the camera to view the particle flow from any angle and interact with the scene using an "Energize" button.

The animation is built using Three.js and custom GLSL shaders. Instead of calculating the position of every particle on the CPU (which would be very slow), the project offloads the math to the GPU. Each particle is assigned a set of random values that determine its starting position and speed, while a vertex shader calculates its movement in real-time based on a mathematical formula for a hyperboloid (hourglass) shape.

const params = {
  numParticles: 300_000,
  numThreads: 400,
  particleSize: 12.0,
  flowSpeed: 0.20,
  // ... other configuration settings
};

The code uses a configuration object to manage the simulation, allowing for high-density visuals with hundreds of thousands of particles.

To create the hourglass effect, the vertex shader uses a specific function to calculate the radius of the particle flow based on its vertical position. As particles move from the top to the bottom, they narrow at the "neck" and flare out at the ends. A "twist" variable is also applied to give the sand a spiraling, vortex-like motion.

float radiusAtY(float y, float a, float b) {
  return a * sqrt(1.0 + (y*y) / (b*b));
}

This GLSL function defines the mathematical curve of the hourglass, ensuring particles stay within the desired 3D bounds.

Interaction is handled through a "Pulse" system. When the user clicks the "Energize" button, a time-stamp is sent to the shader. This triggers a wave of bright, fiery light that travels through the particle field and expands the central core. To enhance the visual quality, the project uses a "Post-processing" pipeline, adding a Bloom effect to make the bright colors bleed into the darkness and FXAA to keep the edges smooth.

button.addEventListener('click', () => {
  const currentTime = clock.getElapsedTime();
  particleMaterial.uniforms.uPulseTime.value = currentTime;
  pulseStart = currentTime;
});

This event listener connects the HTML button to the 3D scene by updating "uniform" variables that the shader uses to render the energy pulse.