2D Rotation Matrix
Rotating a coordinate system takes a single mat2, then a multiply:
Let's break it down.
What a rotation matrix does
Rotating a point mixes its x and y components according to the angle:
Pack those four coefficients into a 2×2 matrix — mat2(c, -s, s, c) — and left-multiplying it by any 2D vector applies the rotation in one step.
The angle a is in radians. a = u_time * 0.8 ties it to time; the 0.8 factor just slows it down a bit.
Why subtract 0.5 first
mat2 rotation spins around the origin (0, 0). Since vUv ranges from 0 to 1, its origin is the bottom-left corner — rotating directly would spin everything around that corner.
Subtracting 0.5 moves the center to (0, 0) first:
After rotation, we don't need to add it back — the following abs and smoothstep only care about relative position.
How the square is drawn
After rotation, max(abs(p.x), abs(p.y)) computes the Chebyshev distance — which defines a square boundary centered at the origin:
- Inside the square: d < 0.22 → box mask = 1 (green foreground)
- Outside: d > 0.23 → box mask = 0 (dark background)
smoothstep(0.22, 0.23, d) applies a hair-thin softening so the edge is smooth but not visibly blurry.
Try changing it
| Change | Effect |
|---|---|
Change 0.8 to 2.0 | Faster rotation |
Change 0.22 and 0.23 to 0.15 and 0.16 | Smaller square |
Change max(abs(p.x), abs(p.y)) to length(p) | Square becomes a circle |
Replace u_time * 0.8 with a fixed value like 1.0 | Stops animating, locked at a fixed tilt |
Exercise
After p = vUv - 0.5, rotate the coordinate p using rot(u_time * 0.8).
Answer Breakdown
rot(u_time * 0.8) returns a rotation matrix that changes over time. Left-multiplying it by p spins the coordinate around the origin. The exercise is missing this line, so the square sits still. Add it and the square rotates.
The rot function is already defined — you just need to call it and assign the result back to p.
Try changing the angle to u_time * 0.8 + 3.14159 * 0.25 so the square starts already tilted 45°.