Aspect-Ratio Corrected UV

On a square canvas, length(p) draws a circle. On a non-square canvas, the same code draws an ellipse. Aspect ratio correction fixes this.

Why shapes distort

vUv.x and vUv.y both range 0–1. But on a 600×300 canvas, x = 0.5 covers 300px horizontally while y = 0.5 covers only 150px vertically. The two axes have different physical scales, so equal distances in UV become unequal on screen.

The fix

Multiply p.x by the aspect ratio (width ÷ height):

After correction, length(p) produces a true circle on any canvas size.

Exercise

The exercise starts with aspect = 1.0 (no correction). Compute the real aspect ratio using u_resolution.x / u_resolution.y so the circle stays round.

Answer Breakdown

u_resolution is a uniform holding the canvas pixel dimensions. Dividing width by height gives a scale factor — multiplying p.x by it makes horizontal and vertical distances physically equal.

The exercise canvas is 300×300, so aspect = 1.0 won't look different. Test on a non-square canvas (e.g., resize the preview) to see the effect clearly.