How Sweet Builds Interactive 3D Physics Demos: The Double-Slit Experiment

We asked our AI agent to build an interactive 3D visualization of the double-slit experiment — one of the most famous demonstrations in quantum mechanics. Thirty minutes later, we had a fully explorable simulation running at sweetcli.com/demo/double-slit. Here's how it happened.

The Prompt

"Build a 3D double-slit experiment with Three.js. I want to see the interference pattern, fire individual photons, and explore the scene."

No design spec. No architecture document. Just a concept.

What Got Built

A single 27KB HTML file — no dependencies beyond the Three.js CDN — that contains:

A full 3D scene with a pulsing light source, a double-slit barrier with glowing edges, and a detection screen
Two visualization modes: continuous wave interference and particle-by-particle mode where individual photons build the pattern one dot at a time
Real physics: the intensity pattern follows the Fraunhofer diffraction formula: I(x) = sinc²(β) · cos²(α)
Full interactivity: drag to rotate, scroll to zoom, right-drag to pan. Sliders for slit width, separation, and wavelength (with true color mapping from 380nm violet to 780nm red)
Keyboard shortcuts: W for wave, P for particle, F to fire 100 photons, R to reset, 0 for top-down view

The Technical Breakdown

1. The Physics Engine

The core of the simulation is the intensity function:

function intensityAt(x, wavelengthNm, slitWidth, slitSep, screenDist) {
  const lambda = (wavelengthNm / 550) * 0.05; // normalize to scene units
  const a = slitWidth;
  const d = slitSep;
  const L = screenDist;
  const k = Math.PI / (lambda * L);

  const beta = k * a * x;
  const alpha = k * d * x;

  // Single-slit diffraction envelope: sinc²(β)
  const sinc = beta === 0 ? 1 : Math.sin(beta) / beta;
  const diffraction = sinc * sinc;

  // Double-slit interference: cos²(α)
  const interference = Math.cos(alpha) * Math.cos(alpha);

  return diffraction * interference;
}

This is the Fraunhofer far-field approximation. The sinc²(β) term is the diffraction envelope from each individual slit — this is what you'd see if you closed one slit. The cos²(α) term is the interference pattern from two coherent sources. Their product gives the characteristic pattern: bright fringes modulated by a broader envelope.

2. Particle Mode: Rejection Sampling

The particle mode is where things get interesting. Each photon needs to land on the screen with a probability proportional to the intensity function. Naively computing this distribution and sampling from it is expensive. Instead, we use rejection sampling:

const maxI = intensityAt(0, ...); // peak intensity at center
for (let attempt = 0; attempt < 100; attempt++) {
  const candidateX = (Math.random() - 0.5) * screenWidth * 1.2;
  const I = intensityAt(candidateX, ...);
  if (Math.random() * maxI < I) {
    targetX = candidateX;
    break;
  }
}

This picks random x-positions, accepts them with probability proportional to I(x)/I_max, and retries if rejected. In practice, 2-3 attempts suffice for most positions. The result: individual photon dots that, over thousands of hits, converge to the wave interference pattern — the very mystery that makes the double-slit experiment so profound.

3. Wavelength to Color

Each wavelength maps to a real visible color using a piecewise RGB function:

380–440nm: violet → blue
440–490nm: blue → cyan
490–510nm: cyan → green
510–580nm: green → yellow
580–645nm: yellow → red
645–780nm: red → deep red

With intensity falloff at the edges of the visible spectrum, the photons and wave pattern render in the correct color for the selected wavelength.

4. 3D Scene Composition

The Three.js scene uses:

ACES Filmic tone mapping for cinematic HDR
Fog for depth cues
PCFSoft shadow maps for realistic shadows
Custom glow meshes on the light source (pulsating sphere + outer halo)
Tube geometry for curved beam guide lines from source → slit → screen
OrbitControls for free exploration with damping

The barrier is built dynamically from BoxGeometry sections, recalculated whenever slit width or separation changes. Glowing edge highlights mark the slit boundaries.

5. The Accumulation Canvas

In particle mode, each photon hit is recorded on a hidden canvas:

function recordHit(targetX, targetY, color) {
  accumCtx.fillStyle = `rgb(${r},${g},${b})`;
  accumCtx.globalAlpha = 0.6;
  accumCtx.beginPath();
  accumCtx.arc(px, py, 2.5, 0, Math.PI * 2);
  accumCtx.fill();
  // Add glow
  accumCtx.globalAlpha = 0.2;
  accumCtx.arc(px, py, 5, 0, Math.PI * 2);
  accumCtx.fill();
}

This canvas is then composited onto the main screen texture, which is mapped onto a Three.js plane. The result: photon dots that accumulate persistently and are rendered in real 3D space.

What Makes This Special

This isn't a pre-rendered animation. It's a real-time physics simulation that you can manipulate:

Change the slit width and watch the diffraction envelope widen or narrow
Change the separation and watch the fringe density change
Change the wavelength and watch the pattern scale — with correct color
Switch to particle mode and watch quantum randomness construct the interference pattern, one photon at a time
Orbit around the scene and see the geometry from any angle

The Agent's Process

The agent built this incrementally:

Scene scaffolding: renderer, camera, lights, orbit controls
Geometry: barrier with dynamic slit walls, source sphere, screen plane
Physics: intensity function, screen pattern rendering via canvas → texture
Particles: rejection sampling, animated flight paths, accumulation buffer
Polish: glow effects, beam guides, fog, tone mapping, mobile responsive CSS

Each step was validated. The agent caught and fixed issues in real time — wrong coordinate systems, missing canvas updates, and edge cases in the intensity math.

Total development time: ~30 minutes.

Try It Yourself

👉 sweetcli.com/demo/double-slit

Drag to rotate. Scroll to zoom. Press P for particle mode and watch the pattern emerge from randomness.

The Bigger Picture

This is what AI-native development looks like. Not a code-generator that spits out boilerplate — but an agent that reasons about physics, geometry, color theory, and UX simultaneously. It writes the math, builds the scene, debugs the rendering pipeline, and deploys to production.

And this is just one demo. Imagine scaling this workflow across:

Educational physics simulations (quantum tunneling, relativity visualizers)
Data visualization (3D network graphs, geospatial heatmaps)
Interactive art (generative landscapes, particle symphonies)
Engineering tools (circuit simulators, structural load visualizers)

The same agent that built this double-slit experiment can build any of those. The limiting factor isn't technical ability — it's imagination.

Try the demo: sweetcli.com/demo/double-slit
Built by Sweet Agent · sweetcli.com