Proximity field

邻近场 · proximity-field

One pointer position drives a whole field of nearby elements.

A hit test gives only two states: under the pointer or not. A proximity field computes a distance weight for every point, then uses it for scale or radial displacement. The point directly under the pointer needs a stable fallback direction because its radial vector has zero length.

Formula

dᵢ = hypot(xᵢ − pointerX, yᵢ − pointerY)
wᵢ = max(0, 1 − dᵢ / radius)^exponent
positionᵢ += unit(radialVector) × push × wᵢ

Parameters

	This page	Mature libraries
radius	130 px	—Radius of influence.
exponent	2	—Higher values concentrate the response near the centre.
mode	scale / push / both	—

Doing it well

Compute every element with the same distance function, then map the result to scale, displacement, or other channels.www-motion/rewrite/lib/motion-kit.js:176–187
Supply a fixed direction when the radial vector has zero length; dividing by zero produces invalid coordinates.www-motion/rewrite/lib/motion-kit.js:179–185
Compute position and strength separately, then damp the displayed values so pointer movement feels continuous.www-motion/rewrite/lib/motion-kit.js:176–187

In our cases

Proximity fields appear in 22 studies and radial falloff in 19; together they cover 23 distinct studies. The moments attraction hole uses quadratic falloff to push nearby elements radially.

Reference implementation · basics.js

/** Influence of one pointer on many elements; returns 0..1 per element. */
export const field = (points, px, py, radius, exponent = 2) =>
  points.map(p => radialFalloff(Math.hypot(p.x - px, p.y - py), radius, exponent));

/** Influence of a point at distance d from a source of radius R: 1 at the centre, 0 at R. */
export const radialFalloff = (d, radius, exponent = 2) => (d >= radius ? 0 : (1 - d / radius) ** exponent);