Learning path · 14 lessons · about 3 hours
Shader art basics
You will: make patterns, shapes and animations that look good. For: artists and designers who want to start creating with shaders.
A gentler route that stays in 2D and goes for pictures you will want to share: soft shapes, repeating patterns, polar designs and colour. It skips the 3D maths and keeps the focus on composition, rhythm and colour, with every step producing something you can look at.
Start lesson 1What you will be able to do
- Draw crisp, soft-edged shapes from distance fields
- Tile and repeat patterns
- Make polar designs: flowers, stars, rays
- Colour everything with cosine palettes
The lessons, in order
- 1 Every pixel, one functionPlay
Make the whole screen the same blue as the target.
- 2 Colors are four numbersPlay
Match the green. The Colors panel shows its hex code — convert it to floats.
- 3 Two axesPlay
Red grows to the right, green grows upward, blue is a constant 0.5.
- 4 Vectors & swizzlingPlay
Swap the roles: red should follow the vertical axis and green the horizontal one.
- 5 smoothstep(): soft edgesPlay
Instead of a hard split, fade from the dark color to the orange between x = 0.3 and x = 0.7.
- 6 Center, distance & aspect ratioPlay
Make the circle truly round by correcting for the aspect ratio.
- 7 Distance fields & antialiasingPlay
Turn the solid disc into a glowing ring: radius 0.3, soft edge width 0.02.
- 8 Repeating: floor & fracPlay
Draw an 8×6 checkerboard of black and white.
- 9 Moving a shape (the key trick)Play
Draw the yellow disc (radius 0.2) centred 0.3 to the right and 0.15 up from the middle.
- 10 Scaling a shapePlay
Draw a box (half-size 0.1 by 0.08) and stretch it to twice the width by dividing p.
- 11 Rotation & matricesPlay
Spin the box: rotate p by an angle equal to time (in radians) before computing the distance.
- 12 Polar coordinatesPlay
Build the spinning pinwheel: wedge pattern sin(a × 6 + time × 2), clipped to a disc of radius 0.4 with a…
- 13 Cosine palettesPlay
Make a rainbow that scrolls: t = uv.x + time × 0.2.
- 14 Time: make it movePlay
Make the ring pulse: radius = 0.25 + 0.08 × sin(time × 3).
Ideas you will meet
Short explainers with a live example for each: