Particle Systems

Visualize large amounts of data points or simulate agent swarms.

Basic Particles

Simple point cloud. Adjust count to see performance.

Particles: 1000

const positions = useMemo(() => {
  const pos = new Float32Array(count * 3);
  for (let i = 0; i < count; i++) {
    pos[i * 3] = (Math.random() - 0.5) * 10;
    pos[i * 3 + 1] = (Math.random() - 0.5) * 10;
    pos[i * 3 + 2] = (Math.random() - 0.5) * 10;
  }
  return pos;
}, [count]);

<points>
  <bufferGeometry>
    <bufferAttribute attach="attributes-position" args={[positions, 3]} />
  </bufferGeometry>
  <pointsMaterial size={0.05} color="#4ecdc4" />
</points>

Agent Swarm

Simulated swarm behavior. Foundation for visualizing agent orchestration.

Agents: 50

// Swarm behavior with boids algorithm concepts
// - Separation: avoid crowding neighbors
// - Alignment: steer towards average heading
// - Cohesion: steer towards average position

useFrame((_, delta) => {
  agents.forEach(agent => {
    // Apply forces
    agent.velocity.add(separation).add(alignment).add(cohesion);
    agent.position.add(agent.velocity.multiplyScalar(delta));
  });
});

Data Flow Visualization

Particles flowing along paths. Represents data or token flow between nodes.

// Particles follow a path using progress (0-1)
const curve = new THREE.CubicBezierCurve3(start, cp1, cp2, end);

useFrame((_, delta) => {
  particles.forEach(p => {
    p.progress += delta * speed;
    if (p.progress > 1) p.progress = 0;

    const point = curve.getPoint(p.progress);
    p.position.copy(point);
  });
});