A distance function turns two positions into one number: their straight-line separation. For points (x1, y1) and (x2, y2), first find the horizontal and vertical differences, then apply the Pythagorean theorem: distance = Math.sqrt(dx * dx + dy * dy), where dx = x2 - x1 and dy = y2 - y1. In browser work, pointer and touch coordinates commonly supply those values. section 13.1.2 section 13.5
Distance becomes useful when a UI needs a continuous response rather than a simple inside-or-outside check. Measure from an element’s center to the pointer, divide by the farthest relevant distance, and use the resulting ratio to scale an effect. A ratio of 0 means the pointer is at the center; 1 means it has reached the chosen maximum. This can drive hover tilt and a subtle scale from 1 to 1.05. section 10.2.3
Common UI uses include:
- Animate an element toward a click point: use vector magnitude as the remaining distance, move by a normalized step, and snap to the target when the remainder is below the movement speed. section 10.3.3
- Scale a photo for pinch and spread gestures: divide the current two-finger distance by its starting distance, then clamp the scale to a safe range. section 13.1.2
- Detect whether a pointer is over a donut-chart ring: calculate its distance from the chart center and require it to fall between the inner and outer radii. section 14.1.3
Pinch-to-zoom ratio
Store the distance between two touches on touchstart. On touchmove, calculate the new distance and divide it by the stored value. If two fingers begin 100 pixels apart and move to 150 pixels apart, the raw scale is 1.5. Clamping that value, such as from 0.5 through 5, keeps the photo from shrinking or growing too far before applying CSS transform: scale(...). section 13.1.2
Listing 13.2 Scaling a photo based on pinch and spread gestures
HTML:
<img src="/images/flower.jpg" alt="Flower" class="photo">
JavaScript:
const photo = document.querySelector('.photo');
let startDist = 1;
photo.addEventListener('touchstart', (e) => { #1
if (e.touches.length === 2) { #2
const [a, b] = e.touches; #3
startDist = distance(a.clientX, a.clientY, #4
b.clientX, b.clientY); #4
}
}, { passive: true });
photo.addEventListener('touchmove', (e) => { #5
if (e.touches.length === 2) { #6
const [a, b] = e.touches; #7
const d = distance(a.clientX, a.clientY, #8
b.clientX, b.clientY); #8
const raw = d / startDist; #9
const scale = Math.min(5, Math.max(0.5, raw)); #10
photo.style.transform = `scale(${scale})`; #11
}
}, { passive: true });
The listing ties each stage of a distance-driven gesture to event handling: record a two-touch starting distance, recompute it while moving, derive a ratio, clamp it, and update the photo transform. section 13.1.2
Distance answers how far; it does not by itself answer which direction or angular region is involved. For curved targets such as donut-chart slices, pair the radial distance test with Math.atan2() so the angle can identify the matching slice. Convert viewport coordinates to local element or canvas coordinates first by subtracting the bounding rectangle’s left and top offsets. section 13.5 section 14.1.3
