Scrubbable number

# Things to try

• Drag the W slowly across a few centimetres, then quickly across the same distance. The quick drag moves the value further, and the diamond on the curve shows the speed that did it.
• Set p to 1.00. The curve lies down on the reference line, and every pixel is worth one base step at any speed.
• Turn on Show the trick and shake the pointer as you drag. The raw samples jump about; the moving average through them barely flinches.

# How it works

Each pointer event reports how far the pointer moved and when. Dividing one by the other gives a raw speed in px/ms, and it is noisy: events arrive unevenly and hands shake. The figure smooths it with an exponential moving average, in which each new sample counts for 30%.

The smoothed speed sets what a pixel is worth. The value changes at sign(v) * base * abs(v) ** p per millisecond, which works out to base * abs(v) ** (p - 1) per pixel moved. At p = 1 the speed cancels out. Above 1, slow drags get finer and fast ones coarser: with p at 1.5 and base 1, a drag at 0.25 px/ms is worth 0.5 per pixel and one at 2.25 px/ms is worth 1.5.

Shift multiplies each change by 10 and Alt by 0.1. Snap to 8 rounds the shown value to the nearest multiple of 8, while the drag keeps its own unrounded total, so small movements still add up.

With pointer lock the cursor disappears and the browser reports movement deltas instead of positions, so a scrub can run past the edge of the screen. Without it, and always for touch and pens, the label captures the pointer instead.

# Keyboard