Keep the direction.
Change the length.

A complete endpoint shader

This smaller shader places a green dot at the computed tip. Paste it into the editor; origin, target, length, and fallback controls still work. The grid and arrows are omitted so the endpoint is easy to inspect.

#version 300 es
precision highp float;
uniform vec2 uResolution;
uniform vec2 uOrigin;
uniform vec2 uTarget;
uniform float uArrowLength;
uniform vec2 uLastDirection; // A unit vector maintained by the host.
uniform int uFallbackMode;   // 0 = right, 1 = last valid direction.
out vec4 fragColor;

void main() {
    vec2 p = (2.0 * gl_FragCoord.xy - uResolution) / uResolution.y;
    vec2 v = uTarget - uOrigin;
    float len = length(v);
    vec2 fallback = uFallbackMode == 1 ? uLastDirection : vec2(1.0, 0.0);
    vec2 direction = fallback;
    if (len > 0.0001) {
        direction = v / len;
    }
    vec2 tip = uOrigin + direction * uArrowLength;
    float marker = 1.0 - smoothstep(0.035, 0.045, length(p - tip));
    fragColor = vec4(mix(vec3(0.04, 0.06, 0.09),
                         vec3(0.29, 0.88, 0.56), marker), 1.0);
}

A mistake worth making: normalize after scaling

For a nonzero v and a positive arrowLength, compare:

vec2 a = normalize(v) * arrowLength;
vec2 b = normalize(v * arrowLength);

The first displacement has the chosen length. The second has length one: normalization removes the scale we just applied. In the editor, keep the arrow length above zero and replace the line that computes tip with this exact line:

vec2 tip = uOrigin + normalize(direction * uArrowLength);

The arrow now has length one and stops responding to positive length changes. Restore vec2 tip = uOrigin + direction * uArrowLength; afterward. Normalize first, scale second.

Do not fix a zero denominator by adding the same small number to both components of v. That changes its direction and turns the zero vector into an arbitrary diagonal. Choose and label the fallback instead.

Remember the last valid direction

A fragment shader invocation does not remember the last pointer event. The host application can keep that information and send it through a uniform.

Here is the relevant JavaScript idea. The host calls this function after origin or target changes. It uses the same tolerance as the shader:

let lastDirection = [1, 0]; // Valid even before the first movement.
function rememberDirection(origin, target) {
    const dx = target[0] - origin[0];
    const dy = target[1] - origin[1];
    const len = Math.hypot(dx, dy);
    if (len > 0.0001) {
        lastDirection = [dx / len, dy / len];
    }
    return lastDirection;
}

The host sends the returned pair as uLastDirection. At zero or below the threshold, it leaves the saved pair unchanged. It must never replace that pair with a zero vector. The complete host code implements this behavior; it also rounds the reference calculations to 32-bit floats to match the shader inputs. The short snippet above shows the memory rule. The shader editor edits only the fragment shader.

Selecting the remembered fallback therefore preserves the arrow’s last orientation at coincidence. It still cannot find a direction from the coincident points. It uses information from an earlier valid state.

Your turn

Use Reset lab. Keep the origin at zero and arrow length at 0.6.

1. Compare Closer and Farther. Predict the two target distances and the common arrow tip. Check that the direction length stays one.
2. Choose Coincide with the fixed-right fallback. Predict the tip and explain why the arrow turns.
3. Reset. In the complete shader, replace the assignment to fallback with vec2 fallback = uLastDirection;. Run it, then choose Coincide. Explain why the diagonal direction is now preserved. The host already supplies the memory.
4. Use Reset code and choose the remembered fallback in the controls to get the same behavior without editing. Try Farther, then Near zero. Its displacement is (0.00003, 0.00004); explain why the fallback is used even though the points are not exactly identical.
5. Set arrow length to zero. Explain why the direction readout stays valid while the visible arrow becomes a point.

What you can do now

You can separate direction from distance. Move a target farther along the same direction: the arrow keeps its length. Make the points coincide: the chosen fallback keeps every result defined.

We have changed one vector’s size without turning it. Next, we will combine values to place a point between two positions or blend two colors.