The Cicada Principle and Why It Matters to Web Designers

http://designfestival.com/the- cicada- principle- and- why- it- matters- to- web- designers/ January 11, 2013

I’m going to start off on a seemingly wild tangent today, but stick with me — I do have
a purpose.

A few years ago, I read some interesting stuff on periodical cicadas. We generally
don’t see a lot of these little guys as they spend the vast majority of their lives quietly
tunnelling away underground and munching on tree roots.

However, depending on the species, every 7, 13, or 17 years these periodical

cicadas simultaneously emerge en masse, transform into noisy, flying creatures, find
a mate, and die not long after.

While this is a rather rock’n’roll ending for our nerdy cicada, it raises an obvious
question: Is it just by chance that they adopted 7, 11, or 13- ​y ear life cycles, or are
those numbers somehow special?

As it turns out, these numbers have something in common. They’re all prime numbers—numbers that can only be
divided by themselves and 1 (that is,1, 2, 3, 5, 7, 11, 13, 17, 19, 23, and so on).

But why does that matter?

Research has shown that the population of creatures that eat cicadas — typically birds, spiders, wasps, fish and
snakes — often have 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 either 2, 3, 4 or 6 year cycles
would be able to synchroniz e their boom years with this regular cicada feast. In fact, they’d probably name a
public holiday after it called Cicada Day.

That’s not much fun if you’re a cicada.

On the other hand, if a brood of 17- ​y ear cicadas was unlucky enough to emerge during a bumper 3- ​y ear wasp
season, it will be 51 years before that event occurs again. In the intervening years, our cicadas can happily
emerge in their tens of thousands, completely overwhelm the local predator population, and be mostly left
in peace.

Resourceful little guys, eh?

T hat’s great. But what has all this got to do with web design?

A few weeks ago we looked at the process of making seamless tiles. As super- ​useful as seamless tiles are, it
can be tough to get the balance just right.

On one hand you want to keep the file dimensions as small as possible to take best advantage of the tiling effect.
However, when you notice a distinctive feature — for instance, a knot in some woodgrain — repeating at regular
intervals, it really breaks the illusion of organic randomness.

Maybe we borrow some ideas from cicadas to break that pattern?

Generating Organic Randomness with CSS

Example 1:

Enough talk. Here’s a quick proof- ​o f- ​c oncept. This is not supposed to be visually splendid, but it does a good
job of showing what’s going on. Keeping the ‘cicada principle’ in mind, I’ve made three square, semi- ​transparent
PNGs of 29px, 37px, and 53px respectively, and set them up as multiple backgrounds on the HTML element of a
test page.

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

}

And here’s the result.

As you can see, the tiles overlap and interact to generate

As you can see, the tiles overlap and interact to generate
new patterns and colors. And as we’re using magical prime
numbers, this pattern will not repeat for a long, long time.

Exactly how long? 29px × 37px × 53px… or 56,869px!

Now this was something of a revelation to me. I actually had

to triple- ​c heck my calculations, but the math is rock solid.
Remember these are tiny graphics — less than 7kb in total — 
yet they are generating an area of original texture of almost
57,000 pixels wide.

You can imagine what happens if you were to add in a fourth

layer of tiling — let’s say a 43px tile. Or maybe you can’t
imagine it, as the numbers start getting a little brutal and are
liable to slap you about the ears if you stare at them too long.

Suffice to say, you’ll get a number more relevant to planet

terraformation than web design. Less than 7kb of imagery generating a theoretical
area of original texture of almost 57,000 pixels
Ok. So, abstract, geometric stripes are nice and all, but how square
else can you apply this idea?

Example 2

Let’s take a more photo- ​realistic example that we’ve

probably all seen at some point: the red velvet theatre
curtain. I found a nice curtain graphic here to use as a start
point. Looking at our curtain you can see it breaks into
roughly equal vertical units.

For this example I’m going to refer to this distance as one

‘ruf f le unit ’, and (unlike the first example) it’s going to be
more important than the strict pixel dimensions of the
images we’re working with.

Firstly, I’m going to pick out one of these ruffles and

convert it into a seamless tile. It’s a JPEG and it weighs in
at a tidy 8kb.

Rendered alone, this graphic is everything we don’t like

