Stripes, a circle and a gradient, as text and as pixels
The three squares on screen use the same expressions as the text pictures.
With a UV coordinate and five functions (step, smoothstep, mix, fract, mod) you can draw stripes, circles and gradients without any image. The edge case to know is banding, and dithering fixes it.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Draw 8 horizontal stripes using uv.y.
Make a ring (a circle outline) with smoothstep.
Explain it without notes
Why is a smoothstep rim better than a step rim?
What causes banding and why does dithering hide it?
Console
Nothing logged yet.Expected console output
stripes:
### ### ### ###
### ### ### ###
### ### ### ###
### ### ### ###
### ### ### ###
### ### ### ###
### ### ### ###
### ### ### ###
### ### ### ###
### ### ### ###
circle:
.########.
:############:
##############
##############
:############:
.########.
gradient:
...::***########
...::***########
...::***########
...::***########
...::***########
...::***########
...::***########
...::***########
...::***########
...::***########