Humans have a weird fascination with repetition. The effect of marching soldiers, the arrangement of a bed of flowers. Crowds at football stadiums or concerts. A migrating flock of birds. It’s almost hypnotic.
Repetition in Graphic Design
In graphic design, we can repeat font style, graphic, line, icons, colors, etc. We can use repetition for many things. However, repetition is not something humans are good at. Take this poster by Paul Rand for example.
Paul Rand had to manually arrange all those hearts, in order to simulate a very computational repetition. However, as programmers, we can distill his design rule into code. Here’s that exact same design, recreated in code.
But now that we have the design rule in code, we can randomize some value, in order to create a dynamic design, where we quickly can explore different designs.
If we really look at the graphic design masters, repetition is used throughout our graphic design history, and it can be used for many different purposes. Here’s a few examples.
Repetition as Movement
Repetition as Rhythm
Repetition as Direction
Repetition as Texture
When you want to create randomly distanced things without overlapping.
It’s pretty easy to do periodic tiling in code. Here’s an example of somehow simple pattern created with a single for-loop.
Here’s a slightly more complicated cube pattern, also using a single for-loop.
Here’s that same cube pattern code, but using a function to clean up the code function.
Here I’m using the function twice to overlay two patterns
However, these patterns only allow us to create strictly repetitive patterns. To do more sophisticated patterns, we need to learn about aperiodic tiling.
Crucial to the concept of aperiodic tiling is recursion.
Or here’s a slightly more usable example, where I’m splitting a rectangle via recursion.
Aperiodic Tiling: Substitution Rules
Simple aperiodic tiling
Slightly more advanced aperiodic tiling
Some Pattern Examples