A lamp panel of 400 neurons that repairs scribbled glyphs, until it stores too many.
A Hopfield network of 400 binary neurons, one per lamp, stores pixel glyphs as valleys in an energy landscape. Corrupt a memory and the neurons are visited one at a time in random order; each flips to agree with its local field, every flip lowers the energy, and the strip chart shows the state rolling downhill until it lands in the nearest valley. With Hopfield's 1982 Hebbian rule these correlated glyphs overload after about four memories, and corrupted inputs fall into spurious chimeras blended from several glyphs. Flip the switch to the modern dense associative memory, whose log-sum-exp energy makes each update a softmax-weighted vote over every memory (the same computation as transformer attention), and all 26 glyphs fit with room to spare.
Try it. Drag on the lamps to draw (right-drag erases) and let go to watch it settle. Click a stored glyph to corrupt and recall it, or a dim one to store it. Buttons or keys: M switches Classic and Dense, N adds noise, S stores your drawing, F forgets the newest memory, R resets, 1 to 9 recall.
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 Hopfield network 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. Use a dark background.
- The network is a 16x16 grid of neurons, each either +1 (on) or -1 (off). Draw each neuron as a square cell: bright when on, dark when off.
- Hard-code three or four simple patterns as 16x16 bitmaps (for example a heart, a ring, a cross and a letter), written as arrays of strings like "....####....".
- Store them with the Hebbian rule: the weight between neurons i and j is the sum over patterns of p[i] * p[j], divided by the number of neurons, with zero on the diagonal.
- Let me click a key to load a stored pattern with 25% of its cells flipped at random.
- Each frame, update about 20 neurons chosen at random: compute the local field h = sum of w[i][j] * s[j] and set s[i] to the sign of h. Flash a neuron briefly when it flips, so I can watch the memory repair itself.
Once that works, make it beautiful:
- Draw neurons as glowing round lamps, and fade their brightness toward the target so they warm up and cool down like filaments.
- Compute the energy E = -1/2 sum of w[i][j] s[i] s[j] and plot it as a scrolling line chart, so I can see it only ever goes down.
- Let me draw on the grid with the mouse, then release to let the network settle. Add a button that stores my drawing as a new memory, and show which stored pattern the state is closest to.
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 storing patterns until spurious mixture states appear, adding a modern dense associative memory mode with a softmax update, or comparing the Storkey learning rule.
