Shaders Workshop - Painting with Math

In this tutorial we will build a shader that looks like this - step by step:

Quick Start

1. Open ShaderToy
2. Click New at the top-right corner.

Step by Step

• Part 0 - Hello, GPU
• Part 1 - Normalize coordinates
• Part 2 - A single circle
• Part 3 - Soft edges (SDF + smoothstep)
• Part 4 - Simple animation
• Part 5 - Many circles (loops)
• Part 6 - Color palettes
• Part 7 - Final shader (polish + parameters)

Tools

• GraphToy

Math & Concept Cheatsheet

• Centered UV: uv = (fragCoord*2.0 - iResolution.xy)/iResolution.y Reason: resolution-independent, origin at center.
• Circle distance: length(uv - center) Reason: points with equal distance form a circle.
• Soft edges: smoothstep vs step Reason: anti-aliased transitions.
• Signed ring distance: sd = abs(dist - radius) Reason: fade based on distance from ideal circle edge.
• Animation: drive values with iTime, sin, cos.
• Loops: for (float i = 0.0; i < N; i++) to repeat shapes.
• Color: cosine palette a + cos(3.0*(a*t + b)).

Prompt Ideas

• Change radius/speeds; add more circles.
• Swap palette parameters for different moods.
• Animate color separately from motion.
• Tie motion to mouse input.

Troubleshooting

• Aliasing/jagged edges: increase the smoothstep width.
• Nothing shows: check your value ranges; try visualizing intermediates.
• Too slow: reduce circle count or blur radius.

Optional Next Steps

• Add other SDF shapes (box, line, ring) and animate them.
• Experiment with post-process blur or feedback effects.
• Use fract/mod to repeat space for patterns.

Have fun - you’re literally painting with equations, at GPU speed!