A diffusion model trains live and condenses pure noise into whatever shape you draw.
This is a real denoising diffusion model, the technique behind modern image generators, shrunk to two dimensions so you can watch it think. A small MLP with hand-written backprop and Adam learns to predict the noise that was mixed into points on the target shape at every noise level of a cosine schedule, seeing the point through random Fourier features and the time through a sinusoidal embedding. Thousands of particles then start as pure Gaussian noise and run the reverse process with an exponential moving average of the weights, either DDIM (deterministic) or DDPM (fresh noise every step), and every step of every path is kept and drawn as an ink trail running from violet noise to golden data. The faint strokes behind them are the learned score field at the current noise level, broad at first and finely structured near t = 0, and after each pass the forward process dissolves the result back into the exact noise the next pass starts from.
Try it. Draw any shape with the mouse or a finger and the model retrains on it within seconds. Pick Star, Spiral, Heart or Smile from the chips (or keys 1 to 4), switch between DDIM and DDPM sampling (D), drag the timestep slider or press the left and right arrows to scrub the trajectories forwards and backwards in time, Space to resample from new noise, and F to hide the score field.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a tiny diffusion model that trains and samples live in the browser, using JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a dark canvas that fills the window and stays sharp on high-DPI screens.
- Create a 2D dataset: about 1,500 points along the outline of a five-pointed star, with a little Gaussian jitter. Keep coordinates roughly in [-1.5, 1.5].
- Write a small multilayer perceptron by hand with Float32Arrays: inputs are x, y and a few sin/cos features of the time t, then two or three hidden layers of 32 to 64 SiLU units, and 2 outputs. Implement the forward pass, backpropagation and the Adam optimizer yourself.
- Use a cosine noise schedule abar(t) for t in [0, 1]. Each training step: take a batch of 64 data points, pick a random t for each, mix in noise as x_t = sqrt(abar) * x0 + sqrt(1 - abar) * eps, and train the network to predict eps with mean squared error. Run a few steps every frame, keeping each frame under about 8 ms.
- Sampling with DDIM: start 1,500 particles from pure Gaussian noise and take 50 steps from t = 1 to t = 0. At each step predict eps, estimate x0 = (x_t - sqrt(1 - abar) * eps) / sqrt(abar), clip it, and move to sqrt(abar_next) * x0 + sqrt(1 - abar_next) * eps. Animate one step every few frames and draw the particles.
Once that works, make it beautiful:
- Store every particle's path and draw it as a faint additive trail whose color runs from violet (noise) to gold (data).
- Feed the network random Fourier features of the position (sin and cos of random projections) so it learns sharp shapes much faster.
- Let me draw a new target shape with the mouse: sample points along my strokes and keep training the same network on them.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as DDPM sampling with fresh noise each step, a slider to scrub the trajectories through time, or conditioning the model on a class label so it can draw several shapes on request.
