Spinning Ring

A ring with a blue-to-pink gradient spins continuously. The rotation comes from adding time to the angle calculation:

Let's break it down.

How atan computes the angle

atan(y, x) returns the angle of the point (x, y) relative to the origin, ranging from -π to π (about -3.14 to 3.14 radians).

This angle describes where the current pixel sits on the ring — 0 is right, π/2 is top, π is left, -π/2 is bottom.

Adding u_time makes the ring spin

a = atan(p.y, p.x) + u_time increases the angle over time.

Every frame, the color distribution shifts by a small amount — visually, the ring appears to spin.

Mapping the angle to color

a + π shifts the range from -π–π to 0–2π. Dividing by 2π remaps it to 0.0–1.0.

mix interpolates between blue and pink — higher t means more pink.

Showing color only on the ring

d is the distance from the center. abs(d - 0.28) is the distance from the radius 0.28 circle — it's smallest when the pixel is right on that circle.

smoothstep transitions from 0 to 1 as this distance goes from 0.02 to 0.026. The 1.0 - inversion makes only the thin band near radius 0.28 appear bright.

Try changing it

Exercise

The exercise canvas has a static ring. Add + u_time to the end of float a = atan(p.y, p.x) to make the ring spin.

Answer Breakdown

• atan(p.y, p.x) computes each pixel's angular position on the ring
• + u_time increases the angle over time, rotating the color distribution

The starting code has a = atan(p.y, p.x) with no time term — the color distribution is fixed. Adding + u_time shifts the angular offset each frame, and the ring starts spinning.

Try changing + u_time to + sin(u_time) * 3.0 — the ring will oscillate back and forth instead of spinning continuously.