The Cicada Principle and Why It’s Important for Web Designers (Updated)

Posted on

cicada illustration

I’m going to start off on a seemingly wild tangent today, but please bear with me – I promise you I do have a goal.

A few years ago I read an interesting study on the life of periodical cicadas. We don’t usually see many of these little guys as they spend the vast majority of their lives quietly digging tunnels underground and munching on tree roots.

However, every 7, 13, or 17 years (depending on the species), these periodic cicadas suddenly emerge en masse, transforming into noisy, flying creatures, find a mate, and then wander off to expire shortly thereafter.

While this is a shocking ‘punk rock’ demise for our nerdy old cicada, it raises an obvious question: was it pure chance that they adopted life cycles of 7, 11 or 13? years, or are these numbers somehow special?

It turns out that these numbers DO have something in common. They are all prime numbers – numbers that can only be divided by themselves and 1 (i.e. 2, 3, 5, 7, 11, 13, 17, 19, 23, etc.).

But why is it important?

Research has shown that the population of creatures that eat cicadas – typically birds, spiders, wasps, fish and snakes – typically reproduce in their own shorter 2-6 year cycles of boom and bust. .

So if our cicadas were to emerge, say, every 12 years, any predator that works in 2, 3, 4 or 6 year cycles would be able to gradually synchronize its own boom years with this predictable feast of cicadas. In fact, they would probably make it a holiday called “National Cicada Day” with barbecues and everyone dressing up.

Obviously, it’s not so festive if you’re a cicada.

On the other hand, if a brood of 17-year-old cicadas had the misfortune to emerge during a bumper 3-year wasp season, it will be another 51 years old (i.e. 3 x 17) before this event happens again. In the years that follow, our cicadas may happily emerge in the tens of thousands, completely overwhelm the local predator population, and be most left in peace.

What resourceful little guys, huh!?!

It’s awesome. But what does all this have to do with web design?

Not so long ago we looked at the process of making seamless tiles. As super useful as seamless tiles are, it can be tricky to get the balance right just right.

Seamless tile of a rock wall

For one thing, you want the dimensions of the image file to be as small as possible to get the most out of this mosaic effect. However, when you notice a distinctive feature – say, a knot in a wood grain – repeating at regular intervals, it really breaks the illusion of organic randomness.

Maybe we borrow some ideas from these cicadas to make our tiling less repetitive?

Generating organic randomness with CSS

Example 1: The magic tile

Enough talk. Here’s a quick proof of concept. It’s not meant to be visually stunning, but it does show what’s going on. Keeping the “cicada principle” in mind, I created three semi-transparent square PNGs of 29px, 37px and 53px respectively (all prime numbers) and set them as multiple backgrounds on the element Test page wide DIV.

div {
background-image: url(29-a.png),url(37-a.png), url(53-a.png);
padding:0; margin:0; height: 100%;
}

Here’s the result. Drag this horizontal scroll bar to the right to see the new pattern we generated.

See the pen
Example of basic cicada principle
by SitePoint (@SitePoint)
on CodePen.

As you can see, the tiles overlap and interact to generate new patterns and colors. And because we’re using magic primes, this pattern won’t repeat itself for a very, very long time.

How long exactly? 29px × 37px × 53px… or 56,869 pixels!

Now, that was kind of a revelation for me. It was crazy. I actually had to double check my math, but the math is solid. Remember these are tiny graphics – less than 7kb in total – but they generate an original texture area of almost 57,000 pixels wide.

You can imagine what would happen if you were to add a fourth tile layer – say a 43px tile. Or maybe you can’t imagine it, because the numbers are starting to get a bit brutal and might smack your ears if you stare at them for too long.

Suffice it to say, you’ll get a more relevant number for planet terraforming than web design.

OK. So, abstract, geometric stripes are nice and all, but how else can you apply this idea?

Example 2: The red curtain

Let’s take a more photorealistic example that we’ve probably all seen at some point: the red velvet theater curtain. I found a nice curtain graphic here courtesy of Unsplash to use as a starting point. Looking at our curtain you can see it breaking roughly equal vertical units.

Choose a non-descript single flywheel unit.

For this example, I will refer to this distance as a ‘steering wheel unit‘, and (unlike the first example) this unit is going to be larger than the strict pixel dimensions images we work with.

First, I’m going to choose one of these ruffles and convert it into a seamless tile. This is a PNG and it weighs 7kb very tidy.

A tiled background with a very repetitive mechanical look

