Exact GP posteriors painted as watercolor bands with inked function samples.
Every observation updates an exact Gaussian process posterior: the kernel matrix plus noise is Cholesky factored, the mean and full covariance over a grid of x values come from triangular solves, and that covariance is factored again so each inked curve is mean plus L times a normal vector. The samples drift because each one rotates between two fixed normal vectors, which keeps every frame an exact posterior draw. The one, two and three sigma bands are layered watercolor washes on procedurally made graph paper. In Bayesian optimization mode, closed-form expected improvement is painted in ochre along the bottom and its peak decides where the next ink drop falls on a hidden function, with the length scale and amplitude refit by maximizing the marginal likelihood after each query once a few points are in.
Try it. Pick a kernel (RBF, two Matérns, periodic, linear plus RBF, locally periodic) and drag the length scale, amplitude and noise sliders. In free mode click to ink a point, drag points to move them and right-click to erase; in Bayes opt mode click anywhere to probe the hidden function yourself. Hover to see the predictive distribution at that x. Keys: 1 to 6 kernels, F fits hyperparameters, B switches mode, H hides the truth, Space takes the next query.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive Gaussian process regression demo with 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 canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Map x from 0 to 1 across the width and y from -3 to 3 up the height.
- Clicking adds an observation (x, y) at the pointer. Use an RBF kernel k(a, b) = s^2 exp(-(a - b)^2 / (2 l^2)) with l = 0.1, s = 1 and a small noise variance.
- Write a Cholesky factorization yourself. Factor K + noise * I for the observations, solve for alpha = K^-1 y with two triangular solves, and evaluate the posterior mean and variance on a grid of about 100 x values.
- Draw the posterior mean as a line, a shaded band at plus or minus two standard deviations, and the observations as dots.
Once that works, make it beautiful:
- Compute the full posterior covariance on the grid, Cholesky factor it (add a tiny jitter to the diagonal), and draw 20 posterior samples as mean + L z with z standard normal.
- Animate the samples smoothly: give each one two fixed normal vectors a and b and use z = a cos(t) + b sin(t), which is still standard normal for every t.
- Give it a sketchbook look: cream paper, faint graph lines, translucent overlapping bands for one, two and three sigma drawn with multiply blending, and thin ink-colored samples.
- Add keys to switch between RBF, Matern 5/2 and periodic kernels and to change the length scale, and let me drag points around.
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 fitting the hyperparameters by maximizing the log marginal likelihood, Bayesian optimization with expected improvement on a hidden function, or a 2D version drawn as a heat map.
