Rotating UV
The color pattern on the canvas spins continuously like a pinwheel. It uses a rotation matrix:
Let's break it down.
The trick for rotating around the center
Rotating vUv directly would spin around the bottom-left corner, causing the pattern to drift off-screen.
The correct approach:
p = vUv - 0.5: move the origin from bottom-left to the canvas centerp = rot(u_time) * p: rotate around that centeruv = p + 0.5: move the origin back
This ensures the rotation happens around the middle of the canvas.
What a rotation matrix is
A rotation matrix is a 2x2 mathematical tool that rotates a 2D coordinate by angle a:
Multiplying the matrix by a coordinate vector gives the rotated position. Passing u_time as the angle means the rotation angle grows over time, and the spinning continues indefinitely.
Where the colors come from
The rotated uv.x and uv.y are used directly as the red and green channels. The coordinates themselves are the colors — rotating the coordinates rotates the color pattern.
Try changing it
| Change | Effect |
|---|---|
rot(u_time * 2.0) | Spins twice as fast |
rot(-u_time) | Spins in the opposite direction |
rot(u_time * 0.2) | Very slow rotation |
vec3(uv.x, uv.y, sin(u_time) * 0.5 + 0.5) | Blue channel pulses while the pattern spins |
Exercise
The exercise canvas shows a static color pattern. Apply the rotation at the TODO comment by adding p = rot(u_time) * p so the pattern spins over time.
Answer Breakdown
rot(u_time)generates a rotation matrix with angleu_timerot(u_time) * protates the coordinatepby that angle- As
u_timegrows, the rotation angle increases, and the pattern keeps spinning
The starting code is missing this line, so p is never rotated. Adding it means each frame applies a slightly larger rotation angle, and the pattern starts spinning.
Try changing rot(u_time) to rot(sin(u_time)) — the rotation angle oscillates forward and backward, making the pattern rock left and right instead of spinning continuously.