Orbiting Dot

A bright cyan dot travels in a circular orbit around the canvas center. Its position is animated with one line:

Let's break it down.

How cos and sin describe circular motion

cos(angle) and sin(angle) are the x and y coordinates of a point on the unit circle at that angle.

As angle increases from 0 to 2π, the point completes a full orbit:

• cos(0) = 1, sin(0) = 0 → right side
• cos(π/2) = 0, sin(π/2) = 1 → top
• cos(π) = -1, sin(π) = 0 → left side

Passing u_time as the angle makes the point orbit continuously over time.

Multiplying by r controls the orbit radius

vec2(cos(u_time), sin(u_time)) produces points on a circle of radius 1.

Multiplying by r = 0.25 scales the orbit to 25% of the canvas width. Adding center = vec2(0.5) positions the orbit around the canvas center.

Drawing the dot

distance(vUv, pos) measures how far the current pixel is from the dot's center.

smoothstep(0.02, 0.025, d) creates a soft edge between distances 0.02 and 0.025. The 1.0 - inversion makes the inside bright and the outside dark.

Try changing it

Exercise

The exercise canvas has the dot fixed at the center. Replace vec2 pos = center with the orbital position using cos and sin to make the dot orbit.

Answer Breakdown

• vec2(cos(u_time), sin(u_time)) traces a unit circle over time
• * r scales the radius to 0.25
• + center positions the orbit around the canvas center

The starting code has pos = center, so the dot never moves. Adding the circular motion calculation makes pos travel along the orbit each frame.

Try changing r = 0.25 to 0.35 — the larger orbit brings the dot close to the canvas edge.