Coordinate Transformation

This tutorial chains rotation, scaling, and repetition together to produce an animated grid of circles. The core pipeline is:

Let's break down each step.

Step 1: Move the origin to center

uv runs from 0 to 1 with (0,0) at the bottom-left. Rotation and scaling work around the origin, so we shift first:

Now coordinates range from -0.5 to +0.5, with the center at (0, 0).

Step 2: Rotation matrix

Rotation in 2D is a 2×2 matrix multiply:

cosA and sinA come from angle = u_time, so the pattern spins over time.

Step 3: Scaling

Multiply the coordinates by a scale factor to zoom in or out:

scale oscillates between 0.5 and 1.5, giving the grid a breathing zoom animation.

Step 4: Tiling with fract

fract(x) keeps only the fractional part — effectively tiling 0–1 over and over:

Multiplying by 3.0 tiles the pattern 3×3 per screen. Inside each tile, subtract 0.5 to recenter, then use length to draw circles.

Try changing it

Change	Effect
Change `3.0` to `6.0`	Double the grid density
Change `u_time` to `u_time * 3.0`	Faster rotation
Swap the two params in `smoothstep(0.3, 0.2, dist)`	Circles become rings
Change the amplitude `0.5` in scale to `1.0`	More dramatic zoom breathing

Exercise

Fill in the two lines of the rotation matrix using the correct cos/sin formula to rotate the centered coordinates.

Answer Breakdown

This is the standard 2D rotation formula. New x = original x × cos - original y × sin; new y = original x × sin + original y × cos. Because cosA and sinA come from angle = u_time, the whole grid rotates as time advances.

In the exercise, both lines are already provided with TODO comments — they are already correct, so keeping them unchanged gives you the right answer.

Try adding rotated *= 0.7 right after the rotation to see how scaling affects the tile density.