Magnets on paper dusted with iron filings, drawn by line integral convolution.
Each bar magnet is a pair of opposite poles just inside its ends and each wire through the paper is a line current, so the field anywhere is an exact superposition of inverse-square and circular terms. For every pixel of a small grid the program follows the field line a short way in both directions and averages a sparse random texture of specks along it, a technique called line integral convolution, which smears each speck into a streak lying along the field. Speck density and streak length grow with field strength, so filings crowd the poles and lie loose and jumbled where the field is weak. A coarse pass keeps up while you drag and a sharp pass fills in a few rows per frame once things are still.
Try it. Drag a magnet's middle to move it or its ends to rotate it (the arrow keys turn it too), and double-click a magnet or wire, or press F, to flip its poles or reverse its current. Tap bare paper or press Space to shake the filings so they resettle. Add magnets with M and wires with W, and press N for the next layout. The compass follows your pointer.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a virtual school-lab experiment of iron filings around bar magnets with JavaScript and the HTML canvas element, rendered with line integral convolution. 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, and resizes with the window. Paint a warm paper color.
- Model each bar magnet as two opposite poles just inside its ends. The field at a point is the sum over poles of q (r - r_pole) / |r - r_pole|^3, with a small softening term so it stays finite.
- Work on a grid at half or quarter resolution. Store the normalized field direction and the field strength for every grid cell.
- Fill a second grid with sparse random specks (for example 1 where a random number is below a density, else 0).
- Line integral convolution: for every cell, step along the field direction about 10 cells forward and 10 backward, averaging the specks you pass. Turn the average into the alpha of a dark charcoal color, put it in an ImageData, and draw it scaled up over the paper.
Once that works, make it beautiful:
- Make the speck density and the streak length grow with field strength, so filings crowd the poles and lie loose where the field is weak.
- Draw the magnets as red and silver bars with N and S labels and soft drop shadows. Let me drag them to move, drag their ends to rotate, and double-click to flip.
- Add a shake button that re-randomizes the specks and grows the streak length from zero over a second, so the filings visibly resettle.
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 wires carrying current through the paper, a compass needle that follows the mouse, or animating the filings as real particles.