about tiling backgrounds. While there are no obvious
visible join, it’s very mechanical and wholly unconvincing.
Coining a new measurement system — the ‘ruffle unit’
For layer two, the prime number we’re going to use is
three. I’m going to pick out a new section of curtain and
place it inside a transparent PNG that is t hree ruf f le
unit s wide. I’ve feathered the right and left edges so it
blends smoothly with the background. The resulting file
comes in a tick under 15kb.

When we overlay this tile on our bottom layer we certainly

get an improved result. There’s still an unnaturally regular
pattern apparent, but it’s starting to break down a little.

The magic number for our third layer is seven.

We’re creating a new transparent PNG seven ruffle units

wide, and I’m going to drop in two new sections of ruffle
image at positions 3 and 6. If that sounds confusing, the
diagram to the left *should* clear things up a bit. Again, I’ve
feathered the edges on this image to help it blend with the
lower layers.
One layer tiling curtain: Not exactly impressive
Obviously this is a larger image in both pixel dimension
and file siz e, but it still only tips the scale at around 32kb 
— not outrageous by any measure.
— not outrageous by any measure.

Here’s what happens when we tile this graphic over the first two layers. I’m pretty happy with that
result. True, your eye can pick out small sections of image that seem to repeat (because they
do), but the underlying pattern becomes so complicated that your eyes stops searching for the
similarities.

To look at it another way, if we treat each ruffle purely 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,..

There is a pattern there but it’s very difficult to discern.

In this example, a practically endless curtain background has cost us a grand total of just 53kb.
And of course, it would be relatively trivial to add a fourth layer — perhaps using 11 units — if we
wanted to. However, I’m not convinced that’s warranted here.

Also bear this in mind: This example uses the one of the simplest possible sets of prime number  A 3- ​u nit- ​
— 1, 3, and 7. If we were to use, let’s say, 11, 13, and 17, we could build in much more complex wide tile
variation for a given distance. It really just comes down to the scale of the curtain we choose
versus the screen width.

Example 3

My last example is less about pure practical applications,

and more about having some fun with primes. I’m not going
to break down the theory again, as the core concept is the
same as the first two examples, but you’re more than
welcome to deconstruct it in FireBug.

2,200 years ago Emperor Qin Shi Huang, constructed an

8,000 man terracotta army to guard his tomb. Each soldier,
chariot and weapon is a one- ​o ff, hand- ​c rafted creation.

Using simple CSS, prime numbers and handful of images,

we’re going to raise our own mighty army. What it might
lack in stature, it makes up for in sheer weight of numbers.
Two layers of tiling curtain — an improvement
I give you… my Mighty Legion of Lego!

The legion is built from just eight images that mingle and
weave together to produce thousands of permutations. It uses:

2 images for the background tiles

2 images for the legs
2 images for torsos
2 images for the heads

Summary
Playing around this idea, I’ve come up with some basic principles that seem to
work. Firstly, your stacking order tends to work best when it’s constructed like an
upside- ​d own pyramid.

You can afford to make the bottom layer quite small and repetitive as much of it Our third layer is a 7- ​u nit- ​
gets overwritten by the layers above. In fact, it’s likely that only 20 – 40% will remain wide tile
unobscured.

On the other hand, your upper- ​most layer should always have the largest image
dimensions but also the most thinly-​​s cattered imagery, as
dimensions but also the most thinly-​​s cattered imagery, as
these image elements will never be blocked out by other
layers. It’s also probably best not to include highly- ​
distinctive, eye- ​c atching detail on your uppermost layer.
Keep it scarce and generic.

Either way, some trial and error is almost always required.

Browser Support

I’ve kept the markup simple by applying multiple

backgrounds to the HTML element. This is supported by The final result
all the current main browsers (Firefox 4, Chrome 10, IE9,
Opera 11, Safari 5) but obviously not all older versions.

However if backward compatibility is a prerequisite, tiling

the html, body and perhaps a single container div
element might be a viable option. While the container
element might be non- ​s emantic, it’s potentially giving you
huge sitewide value for a small concession. That’s
your call.

These three examples are the first ideas that came to my

mind, but I’m sure there are some much cleverer takes on
the idea. Perhaps:

An endless cityscape
Nonrepeating woodgrain The Mighty Legion of Lego

Star fields
Densely layered jungle
Cloudscapes

If you come up with a nice take on it, I’d loved to see it.

The stacking order model