Pixel basics · lesson 8 of 8 · Beginner · about 5 min
Time: make it move
You will build: Make the ring pulse: radius = 0.25 + 0.08 × sin(time × 3).
You can't keep a variable that changes between frames inside the shader (no memory!). So the CPU passes in a value from outside — a uniform. The most important one is time: seconds since start. Every pixel gets the same value — that's what “uniform” means.
(In Unity it's _Time.y; the export button handles this for you.)
Animation is then just math on time. sin(time) swings smoothly between −1 and +1, so 0.25 + 0.08 * sin(time * 3.0) oscillates the radius between 0.17 and 0.33, three radians per second.
Use the play/pause button and time slider under the output to scrub through the animation.
The numbers you need
Everything the picture depends on is given, so the challenge is the code, not guessing.
- Radius
0.25 + 0.08 * sin(time * 3.0)
Try it in your own language
The lesson is written once and shown in every language. Pick yours: Unity (Built-in), Unity (URP), Unreal, Shadertoy / WebGL, OpenGL (LWJGL, raylib), three.js, GameMaker, LÖVE (Lua), Godot, Apple (iOS, macOS), WebGPU / Bevy.
Start codingGo deeper
Part of the learning paths: From zero to ray marching, From Shadertoy to Unity, Shader art basics.