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

Shape

Color

Repeat12Rotation (degrees)30Size (px)40

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.

Explore the activity to earn its passport stamp. Stamps record exploration, not mastery.

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 Flow

The concept you just explored is taught with full depth in the formal DURA curriculum.