Repetition

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

The `while` loop

When you want to create randomly distanced things without overlapping.

Periodic Tiling

It’s pretty easy to do periodic tiling in code. Here’s an example of somehow simple pattern created with a single for-loop.

Simple pattern

See example code

Here’s a slightly more complicated cube pattern, also using a single for-loop.

See example code

Here’s that same cube pattern code, but using a function to clean up the code function.

See example code

Here I’m using the function twice to overlay two patterns

See example code

However, these patterns only allow us to create strictly repetitive patterns. To do more sophisticated patterns, we need to learn about aperiodic tiling.