live-coding-academy_ ⌕ search
home/ modules/ grid-tiling-and-recursive-pattern

Grids, tiling, recursion, and fractal pattern

L2First instrument 6h H · Creative coding & live-coded visuals 15 atoms

Learning objectives

  • learner can generate parametric tiling patterns from nested loops and wallpaper symmetry groups
  • learner can use recursion and recursive grid subdivision to build self-similar and fractal layouts
  • learner can implement data-driven treemap layouts decoupled from their rendering

Capstone — one whole task that evidences the objectives

Build a parametric pattern system that renders the same data three ways — a symmetry-tiled wallpaper, a recursive fractal subdivision, and a squarified treemap with data-driven styling — from one reusable layout core.

Prerequisite modules

This module builds the pattern engine behind most live visual sets: a layout core that turns one data stream into radically different textures on demand. In a VJ or algorave rig, the audio analysis or a MIDI controller feeds the same numbers every frame — what changes mid-set is the layout interpreting them. Being able to swap a wallpaper tiling for a fractal subdivision or a treemap without rewriting the renderer is the difference between three sketches and one instrument.

The arc starts supported: reproduce a seeded nested-loop grid, leaning on “Nested loops over a grid of tiles are the foundation of parametric tiling patterns” for the loop-plus-randomSeed skeleton. Then constrain it with symmetry — the fact that exactly 17 wallpaper groups tile the plane turns “make it repeat” into a concrete, guaranteed-to-tessellate recipe. Next the grid goes vertical: “Recursive grid subdivision generates fractal-like layouts” is the JIT how-to for splitting cells into sub-grids, while the recursion and self-similarity concepts supply the base-case and exponential-growth guards that keep depth sliders from crashing the sketch live. Finally the treemap leg forces the architectural payoff: the squarified algorithm computes coordinates, a styling callback maps data to colour, and the decoupled-layout principle is what makes one core drive all three renderers.

Required atoms are exactly what the capstone cannot survive without: the tiling procedure, the symmetry constraint, the recursion mechanics with their guards, and the treemap algorithm-styling-decoupling trio. Supporting atoms enrich the road there — 10-PRINT as the minimal-rule inspiration, branching fractals as a sibling recursion form, and classes, custom functions, and 2D arrays as refreshers for structuring the core cleanly.

Runnable examples

Generated from the context/ instrument corpus by concept (redistributable idioms only). Do not edit — regenerate with gen-module-examples.mjs.

tiling-repeat

osc(10).repeat(3, 3).out()

hydra-0008 · CC0-1.0

tile [4,4] (circle 0 0.3) >> add

punctual-0020 · CC0-1.0

repetition-motif

for(let i=0;i<8;i++) circle(width/2, height/2, 200 - i*20)

p5live-0023 · CC0-1.0

Atoms in this module

Required — these gate the capstone

Nested loops over a grid of tiles are the foundation of parametric tiling patterns in p5.js
Procedure L2 First instrument H
There are exactly 17 distinct symmetry groups for periodically tiling the plane
Fact L2 First instrument HL
Recursive grid subdivision generates fractal-like layouts by splitting cells into sub-grids
Procedure L2 First instrument H
Recursive functions in Processing call themselves to generate self-similar, branching forms
Concept L2 First instrument H
Fractals are shapes that exhibit self-similar structure across multiple scales
Concept L3 Craft H
Recursive fractal structures are coded as objects that instantiate child copies of themselves
Procedure L3 Craft H
The squarified treemap algorithm keeps each cell near-square by filling rows until adding the next item would worsen the aspect ratio
Concept L3 Craft H
Treemap boxes can be styled with callback functions that receive value and index, enabling data-driven colour
Procedure L3 Craft H
Separating treemap layout calculation from rendering makes the algorithm reusable across any graphics library
Principle L3 Craft H

Supporting — enrichment, not gating

The 10-PRINT Commodore 64 one-liner generates complex maze-like patterns from a single coin-flip per character cell
Concept L2 First instrument HL
Recursive draw functions produce fractal branching structures where each call draws one branch and spawns smaller sub-branches
Concept L3 Craft H
Processing classes bundle related fields and methods into reusable, instantiable objects
Concept L2 First instrument H
Custom functions in Processing encapsulate reusable code blocks with parameters and return values
Concept L2 First instrument H
Two-dimensional arrays in Processing store grid data as arrays of arrays
Concept L2 First instrument H
Regular or varied spacing of repeated visual units creates rhythm across the frame even in a still image
Concept L2 First instrument HL

Part of curricula