Pythagorean theorem

The Pythagorean theorem turns horizontal and vertical movement into a straight-line distance. For two perpendicular offsets, dx and dy, distance is √(dx² + dy²). In UI work, those offsets often come from pointer coordinates, an element center, or two positions in an animation. The result answers a practical question: how far apart are these two points? section 1.4.4 section 1.2.3

Start by subtracting coordinates. Given points (x1, y1) and (x2, y2), calculate dx = x2 - x1 and dy = y2 - y1. Squaring makes both offsets positive, adding them combines the two perpendicular sides, and the square root returns the actual straight-line distance. A vector [3, 4], for example, has magnitude 5 because √(3² + 4²) = √25. section 1.4.4 section 10.1

const dx = x2 - x1;
const dy = y2 - y1;
const distance = Math.sqrt(dx * dx + dy * dy);

Use this compact JavaScript pattern whenever dx and dy describe the horizontal and vertical gaps between two points. section 1.4.4

Distance becomes useful after coordinates are made relative to the same origin:

• Measure pointer distance from an element center to scale a hover effect. Divide that distance by the farthest possible center-to-corner distance to produce a value that grows from the center toward an edge. section 10.2.3
• Find a vector’s magnitude to determine how far an element moved, while treating its direction as a separate angle calculation. section 10.1
• Check whether a canvas pointer lies within a donut chart’s inner and outer radii before using its angle to identify a slice. section 14.1.3
• Find the distance between two interaction points after converting viewport coordinates to element-local coordinates with getBoundingClientRect(). section 13.5

The theorem supplies distance, not direction. Pair it with Math.atan2(dy, dx) when an interaction also needs an angle, such as choosing a donut-chart slice or orienting a visual response toward the pointer. Keeping distance and angle separate makes radial interfaces easier to reason about: distance tests bounds; angle selects a direction or sector. section 14.1.3 section 13.5

canvas.addEventListener('pointermove', (e) => {
    const rect = canvas.getBoundingClientRect();  #1
    const pointerX = e.clientX - rect.left;   #1
    const pointerY = e.clientY - rect.top;   #1

    const dx = pointerX - centerX;  #2
    const dy = pointerY - centerY;   #2
    const distance = Math.sqrt(dx * dx + dy * dy);  #3

    let currentSliceIndex = null;
    if (distance >= innerRadius && 
        ➥    distance <= outerRadius) {  #4
        let pointerAngle = Math.atan2(dy, dx);  #5
        if (pointerAngle < -0.5 * Math.PI) {
            pointerAngle += 2 * Math.PI;  #6
        }

        seawaterData.forEach((slice, index) => {  #7
            if (pointerAngle > slice.startAngle &&  
                pointerAngle < slice.endAngle) {  
                currentSliceIndex = index;  #8
            }  
        });  
    }

    if (activeSlice !== currentSliceIndex) {
        activeSlice = currentSliceIndex;
        if (activeSlice !== null) { 
            const s = seawaterData[activeSlice]; #9
            descriptionTitle.textContent =  #9
                `${s.label} (${s.value}%)`;  #9
            descriptionText.textContent = s.desc;  #9
        } else {  #10
            descriptionTitle.textContent = '';  #10
            descriptionText.textContent = 'Hover over a slice  #10
                                           for details.';  #10
        }
    }
});

drawChart();  #11

Inspect the pointermove handler to see distance used as the radial boundary check before angle-based donut-slice detection. section 14.1.3

Practical takeaway: subtract first, square the horizontal and vertical offsets, add them, and take the square root. This calculation gives a reusable distance value for drag behavior, hover intensity, movement measurement, and circular hit detection. section 1.2.3 section 1.4.4