Moving a shape (the key trick)

This is the most important trick for drawing in a shader: you never move a shape. You change which position each pixel looks at.

So far every pixel asked: “am I inside a circle in the middle of the screen?” To draw the circle somewhere else, don't move the circle. Give every pixel a different position to look at: p - float2(0.3, 0.0). That pixel now measures from a spot 0.3 further left than where it really is, so the circle shows up 0.3 to the right.

Check with one number: the pixel at x = 0.3 computes 0.3 − 0.3 = 0, which is the middle of the circle. ✓

In the diagram the dashed box never moves. The gold outline is where it appears on screen. Hover a dot to see the position that pixel was handed.

float2 p = (uv - 0.5) * float2(aspect, 1.0);
p = p - float2(0.3, 0.15);      // shift: the picture appears 0.3 right and 0.15 up
float d = length(p);            // distance from the (shifted) middle