Loops & recursion
Pattern Factory
Iteration, recursion, and rule-based composition.
Most computer programs are short rules repeated over and over. These activities make that pattern visible: a shape repeats to make a wallpaper, a single branching rule grows into a tree, a beat loops to compose a song. Loops and recursion are how a few lines of code produce complex, scalable output.
Define a small motif, then loop it. The result is parametric art — a 3-line program producing visual complexity that would take a thousand lines if you wrote each step out.
Teaches: Phase 1 · Control FlowWatch a tree grow by recursively applying the same branching rule. The recursion depth slider makes the relationship between depth and complexity tangible — and shows why recursion is the natural language for self-similar data.
Teaches: Phase 1 · FunctionsArrange a 16-step grid of percussion. The same loop primitive that drives every sequencer in music software — and a hands-on version of the cyclic data structure underneath.
Teaches: Phase 1 · Control FlowDesign one tile, then tile a plane. The same repeat-mode primitive that powers CSS Grid, wallpaper rendering, and procedural texture generation in games.
Teaches: Phase 2 · CSS FundamentalsSlider for fib(N); side-by-side call trees, naive recursion vs memoized. At N=30, naive needs ~2.7 million calls; memoized needs 59. The dynamic-programming insight in its purest form — caching turns an exponential algorithm into a linear one.
Teaches: Phase 1 · FunctionsClick any of 36 CS concepts plotted on a 2D semantic map and watch its three nearest neighbors light up. Toggle cosine similarity vs euclidean distance to see why every vector database defaults to cosine — and feel, in your hand, what 'meaning is a position' actually means.
Teaches: Phase 6 · AI/ML Engineering