Rendered as a single tile, this graphic is all we don’t like on tiling backgrounds. The joins are obvious and it’s very mechanical and unconvincing like a real curtain.

A slab 3 units wide

A slab 3 units wide

For layer two, the prime number we are going to use is Three. I’m going to choose a new curtain “ruffle unit” and place it in a transparent PNG which is three ruffle units wide.

I softened the right and left edges so it blends smoothly with the tiling layer below. The resulting file comes in a tick less than 15 KB.

When we overlay this tile on our bottom layer, we definitely get an improved result. There is still an apparent abnormally regular pattern, but it is starting to break down a bit.

See the pen
Red curtain – two layers
by Alex (@alexmwalker)
on CodePen.

Demo 7 units

Our third layer is a 7 unit wide tile

The magic number for our third layer is Seven.

We’re creating a new transparent PNG seven unit wide ruffles, and I’m going to drop two new ruffle image sections at positions 3 and 6. If that sounds confusing, the diagram on the left *should* clear things up a bit. Again I softened the edges this image to help it blend into the lower layers.

Obviously this is a larger image in both pixel dimensions and file size, but it still only tips the scale at around 32kb – which is by no means outrageous .

Here is what happens when we place this graphic on the first two layers. I am quite happy with this result. It’s true, your eye can probably spot small sections of an image that seem to repeat (because they do), but the underlying pattern becomes so complicated that your eyes stop looking for similarities. Scroll right to see what I mean.

See the pen
Red curtain – two layers
by Alex (@alexmwalker)
on CodePen.

To see it another way, if we treat each flywheel only as a number, the number pattern it produces looks like this: 1, 2, 3, 1, 2, 6, 1, 2, 1, 3 , 2, 1, 6, 2, 1, 1, 3, 1, 1, 6, 1, 1, 2, 3,..

The IS a pattern there, but it’s very hard to discern.

In this example, a virtually endless curtain background cost us a grand total of just 53 KB. And of course, it would be relatively trivial to add a fourth layer – perhaps using 11 units – if we wanted to. However, I am not convinced that it is justified here.

Also keep this in mind: This example uses the one of the simplest possible sets of primes – 1, 3, and 7. If we were to use, say, 11, 13, and 17, we could incorporate a much more complex variation for a given distance. It really depends on the scale of the curtain we choose in relation to the width of the screen.

Example 3: The Lego Legion

My final example is less about pure practical applications and more about having fun playing with prime numbers. I’m not going to break down the theory again, as the basic concept is the same as the first two examples, but you’re more than welcome to break it down in DevTools.

2200 years ago Emperor Qin Shi Huang built a terracotta army of 8,000 men to guard his tomb. Each soldier, tank and weapon is a unique handcrafted creation.

Using basic CSS, primes, and a handful of images, we’ll raise our own mighty army. What he may lack in stature he makes up for in sheer weight in numbers.

I give you… my mighty legion of Lego!

See the pen
legion of lego
by Alex (@alexmwalker)
on CodePen.

The legion is constructed from just eight images that blend and intertwine to produce thousands of permutations. He uses:

  • 2 images for background tiles
  • 2 images for the legs
  • 2 images for the torsos
  • 2 images for the heads

Summary

Playing around with this idea, I found a few basic principles that seem to work. First, your stacking order tends to work best when constructed as an upside-down pyramid.

Rules for building your layers

Rules for building your layers

You can afford to make the bottom layer quite small and repetitive, as much of it is overwritten by the top layers. In fact, it’s likely that only 20-40% will remain visible.

On the other hand, your topmost layer should always have the largest image dimensions, but also the the most scattered imagery, because these image elements will never be blocked by other layers. It’s also probably the best not to include very distinctive and eye-catching details on your top layer. Keep it rare and more generic.

Either way, trial and error is almost always required.

Browser support

I kept the markup simple by applying multiple backgrounds to the HTML element. This is supported by all major current browsers (Firefox, Chrome, Edge, Opera and Safari) but obviously not all older versions.

However, if backwards compatibility is a prerequisite, the mosaic of the html, body and maybe a single container div element could be a viable option. While the container element may be non-semantic, it potentially gives you huge site-wide value for a small concession. It’s your decision.

These three examples are the first ideas that came to mind, but I’m sure there are much smarter versions of the idea. Maybe:

  • An endless cityscape
  • Non-repeating wood grain
  • star fields
  • dense jungle
  • Cloudscapes

If you find a nice version, I’d love to see it.

Leave a Reply

Your email address will not be published.