HTML5 Particleline is an interactive canvas study of radial pointer forces and spring motion. A field of filled and outlined circles rests on a horizontal line. Moving the pointer through the field pushes nearby particles away; after the pointer leaves, every particle eases back to its own resting position.
A Local Radial Field
Let \(h=(h_x,h_y)\) be a particle's resting position and \(m=(m_x,m_y)\) the pointer. Their distance is
\[ d=\sqrt{(h_x-m_x)^2+(h_y-m_y)^2}. \]The pointer affects only particles inside a field radius \(R\). For field strength \(k\), the displaced target is
\[ t=h+\frac{h-m}{d}(R-d)k,\qquad d<R. \]The direction \((h-m)/d\) points away from the pointer, while \(R-d\) makes the effect strongest near its center and zero at its boundary. Outside the field, the target is simply \(t=h\).
Frame-Rate-Independent Spring Motion
Jumping directly to the target would produce rigid motion. Instead, each frame blends the current position \(p\) toward \(t\). With elapsed time \(\Delta t\) and response rate \(\lambda\), the blend factor is
\[ \alpha=1-e^{-\lambda\Delta t},\qquad p_{new}=p+\alpha(t-p). \]Exponential smoothing makes the response independent of display refresh rate. A 60 Hz screen and a 120 Hz screen therefore converge at the same rate in real time. The same mechanism smooths the ambient radius pulses so their starts and stops do not create visible jumps.
Drawing the Field
Most particles are solid circles with small radii; a few are larger rings drawn with varying stroke widths. The alternating gold and neutral palette makes overlaps legible against the dark canvas. The field uses one stable 900 by 480 coordinate system and scales as a whole, preserving circular geometry and pointer alignment at every displayed size.