PointerFilings

Options

paper #fbfaf4

css colour

The tray the filings are scattered on.

ink #8d8577

css colour

A filing lying flat, out where the field is weak.

accent #36362f

css colour

A filing standing up in a strong field. The pattern reads as much from this change in tone as from the alignment.

pitch 13

5 to 40

Cell size in CSS pixels. There is one filing per cell, so this is how thickly they are scattered.

length 0.42

0.1 to 1.2

Length of a filing where the field is strongest, measured in cells. Past about 0.9 they overlap into continuous lines, which is a field diagram rather than a tray of filings.

weight 0.055

0.01 to 0.2

Half the thickness of a filing, in cells.

reach 0.02

0.002 to 0.2

How far the magnet reaches before the filings stop caring. The falloff saturates rather than multiplying, so close to the magnet the marks stand fully up instead of running away to a few enormous ones.

jitter 0.6

0 to 1

How far each filing is thrown off the centre of its cell. At 0 the grid they are organised by becomes visible, which no scattered tray has.

tilt 0

0 to 360

Angle of the bar magnet in degrees. Turns the whole pattern, the way turning the magnet on the bench would.

grain 0.4

0 to 1

Paper tooth under the filings.

What it needs

Dependencies

None at all

Browser

WEBGL2

Frame budget

~1.8 ms · 1 context

Pinned to

v0.11.0

• The real dipole expression, not spokes radiating from a point. Filings align with the field rather than pointing at the magnet, and a dipole field loops: out of one pole, round, and back into the other
• The field is sampled once per filing rather than per pixel. Per pixel each segment bends into a curve, which no single filing does
• Window pointer scope, so the filings have begun to turn before the cursor reaches the element
• One WebGL2 context, one full-screen triangle, no buffers and no attributes
• Nine cells per pixel, each one dipole evaluation and one segment distance
• Nothing is uploaded per frame. Only uniforms change
• Cost is flat: every cell does the same work wherever the magnet is
• Thousands of small hard-edged marks are difficult for a video codec, so the recording carries a per-item quality override. The effect itself is unaffected