Nested loops over a grid of tiles are the foundation of parametric tiling patterns in p5.js

Most generative patterns start with two nested for-loops that step across a canvas in equal increments. At each cell a shape is drawn; randomness, noise, or the cell’s coordinates drive the shape’s appearance. The tile count controls density; fixing it while scaling the canvas keeps proportions stable. A key elaboration is calling randomSeed() before the loops so the random choices in each cell are reproducible across draw() frames — without this, patterns flicker as new randoms are drawn every frame. Mouse position or key presses can alter parameters (strokeWeight, which diagonal variant, colours) in real time while the grid structure stays fixed.

Examples

tileCount=20; randomSeed(actRandomSeed); for(gridY<tileCount){ for(gridX<tileCount){ var toggle=int(random(0,2)); // 0 or 1 decides which diagonal to draw }} — P_2_1_1_01: changing strokeweight and strokecaps on diagonals in a grid.

Assessment

Write a 10x10 tile grid where each cell randomly shows either a circle or a square. Add a key press that picks a new randomSeed while keeping the same grid density, confirming reproducibility.