Loops · Procedural generation
Pattern Machine
Define one motif, loop it. Generative art from a tiny program.
Three lines of code can produce thousands of visual elements when wrapped in a loop. Define a small motif here, then watch the loop draw a full canvas. The same pattern powers procedural generation in games, generative-art frameworks like Processing, and the rendering of every CSS gradient.
Pattern Machine
Adjust the controls to create patterns with loops
What you just learned
You just used a loop — one of the most powerful ideas in programming. Instead of drawing 12 shapes by hand, you gave one instruction and told the computer to repeat it. Every time you see a pattern in nature or design, there's probably a loop behind it.
What’s happening under the hood
- ›A loop has two parts: a body of code, and a termination condition. Each iteration produces one output.
- ›Procedural generation is deterministic but rule-based: same rules + same seed = same output, every time. This is why game saves can encode a 1-TB world in a few KB of seed + state.
- ›The cost of procedural content is one program + the loop's iteration count, not one file per output. Minecraft uses this to generate worlds that are effectively infinite.
Dig deeper
Phase 1 · Control FlowThe concept you just explored is taught with full depth in the formal DURA curriculum.