Kohonen maps sew a quilt from fabric dyes and drape a sheet over 3D point clouds.
Two self-organizing maps learn side by side. Each training sample finds its best matching neuron, which pulls itself and its grid neighbors toward the sample with a Gaussian falloff; the radius and learning rate shrink over time, so the map orders itself globally first and then refines. On the left, 576 neurons learn RGB colors from a palette of dyes and turn from random scraps into a quilt of smooth color fields, with seams darkened by the U-matrix where neighbors disagree and each dye sewn on as a button at its best matching patch. On the right, a sheet of neurons learns 3D positions from a torus, a Swiss roll or a saddle and unfolds itself across the cloud, colored by grid position so you can see that neighbors stay neighbors (and where the topology cannot match, it folds).
Try it. Click the quilt to add a new dye (its hue depends on where you click) and watch the map reheat and make room for it; Back to scraps restarts it. Drag the sheet to turn it and pick a cloud with the chips. Keys: Space adds a dye, R restarts both, T or 1 to 3 change the cloud, arrows turn the view.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a self-organizing map that learns colors and draws itself as a quilt, 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 has a dark charcoal background.
- Create a 20 x 20 grid of neurons, each holding a random RGB color (three numbers between 0 and 1).
- Pick a palette of about 8 fabric dye colors as the training data.
- Each frame, run about 20 training steps: choose a random dye (plus a little noise), find the best matching unit (the neuron with the smallest color distance), and move every neuron toward the sample by rate * exp(-d^2 / (2 * sigma^2)), where d is its grid distance to the best match.
- Shrink sigma from about 8 to 1 and the rate from 0.5 to 0.03 over the first few thousand steps.
- Draw the grid as square patches in their colors, with a thin dark seam between them.
Once that works, make it beautiful:
- Give the patches a quilted look: a soft highlight in the middle, darker seams, dashed running stitches and the odd polka dot or stripe print.
- Darken each seam by how different the two neighboring colors are (the U-matrix), so cluster borders show.
- Click the quilt to add a new dye color and briefly raise sigma, so the map visibly reorganizes to make room.
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 sewing a button for each dye onto its best matching patch, training a 3D sheet of neurons on a point cloud like a torus, or exporting the finished quilt as an image.
