Why the Cicada Principle Matters in Web Design

You may know cicadas as noisy, flying creatures that die shortly after finding a mate. And you may be wondering what all they have to do with web design. Because they do have something to do with web design. It’s called the Cicada Principle and this is how it works.

Cicadas, depending on the species, go out every 7, 13 or 17 years en masse. During this time they mate and then they perish. Yes, that’s not really a nice way to go (or maybe it is.) But some nerdy web designers noticed one thing. The cicada life cycle years are all prime numbers. You know, those numbers that are only divisible by themselves?

It is interesting to note that predators that eat cicadas have shorter life cycles, typically falling between 2 and 6 years. These include birds, spiders, wasps, fish and snakes. Basically, what happens is the predators synchronize their cycles with the cicada cycle and boom! They have a veritable feast when the tiny critters come out.

So what does that mean? Why does it matter?

Well, that it’s not fun to be a cicada. Or, if they can time their coming out season when the predators are in their bumper years, they can have decades of happily re-populating in peace.

vectornet

What does it have to do with web design?

It’s this. Making seamless tiles is tough. They’re very useful but can be very hard to balance just right. You want to keep the file dimensions small to take the most advantage of the tiling effect. But any distinctive feature can break the illusion of organic randomness when repeated at regular intervals. So web designers are now using the cicada ideas to break the pattern.

For example, you can make 3 semi-transparent PNGs. They could be at 29px, 37px and 53px. They are set up as multiple backgrounds on the HTML element of a test page.

You will end up with overlapping tiles that interact and generate new patterns and colors. Using the amazing prime numbers, the pattern won’t be repeating itself for a very long time. And if you’re anal and would like to know exactly how long, here’s the answer: 29px * 37px * 53px = 56,869px. That’s how long.

This is solid math. Now picture adding another tile. Say, 43px. Can you imagine how long before the pattern repeats itself? It’s enough to say that the Cicada Principle works on web design.

Try it out yourself. Find a photo-realistic example. Use the quintessential red velvet curtain that breaks into equal vertical units. Convert each ruffle into seamless tiles in prime number layers. The result is a curtain that looks like it has more natural, uneven breaks.

So in essence, what you can get out of the whole Cicada Principle is this. Stacking your tiles using prime numbers will let you utilize seamless tiles better. Who knew web design can learn a thing or two from tiny bugs?