Zellige Automata

Concept and inspiration

Cellular automata are simple: a row of cells, each one either on or off, and every step each cell looks at its neighbors and decides whether to turn on or off based on a fixed rule. From these tiny local rules, complex patterns emerge. It’s how zebra stripes form, how seashell patterns grow, and how forest fires spread.

That got me thinking about my cultural background. Zellige is the Islamic tilework you see across the Alhambra in Granada, the Alcázar of Seville, the madrasas of Fez, and the Mezquita of Córdoba. It’s made of small hand-cut glazed ceramic pieces assembled into geometric patterns on walls and floors, using a traditional shared palette (cobalt, green, white, manganese, ochre, red, turquoise). What makes it special is that these aren’t just beautiful patterns, they’re mathematical systems. Islamic artisans figured out how to make infinite complexity from simple local rules, centuries before computers.

So my question was: what if these artisans had cellular automata? Same traditional colors, same symmetry principles, but a new way of generating the shapes inside. It’s not a reconstruction, it’s an alternate history experiment.

About rules: a rule is an instruction card. Each cell looks at three things (left neighbor, itself, right neighbor) and the rule decides what it becomes next. There are 256 possible rule cards, numbered 0 to 255. Rule 90 makes fractal triangles, Rule 30 makes static, Rule 110 makes moving shapes. Every time the sketch generates a new zellige, the code picks a random number 0 to 255, and that’s the rule that shapes the pattern.

I picked four Andalusian monuments as inspiration: the Alhambra (Granada), the Alcázar of Seville, the Bou Inania Madrasa (Fez), and the Mezquita of Córdoba. Real Islamic tilework in all four uses many symmetries. In this sketch, each city is given one specific symmetry count (Alhambra 8, Seville 6, Fez 12, Cordoba 4) as a creative simplification, so each mode has its own personality. That’s an artistic choice, not historical reconstruction.

Other references:

• Daniel Shiffman’s Coding Challenge #54: Islamic Star Patterns, based on Craig S. Kaplan’s academic work on computer-generated Islamic star patterns at the University of Waterloo
• Minoofam and Bastanfard, Square Kufic Pattern Formation by Asynchronous Cellular Automata (2010)
• Zellij on Wikipedia

Code I’m proud of

The cleanest piece of code is the rules function. Originally, it was 8 long if-else statements, one for each neighbor combination. Using bit shifting, it becomes two lines:

function rules(a, b, c) {
  let index = (a << 2) | (b << 1) | c;
  return ruleset[7 - index];
}

a, b, c are each 0 or 1. The expression (a << 2) | (b << 1) | c treats them as three binary digits that combine into a number from 0 to 7, which is the index into the ruleset. Eight branches of code replaced by one math expression.

Embedded sketch

The zellige fills the top of the canvas, with a control strip below it. Click the zellige for a new one with a random rule. The four city buttons switch palettes and fold counts. The zoom button toggles a magnifier lens that follows the mouse. Pause/play stops or resumes the auto cycle. The caption at the bottom shows the current rule number, its binary form, and fold count.

Milestones and challenges

The sketch was built in five phases, each solving one problem.

Phase 1 — From line to ring. Bent the class 1D CA into a circle so time flows outward. The result was a lopsided crescent with a seam where the ends of the cell array met.

Phase 2 — Wedges. Used a short cell array representing one wedge, drawn 8 times around the center. First clean rotational symmetry, a pinwheel look.

Phase 3 — Mirrored wedges. Added mirror symmetry by flipping every other wedge, so neighbors look like reflections of each other (the way real zellige does). With Rule 90 the result looked the same as Phase 2, which confused me, but testing Rule 110 proved the flipping was actually working.

Phase 4 — Palette and center. Zellige colors cycling ring by ring, cells as diamonds, star ornament at the center. First phase that actually looked like tilework.

Phase 5 — Interactive final. Added the four city modes, the control panel, the magnifier lens, and auto cycle.

The two biggest challenges were:

• The seam. When I first bent the line into a circle, the pattern broke where the start and end of the cell array met. Splitting the cells into wedges (Phase 2) fixed it.
• The magnifier bug. At first, the zoom lens kept drawing itself onto the canvas, then capturing that in the next frame, until the screen filled with circles. I fixed it by drawing the zellige on a hidden layer and having the lens read from that clean copy.

Reflection and future work

The biggest thing I learned is that simple rules can produce deep beauty. Rule 90 is just eight yes/no answers, but its outputs look like medieval tile panels, snowflakes, and seashells. Islamic artisans and Wolfram’s rules are solving the same problem from opposite directions, both arriving at the same family of patterns.

This sketch is an interpretation, not a reproduction. The zellige palette is historically documented, but the fold counts per city, the cell shape, and the CA rules driving the patterns are creative choices. Real Islamic tilework uses far more variety in every monument. That’s the alternate history framing: what might these traditions look like if this tool had existed for them?

Future work:

• Sample real colors from photos of each monument
• Use traditional motifs at the center instead of a simple star
• Let each city use more than one fold count
• Try different cell shapes like stars or arrows, not just diamonds