The Cicada Principle and Why It Matters to Web Designers

The Cicada Principle

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-year 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 synchronize 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-year cicadas was unlucky enough to emerge during a bumper 3-year 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?

That’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-of-concept. 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.

29x29px29-a.png (2.0kb) 37x37px37-a.png (1.7kb)53x53px53-a.png (2.5kb)

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.

The Result

Less than 7kb of imagery generating a theoretical area of original texture of almost 57,000 pixels square

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-check 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.

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

Example 2

Coining a new measurement system -- the 'ruffle unit'

Coining a new measurement system -- the 'ruffle unit'

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 ‘ruffle 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.

One layer tiling

One layer tiling curtain: Not exactly impressive

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.

A 3-unit-wide curtain tile

A 3-unit-wide tile

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 three ruffle units 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.

Two layers of curtain

Two layers of tiling curtain -- an improvement

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.

A 7-unit-wide tile

Our third layer is a 7-unit-wide tile

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.

Obviously this is a larger image in both pixel dimension and file size, but it still only tips the scale at around 32kb—not outrageous by any measure.

The final result

The final result

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—1, 3, and 7. If we were to use, let’s say, 11, 13, and 17, we could build in much more complex 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-off, hand-crafted 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.

I give you… my Mighty Legion of Lego!

The Legion of Lego

The 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-down pyramid.
The stacking order model

The stacking order model

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

On the other hand, your upper-most layer should always have the largest image dimensions but also the most thinly-scattered imagery, as these image elements will never be blocked out by other layers. It’s also probably best not to include highly-distinctive, eye-catching 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 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-semantic, 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
  • Star fields
  • Densely layered jungle
  • Cloudscapes

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

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://twitter.com/flippantlee Malcolm Boyanton

    This is genius! Just when I start to call myself creative something like this comes along and humbles me. I had never thought of breaking up a repeating pattern this way. Now to find a use on one of my projects..

    :)

    • http://www.doomby.com Colin

      And who knew that math was actually both interesting and useful. Knew I should have done something with my senior math classes other than starting at the football team.

      • http://twitter.com/hegpetz J

        Yeah math is really given a bad rap, if a student can’t see the practical utility then they will never see the value. You might really enjoy the website http://betterexplained.com/ :)

  • http://martealdesigns.com bob marteal

    Outstanding. Well described and illustrated. Perhaps a grassy field bg..

    • Luke

      Design blog with Math geek war in discussion thread – lol.

  • http://twitter.com/helennatasha Helen Natasha Moore

    Beautiful work, Alex!

  • Hinerangi Courtenay

    That just blew my mind… Thoroughly awesome.

  • http://twitter.com/kylir Kylir Horton

    Awesome post! Very interesting!

  • http://twitter.com/cjcrun CJ Campbell

    genuis. The combination of Math and design is so limitless. I’m sure this will trigger a new sequence of css trickery. Awesome!

  • http://www.facebook.com/profile.php?id=648466645 Rick Davies

    Nice

  • http://www.diigital.com Mike Healy

    ‘Genius’ is the word that came to mind for me too. This is really lateral thinking.

  • Guest

    I recently read a book that you might enjoy titled, “Here’s looking at Euclid” by Alex Bellos. He speaks about the notion you raised regarding prime numbers and how the turn up *everywhere* in nature. A great read.

  • Praveen Sewak
  • Rudi

    Brilliant technique, though my inner mathematician raged with the power of 1,000 suns when you said that 1 was a prime number. By definition, 1 is not prime.

    • netw3rker

      my inner astronomer raged with the power of 1,000 stars at the insinuation that there is more than one sun ;)

      • kraftmunch

        He didn’t insinuate that more than one sun exists, he simply stated that his rage contained the power of 1,000 suns.

        1 Sun power x 1000 = power of 1,000 suns.

        • netw3rker

          isn’t 1rage ^ 1000(suns) still just 1rage? :)

          • http://twitter.com/scouris Stu

            1^1000 is most assuredly still 1, however 1×1000 != 1^1000

          • http://profiles.google.com/heidi.sutherlin Heidi Sutherlin

            Delightful. God, I love geeks.

          • Brilhasti

            Best comment thread ever, probably.

          • thaumat

            Yeah, sure, but he said rage with the power of 1000 suns, not rage of 1000 suns, which I think is what netw3rker was trying to say there.

    • Patrick

      Uh…actually, by his definition 1 is a prime. Read it carefully and you’ll see that.

      I would go so far as to say that any definition of prime that excludes 1 only does so by adding an “unless it’s 1″ clause at the end. And that includes definitions that cite ideals rather than integers.

      • Patrys

        Actually by definition a prime is a number that has exactly two positive integer divisors.

        • Robert

          Natural numbers are the same as positive integers, just FYI.

          • Patrys

            I am aware of that but unfortunately English is not my mother tongue.

      • Christian Sonne

        Except it isn’t. There are plenty of reasons why it isn’t, you can read about it here http://en.wikipedia.org/wiki/Prime_number#Primality_of_one or in your favorite post-19th centure mathbook.

        Also, a definition that excludes 1 without mentioning 1: “a natural number that has exactly two distinct natural number divisors”

      • Jeff

        A simple definition that excludes “1″ is “A prime number is a positive integer with exactly two factors, 1 and itself”.

        There are reasonable reasons to not consider 1 a prime number. For example, we say that each number has a unique prime factorization. If 1 was a prime number, then 1 * any prime factorization would be another prime factorization. Also when you think of dividing into groups, it is often not useful to think of dividing into one group of everything. In short a lot of mathematics would include phrases like “prime numbers other than one” if one was a prime number.

        • Primus

          Per your simple definition :
          1 is a positive integer
          1 = 1 x 1 (itself)
          So 1 is prime !

          • shrk

            Are you suggesting that 1 is two numbers?

          • OneISTwoNumbers

            Actually 1 = 0.999.. 
            1/3 = 0.333..
            0.333.. x 3 = 0.999..
            0.999.. = 1
            Fun isn’t it :-)

        • Primus

          Mathematics are full of phrases like “for all integers greater than 0″, so “why not “for all prime numbers other than one”?

    • http://twitter.com/alexmwalker Alex Walker

      Point taken, Rudi :) . I tend to be across a lots of stuff but none of it super deeply. Do you know I copied and pasted the list of prime numbers from Wikipedia but manually added 1 after I thought I’d made a mistake. Corrected in post.

  • http://blog.cankoklu.com Can Koklu

    “1″ isn’t a prime number..
    :-P

  • http://www.colmjude.com Colmjude

    Really clever idea, I like it a lot and I hope people start using it. No one likes too much repetition.

    I have a question about making it backwards compatible. How do you deal with the png transparency issue in IE6?

    • http://twitter.com/jordanmoore Jordan Moore

      People still worry about IE6? *confusedface*

      • Barnae Google

        Only people that worry about their web site not looking like garbage worry about things like IE6. People that don’t care if their web sites work or not stick with just checking against the latest and greatest.

        • Allen

          Come on now. Some level of backwards compatibility is good, but IE6 is quite old. There are 3 newer versions of IE out already. You don’t worry about IE5, or IE4 do you? At some point IE6 needs to be sent to the farm to live with the other old browsers.

        • Jay in Oregon

          Only people who don’t care about standards worry about a broken web browser that has less than 5% marketshare.

          http://blogs.sitepoint.com/ie6-usage-below-5-percent-browser-trends/
          http://ie6countdown.com/

      • http://twitter.com/dland Dave Land

        Even *Microsoft*, of all “people” is urging people to let IE6 die with whatever dignity it has left.

  • http://profiles.google.com/ajay.gpm Ajayaghosh PM

    Genius

  • http://card.ly/taufiq taufiq ahmed

    mind blowing. what else is possible? we only limit ourselves.

  • http://twitter.com/AispireLtd Simon Garrett

    In the words of the small boy riding the tricycle in “The Incredibles”, “THAT WAS TOTALLY AWESOME!”

    It also reached me a exactly the right time since I’ve got two clients who need something exactly like this at the moment. Thanks!

    • Anon

      The phrase you’re looking for is, “That was totally wicked!”

  • http://twitter.com/RuudvdKlugt Ruud van der Klugt

    oh wow, this is just great Alex, thanx!

  • http://twitter.com/ariaminaei Aria Minaei

    Nerdy and awesome! Loved the whole thing!

  • Remko

    Really enjoyed this article, great read, awesome technique :)

  • Adam

    Finally, a real world example for multiple backgrounds proves not only useful, but to be a wonderful and modern design tactic that keeps developers happy.

    I hate it when I get a background from our designer that appears like it could repeat, but it really doesn’t and I end up – against my better judgement and after hours of arguing with him – loading up a 150-400kb background image to keep his design intact.

    Great article!

  • http://twitter.com/Holandes Ricardo Verhaeg

    Haha that’s awesome, great work constructing the concept of cicadas into web design! I really love when I see something like this and will try to apply that not only to background pattern but into the whole design.
    Nature sure is a splendid field of criativity where we can build our minds and designs!

    great article!

  • http://twitter.com/grfxninja Daniel Florian

    mind=blown!
    This is brilliant. Kinda makes me wish I had paid more attention in maths at school :)

  • http://twitter.com/throughtheheart Anna Robertson

    Really wonderful article! Very inspiring!

  • M.Tai

    Brilliant…Just brilliant

  • http://twitter.com/RollsAppleTree RollsAppleTree

    brilliant :)

  • http://www.facebook.com/roman.horokhovatskyy Roman Horokhovatskyy

    Very interesting!

  • http://trackjumper.com Damon Cali

    Simply Brilliant. I’m now looking for an excuse to use it ASAP.

  • http://profiles.google.com/cicerogeorge Cicero Monteiro

    Damn that’s awesome!

  • http://twitter.com/ShaneHudson Shane Hudson

    Ooo how come I have never seen this before? So clever! Once I have wrapped my head around it all I think I shall have a play with it. Thanks :)

  • Anonymous

    Wow! That was really awesome. Great examples as well. You really broke it down.

  • http://www.unsam.ru/ Uncle_Sam

    This is the perfect. Big Thanks!

  • http://developingux.com Caleb Jenkins

    Brilliant.. just brilliant. I see this as having the sort of impact on web developement that CSS-resets had 3 years ago. Bravo.

  • http://twitter.com/djmumbler Edmond

    such an incredibly brilliant idea and also brilliantly presented! Thanks.

  • http://twitter.com/NightMiles John Trainer

    Uh, awesome!

  • http://twitter.com/Juztin Justin

    Love it!
    I’ve never really put too much thought into something like this, but what a great read!

  • Anonymous

    Fantastic Post. It’s really thought provoking.

    In fact I think your technique although founded in nature and applied to Graphic Design, ironicly illustrates how the complexity of nature can be based on simple rules to create seeming complex systems.

    I think this better illustrates what Stephan Wolfram was talking about with cellular automata.

    It’s clearly brilliant to use it as a graphic design principle.

    Maybe Cellular Atomata (CA) rules could be used to generate layout width & height rather than typical asymmetrical patterns? An app like Flipbook could benefit from it, to keep the page layouts feeling designed and fresh.

    I think you are on to something here using CA (Cellular Atomata) as a design pattern.

  • Anonymous

    Pure genius, nothing less.

    Like most game-changing CSS techniques so far, the implementation is so simple, and the outcome so brilliant. Awesome post.

  • http://www.facebook.com/audet.frederic Frédéric Audet

    Nice article. You made us cut pieces of paper to understand this right. But, we come with the following numbers : 1, 2, 3, 1, 2, 6, 1, 2, 1, 3, 2, 1, 6, 2, 1, 1, 3, 1, 1, 6, 1 and it repeats. These numbers aren’t the same you mentioned above. Debate? :)

    • http://twitter.com/alexmwalker Alex Walker

      Good pick-up, Frédéric. Expressing the pattern as a number series was a bit of an afterthought when I wrote it, and your paper-cut test is clearly less error prone than my head.

      Fixed above.

  • http://twitter.com/Montagist William Saunders

    Damn. First off, you can specify multiple bg images? Where have I been?!?! You really do learn something new every day. Secondly, amazing application of principal to practice here. Very useful technique.

    • http://twitter.com/taniarichardson tania richardson

      Haha totally with you on this one. Not sure why I never tried multiple bg images – Sigh.

    • http://www.mikegranados.com Michael Granados

      I KNOW! im kicking myself now

    • David

      The reason why a lot of people dont know the possibilities of multiple background images is spelled with two letters: IE. Up until IE9 (as stated above), IE didnt support multiple background images. Which meant that if you want your website to be IE compatible, you stay away from playing with multiple background images.

      Thanks microsoft.

      • fejese

        I guess multiple absolute positioned, full width and height divs could fix that problem. Unless you care about IE<=6, then you can't use transparent pngs only gifs with much less smooth edges

      • Joel

        OR you could just accept that sites look different in different browsers. Good browsers get the fancy cicada background while older browsers get a simpler repeating background. Assuming that the background image isn’t the reason people go to your site no one will ever notice. (and if they do they shouldn’t care)

  • http://twitter.com/zarawesome Zaratustra

    this is why designers and math people need to work closer together. designers usually hate on math so hard.

  • April R.

    Fascinating.

  • Anonymous

    Simply Brilliant!

  • http://twitter.com/joinBrianCouch brian couch

    For most uses you could get away with only using coprimes

  • http://arvindn.livejournal.com randomwalker

    It’s a sad day when “relative primality” has to be renamed “cicada principle” for the benefit of a math-challenged audience.

    • ben

      Is it really that sad? I mean, how often does “relative primality” ever, ever come up for people whose profession isn’t math, physics, or complex engineering?

      • Ajh16

        Or computer science, but that is really math.

      • Jeff

        Well, it comes up in every 8th grade pre-algebra class for one thing (in a couple different contexts), and then again in algebra and calculus. I think it is also taught in elementary school.

        Seriously, this is a nice technique, but what does it have to do with cicadas, unless you assume the average person is unfamiliar with this basic technique that is taught to them at least five times before they leave school. (Although I am a bit afraid to hear the answer to that one.)

        • Incensedprey

          Hmmmm, my Highschool education went up to precalc. So i dont think im a slouch, but i’ve never heard of relative primality and dont think this has even come up in the last 25 years since HS. Im in the computer field but have nothing to do with math, science or engineering.

          Just because it was taught to us doesnt mean we’re going to remember it. Especially if it doesnt come up.

          • http://twitter.com/hegpetz J

            I also was never taught this concept in this way. Don’t forget that initially someone discovered ‘relative primality’ in a way very similar to this. People can re-discover something that already exists, and it doesn’t change anything. I was taught that supposedly three people independently discovered what is generally thought of as ‘calculus’. Doesn’t really matter if it’s true or not as the end result is many people use calculus to solve their problems, and a few re-figure it out on their own independently to solve their problems. At the end of the day, if the problem gets solved, THAT’S what matters. Now consider the people who benefit from that problem being solved with calculus who can barely handle long division.

            There’s nothing wrong with connecting and relating the independent bodies of knowledge – I think it’s great, self-reinforcing, and able to reach a much wider audience than keeping it technical, OR keeping it simple. So thanks for sharing :) (Example of self-reinforcement: clarifying coprime over primacy (academical technique feeding back into practically developed technique))

            Yes, it is sad that not everyone gets to have a great no-gap education, but in practice, a great no-gap education is very hard to implement with 100% coverage. Thanks for adding to this, from the Wikipedia article and its subsequent noting of the use of the http://en.wikipedia.org/wiki/Euclidean_algorithm could more easily enable someone to make an app to make this process faster. :]

          • Jeff

            While I feel disappointed that a lot of people lost out education-wise, I take back the part about people referring to relatively prime numbers in the context of cicadas. I shouldn’t discourage anything that makes math more physical and real to people.

            When I say elementary school, I should clarify that the exact concept taught is probably not relative coprimes, but the related concept Least Common Denominator (LCD). When adding 1/2 + 1/3, you can multiply 2 and 3 to get the common denominator. 3/6 + 2/6 = 5/6. Sometimes this is “wasteful”: 1/2 + 1/3 + 1/4 = 12/24 + 8/24 + 6/24. You can actually get away with 6/12 + 4/12 + 3/12. In this case, 12 is the least common denominator, rather than 24. The distiction is that the common denominator you get will be the least common denominator when the Greatest Common Factor (GCF), of the denominators is 1. Having a GCF of 1 is what it means for numbers to be relatively prime. This concept was in the fifth grade text book I used in the fourth grade, and I don’t think that was my first exposure.

            But as I said, if the Cicadas are more real to people, then I apologize for discouraging it.

          • Agatha

            Not that I’m being ignorant or anything.. but I’m a little confused as to why LCM or LCD and GCF came to be related to relative primality? I am not sure if it was really thought back when I was in grade school… though it might have been mentioned in passing now that I’m in high school. All I know about relative primality really is about the concept of two integers having one as their only common divisor. So yeah.. hehe.. am a bit confused here how it is related to the cicada principle.

          • Peter

            There are very serious reasons why everyone should be aware of relative primarity, why you have studied it it at school and why you should be using it on everyday basis. It’s ok to forget the term itself, as ling as you keep the concept =)

            The reason is: relative primarity is key to measure. If you are to compare two entities and express there relation somehow precisely, you need some unit — the third entity, such that you can express it’s relation to both first entity and the second and then combine those two expressions to figure out precise relation of the first entity to the second. The biggest such entity, if exists at all, is unique. The sizes of first and second entity expressed in such a unit are relatively prime.

            Actually this concept, as measure itself, goes beyond numbers and was described by Euclid in his ‘Elements’ some years ago.

            Agatha, cicada lifecycles have gcd = 1, i.e. they are relatively prime

            I’m a little bit disappointed too, but I think designers shouldn’t know math. It’s better to learn from nature directly =) She knows better.

          • http://twitter.com/hegpetz J

            Sorry it’s been a week before I checked this again but thank you Jeff! I was actually taught about Lowest Common Denominators in about the same grade as you, but my teacher did not nearly do it justice in the way that you have. Now I have something to go look up! :)

            Also I’m glad that you agree that anything that helps someone understand is useful :]

          • other Peter

            I could be equally strident and insist that math experts who don’t have a better grasp of the differences between “there” and “their”, as well as “its” and “it’s” make me sad. Which would be correct but ridiculous. People have different focii… Great article and interesting responses.

        • Australian

          The use of relative primality between Cicada and predator life cycles is explained in the article – and it’s interesting! Lots of time and natural selection discover prime numbers – amazing!

        • David

          Ahem. Sorry to be blunt, but if you try to read the text above, you might learn the common denominator between the technique described and cicadas. Just a friendly advice.

          • Jeff

            Hah! I wasn’t concerned with the common denominator, but rather unique common factors… Specifically, the commonality has come up in many different contexts, so expressing this in terms of cicadas felt like giving an old idea a new name to me.

            This is actually pretty scary. I think if I hadn’t understood this concept from a very young age, I would have enjoyed fractions a lot less. I apologize if I came across sounding elitist, because I know that isn’t helpful. It’s possible a lot of people learn these concepts, but they think of them as only being applicable in limited settings, so when they see a familiar concept in a completely new scenario it surprises them.

            Or maybe I have it backward. Maybe if everybody learned about cicadas in grades 2-5 before they learned about fractions, we would understand math a little better as a culture.

          • Talia

             I think a lot of concepts from abstract algebra and number theory should be taught at a young age, but the fact is that they aren’t, and it makes math-people look bad when someone gets up on a high horse about knowing the technicalities as opposed to observing patterns. I majored in math and didn’t learn about the actual theory behind this sort of thing until sophomore year of college. Math in my elementary school really emphasized computation. We were just really slow computers.

        • http://anothernotebook.tumblr.com kalsangikid

          Hmm, not in my pre-algebra class. You can’t discount the fact that people from other countries, where concepts are taught differently or maybe not taught at all, might chance upon this blog entry, too.

        • Tonebender1

          Theres got to be another forum somewhere for highbrow mathematicians if you want to quibble about mathematical terms and definitions. The writer has used an effective method of communication. You generate interest with a compelling title which can tie into a concept explained in the body of the article. It applies to the technique described in the article in a way that even the least common denominator (like me) can understand.
          Unless your presently immersed in mathematics, “Relative primality” is a term that -even someone who might remember it from school days would probably have to go through a mental review while reading the article. That process could leave the trail cold for us “average” readers. Good writing uses illustrations and what better than from creation itself. Cicadas are known for their seemingly random cycles. I think its a good illustration and hats off to Alex Walker.

        • LiveLongDieFast

          Jeff: “Well, it comes up in every 8th grade pre-algebra class…”

          Me: Jeff… that doesn’t actually matter.

          Jeff: “…what does it have to do with cidadas…?”

          Me: Cicadas are cool. The fact that prime numbers help them avoid becoming an all-you-can-eat buffet is also cool.

          By starting the piece talking about cicedas and their rock star finale, the writer makes the story… pay attention now… interesting. That’s important because the writer wants people to read it. Then he wants them to remember enjoying it. “Relative primality” isn’t nearly as cool as rock star cicedas.

    • Brian

      Well, Math geeks have been running the WWW since its inception 20 years ago and not one of them thought to do this so I’d say yes, he richly deserves to rechristen this whatever the hell he wants. Besides, what’s wrong with making math more accessible and relevant?

      • Anonymous

        I beg to differ – math geeks have been losing control of the internet by leaps and bounds over the last 10 years (Facebook, Twitter, WordPress….)

        • http://twitter.com/hegpetz J

          But none of those technologies actually control the internet, they simply ride on top of the protocols already created by math nerds (most specifically TCP/IP and HTTP). They may act as a loud voices on the internet, but they are just as equal as http://www.whatismyip.com when it comes to ‘control’ over the internet – another node in the network. They can control who they talk to, and not a whole lot more. Now if Facebook starts shutting down other sites, other than through court orders, then you may be on to something. But even then, that’s more government interference (via court orders and compliance) and force of control than a website actually being the ones to take something down.

          This isn’t bad, it means that if you were to create and support the same services, and inform people about it and to cause them to want to use it – you could make Facebook, or Twitter, or WordPress. The first two just act as large community hubs, the latter being a very popular blogging/pseudo-CMS platform. The only thing special about them is that lots of people use them, giving them inherent value. They are designed well (arguably) and do the job, but just like old abandoned ruins of once glorious cities, they are completely temporal and could always go the way of Geocities and Angelfire.

          Sorry for this long post, not an attack, just bored :] But for seriousness, we ALL have been losing control over the internet, and the culprit there is more or less governmental.

    • http://www.friedo.com/ Mike Friedman

      Why don’t you go take a long random walk off a short sequential pier?

    • http://pulse.yahoo.com/_2E4WKNVSMG5DHOLZISYJ42IIZE Anonymous

      You go ahead and do your math while I go screw my superhot girlfriend for the second time today.

    • http://twitter.com/dland Dave Land

      The “cicada principle” is poetic, “relative primality” is prosaic. It also shows that this guy’s mind puts things together in ways that most of us never consider.

      Tout your superior education if you like, but I will stack my BS from Carnegie-Mellon University against almost any other, and I never came across “relative primality”, and never saw it applied in more than 30 years of working around technology.

      • Kuba

        You may simply not realize it. Relatively prime numbers (numbers with no common factors other than 1) are used in a host of algorithms that you potentially use thousands of times a day. You DEFINITELY saw it applied, I guarantee it.

        As you claim yourself — you never came across it. So how THE HECK would you recognize it even if you did “see it applied” sometime later? Either you falsely claim that you didn’t ever hear it during your school years, or you simply didn’t have a chance of recognizing the application because you didn’t know about it in the first place!

        • http://twitter.com/dland Dave Land

          Whatever, dude: “The Cicada Principle” is a beautifully expressive name for the practice of using relative primality to generate organic-looking textures. Let’s just leave it at that.

          You proved that you’re smarter than I am: you win 1 internets.

        • Robert Folkerts

          This is just silly. Clearly Dave gets the concept of relative primality, even if he never heard the words before. The words are fairly self explanatory. I’ll admit that I had not heard those word either, but I am a lowly physicist. Like Dave, I found the Cicada principle to be a great way to introduce his insight. I am reminded of Richard Feynman’s discussion about the difference between ‘knowing’ vs. ‘knowing about’. You have to think hard to know something, but you can ‘know about’ without any deep thought. Getting hung up on words usually indicates confusion between ‘knowing about’ vs. ‘knowing’.

    • le sigh

      Quick: Do a Google search for the phrase “relative primality.” How many pages of results do you have to go through before you find it used in anything other than a university mathematics course?

      I stopped looking after 7 pages of only university math. I don’t know where you went to school, but it that phrase is NOT used outside of university.

    • Kuba

      I agree. In Poland we were doing GCD and factorizations methinks in 5th or 6th grade at the latest. As to why would anyone who isn’t in math, physics or complex engineering need that? It tells you something fundamental about the properties of numbers. You should know it for the same reason you “need” to have exposure to art. In strictest sense of the word, you don’t “need” art, sports, entertainment, right?

      • Anonymous

        I regret that I can only check the “Liked” button once.

      • Anonymous

        You need to be exposed to it, not to memorize it all. The same is true of art.

        Having been exposed to it, if you do actually need it you’ll recognize it and pick it right up.

        Regardless of if you remember the name.

    • Rizmatic

      I think it’s a little sad that you would be upset that not many people know about relative primality. They are probably all too busy having lives I guess.

    • http://twitter.com/kbenton kbenton

      Man, I have a degree in Physics and I sure don’t recall ever hearing the term “relative primality” in my life. Maybe I forgot it.

    • Tonebender1

      Allright DaVinci…So you’re much more brilliant than some of us “math challenged”, right dominant designers. Yes, I tend to reside more fully in my right mind and will only delve into the left for a little practical math if I must. That is not only a preference, but probably as you intimated, a testament to the problems with public education and it’s preoccupation with social engineering at the expense of true education. Or maybe its just that I was overly distracted by girls and I was a lazy, unfocused student.
      I would love to be more like you and Leonardo, but alas, I am not. But I’m thankful that my two brain cells are enough to have a design career all these years and that I could understand this article and benefit from what it has to offer.

      • Talia

         Although I don’t agree with the pompous math dude, theoretical math is really an art. It relies very strongly on creativity, and it’s very beautiful. I’m sorry that someone is giving math geeks a bad rep, but seriously, if you ever get bored, it’s worth looking into some of the elegant properties of math that were hidden from you in classes growing up that stressed computational proficiency above understanding.

    • Anonymous

      It’s a very simple fact; “relative primality” is not useful to most people. It is not actually taught to most children. Maybe it was taught to you. Maybe other kids learned more about some particular event in history. Children should not try to memorize every single thing they are heard or read. The result would not be smart kids, it would be low quality encyclopedias with poor social skills.

      That there is also some other abstraction is besides the point of this article.

      The point is that this system that exists in nature, that cicadas use, is useful in web design. Just as cicadas emerge in an unexpected pattern, so can a small number of images emerge in an unexpected pattern. The result is a more “natural” look.

      Note that whoever came up with your preferred name didn’t invent this. This is an aspect of nature that we can observe, and observe again. We can us the same name or a different name, whatever is useful to us. The name is not the part that exists in nature.

      Also, there is nothing “math challenged” about placing the context ahead of the abstraction. In this case, the abstraction of an abstraction. Obsessing over the name of a formula even when your proposed name has less semantic value in problem domain, which is not math, is itself the only thing here that is math challenged; you’re challenged to find joy in people making wonderful use of math.

    • http://profiles.google.com/iendacard Chris Bryant

      And yet somehow, with your superior intellect, you still managed to make yourself look like a total jackass.

      For what it’s worth, having more knowledge on a given subject than others doesn’t give you the right to be a pompous ass. Maybe instead of touting your intellect, you could spread your knowledge.

      To the author: brilliant. The applications seem to be nearly endless. I will definitely use this.

    • Willpage8

      Oh really randomwalker, how clever….Seriously, it was an informative thread and some web designers (or IT sudents like myself) may have found it informative, and who knows…..possibly even helpful…. Maybe you could try sharing something helpful!

    • curtis mcallister

      Six months ago I read this article and thought it could have some practical implications for design and development in a wide range of computer tasks. In trying to find  the article again, I typed in “prime numbers background css”. And here it was!

      But you know why I remembered this was a prime numbers background? Cicadas. Don’t get me wrong, I remember lowest common denominators and greatest common factors and reducing my fractions from grade school too, but it’s the effectiveness of the cicada story in anchoring the concepts in my memory that you’re completely forgetting in your pathetic lambaste of an excellent mnemonic.

  • http://profiles.google.com/christopherolah.co Christopher Olah

    I don’t know if you’ve ever studied group theory, but what you’ve discovered is the basic properties of product groups.

    In the case of the Cicada, the key thing was that prime order groups have no non-trivial subgroups, so the boom and bust cycle can’t fall into it. Alternatively, you can look at the boom and bust cycle, B, and the Cicada life cycle, C, as a product group B⊕L which since they’re coprime (notice that this is a far weaker condition than them being prime, this will be useful in a minute) means its a cyclic group or order |G||H|, in other words, won’t repeat for a long time.

    When you get on to your practical examples, you’re doing the same thing. For example, your first example of PNGs with widths 29px, 37px, and 53px can be thought of as ℤ₂₉⊕ℤ₃₇⊕ℤ₅₃, which is cyclic since they’re coprime and has order 29*37*53 for the same reason.

    I know that this explanation doesn’t actually explain much and is probably hard to follow, since I’d really need to explain a bunch of group theory to do better and am in a rush, but you can just research groups, cyclic groups and direct products if you’re interested. If not, the practical thing to take away from this is that you don’t need your elements to be prime, just coprime (ie. gcd(a,b)=1).

    • Anonymous

      I’m surprised that I actually understand what you just said, having taken a lot of abstract algebra. I thought I wasn’t getting what was going on in the class but I just understood what you meant. If only my prof would have used examples like this.

  • http://twitter.com/ajinair Ajith Nair

    If this is not awesome, then nothing else is.

  • http://catechu.org Saketh

    Clever.

  • Hank

    Wonderful, thank you. I am going to pass this idea on to another group that produces lots of repetitive material — knitters.

    • http://ampetc.tumblr.com/ Esca Beloved

      I love that your name is Hank, specifically in relation to this comment. /craftnerd

  • Ramon Buckland

    Brilliant. Really liked this. Thanks.

  • Anonymous

    Something is off with your math regarding the Lego Legion. 2 backgrounds, 2 heads, 2 legs, 2 torsos gives you 2*2*2*2 = 2^4 = 16 permutations. Also a simple examination of the image/page shows many more images for each body part.

    Great idea – bad math.

    • dev

      there are multiple body parts included in each image. inspect the images

      http://www.sitepoint.com/examples/primes/lego-bot2.png

      • Anonymous

        Ah, I misunderstood the writing. 8 images but each image has multiple backgrounds, legs, torsos, or heads.

      • Ajh16

        Thanks for the clarification, I misunderstood the original explanation as well.

  • Mrscruff

    That’s absolutely brilliant. Very cool work!

  • Anon

    1 is not a prime number. A prime number is defined as having _exactly_ 2 divisors. 1 has only one, and thats 1. :) what a blunder! otherwise, great idea

    • Geoff

      Well, but prime numbers have FOUR divisors. Seven, for example, is divisible by 1, 7, -1, and -7.

      • Kuba

        Primality is a property of natural numbers. Negative integers are not natural numbers :)

  • Ethana2

    I think it would be absolutely awesome to have a whole slew of desktop wallpapers like this. Especially if your screen is 2560×1600.

  • http://drvid.ca D. Starr

    Nice technique! Would love to see a gallery of more examples…

  • http://claimid.com/mapache Mapache

    Fizzbuzz for image generation. Neat.

  • mb

    The same technique was used in O’Reilly’s “Flash Hacks” book to re-create the opening of “The Matrix.”

  • cornel panceac

    Before writing your article, were you aware of this page?

    http://arachnoid.com/prime_numbers/index.html#Mathematical_Locusts

    • http://twitter.com/alexmwalker Alex Walker

      Hadn’t read that piece, but strangely, Arachnophilia (Paul Lutus’ HTML editor) was the editor I learned to code on 14 years ago.

      • cornel panceac

        Well, things like this happen. Thanks for promoting this idea.

  • http://twitter.com/ashrafslamang Ashraf Slamang

    Wow! I’m blown away! This is ingenious, no matter what anybody says! I usually end up making larger slices of a texture for a background-image and clone out any detail with too much contrast in my efforts to keep it as natural a pattern as possible. This is just game-changing.

  • Anonymous

    Nice. I did something roughly analogous ~15 years ago with looping sounds…

    • Chill

      And Brian Eno before you

      • Anonymous

        True enough – though I certainly hadn’t heard of his work at the time.
        Oh, and I mis-calculated – it was actually ~25 years ago, in an early multi-media application – “Palenque” – for which I did the programming. Time flies…

      • Unify57772

         What is this Brian Eno composition called?

  • Anonymous

    If Chuck Norris were a designer, he would do things like this.

  • Guest

    This is half-asset, what we really need is support for fractal-generated textures built into CSS

  • http://twitter.com/zoltandulac Zoltan Du Lac

    Awesome post. Just goes to show that the knowledge of post-secondary mathematics *is* useful for web design. The math geek in me thought CSS3′s matrix transform was cool — this is not just stunningly interesting from a math perspective, but really damn useful! Thanks for this.

  • Thatrickguy

    The lego demo and my own recreations appear to be working in FF4, but not working in IE9. Fiddler is showing the background image request as only parsing the first URL().

    html: background-image:url(Prime5.png),url(Prime11.png),url(Prime17.png);

    raw for IE9: GET http://localhost/test/Prime5.png),url(Prime11.png),url(Prime17.png HTTP/1.1

    • http://twitter.com/alexmwalker Alex Walker

      Interesting… I’ll look in to that. Thanks for the heads up.

      • http://www.pmob.co.uk Paul O’B

        Great article Alex.

        The lego demo will work in IE9 if you add the missing docytype ;)

    • http://twitter.com/alexmwalker Alex Walker

      Fixed! Something was triggering IE9 into quirksmode on that page. Thanks for that.

      • http://profiles.google.com/jal.nosta Kilian Hekhuis

        Doesn’t seem fixed, IE9 displays only the red background. No LEGO to be seen.

  • http://twitter.com/riemino riemino

    Great idea. It’s posts like this one that open up other possibilities in web design and development.

    Thanks for your contribution. :)

  • Anon

    I stopped counting at *20* Lego heads and *20* Lego torsos…

  • http://www.bnpositive.com/blog Jason Bean

    An amazing mixture of math and design. Very cool stuff!

  • Daniel

    Wow, this is the single most ingenious thing regarding CSS that I’ve seen in a long time. Kudos to you!

  • Eugene T.S. Wong

    Wow. Thank you.

  • http://mstudios.myopenid.com/ Marlyse Comte

    Great article. And just in time for my next project which includes… large, tiled backgrounds!

  • http://www.threeboy.net Threeboy

    This is quite cool – I didn’t see the value when you were just using colored bars but the curtain example really drove it home.

  • Slycrel

    Been messing with making a RPG tilemap look good — specifically the ocean and large sections of grassland looking less tiled. This is perfect for such a case thank you!

  • http://twitter.com/BettinaTizzy Beverly Millson

    You are one wild and crazy guy :P And smart.

  • http://www.yoga-singapore.com Kian Ann

    The concept of overlaying multiple bgs to create a somewhat more random pattern is MIND BLOWING!

  • http://twitter.com/kamranayub Kamran Ayub

    I’m glad there are smart people out there that write posts like this. Awesome!

  • David

    This reminds me of some fun experiment a friend and me played around with in the childhood of the web. Our little games was about using gif’s of animated squares (2×2 tiles, animated in a circular pattern). Depending of the animationspeed (and of course the power of the processor) and the refreshment rate of the monitor, the result could sometimes be really interesting.

    Thanks for a really good article, that made me remember the time when computers were more about having fun, than about making your living. ;)

    • Chrisbrandt

      I haven’t looked in years, (don’t even remember how now) but are app programmers still hiding Easter eggs?

  • Jo

    You know, flooring companies go to great effort to avoid repeating patterns in their faux-wood/stone/brick floors. They catch the eye in real life just like they do on screen, and are a dead giveaway for fake surfaces. A possible commercial application? Do they know about this already, I wonder?

  • http://r3dux.wordpress.com/ r3dux

    Fantastic article & useful across a wide variety of areas (game graphics etc.) – many thanks!

  • drcatid

    Cool didn’t know you could have multiple background images! Going to use this trick on my next website.

    From my most comfortable vantage point of computer science you are implementing a sort of pseudo-random number generator with a pixel-based abacus heh =)

    If you read up on Linear Congruential Generators (LCG) you’ll see a mathematical treatment of the “pixel offsets” which can also affect the visual randomness. These are described in depth in Knuth’s TAOCP (and on Wikipedia:)

  • http://www.ianmrountree.com Ian M Rountree

    Wow, Alex, this is something else.

    And, given the attention search engines are now purported to be paying to site load time, this kind of finesse is going to become invaluable to high-capacity site designers.

    Hats off!

  • http://twitter.com/nedlud Lucien Stals

    I’ve though about doing this for music too. Imagine a game soundtrack for some ambient background that used 3 (or more) tracks with a different number of bars that kept repeating. One track could repeat every 3 bars, another every 7, and another at 13? It woudl be a looong time before the music bagan to repeat itself.

    • http://twitter.com/alexmwalker Alex Walker

      Lucien, a few people have mentioned that Brian Eno recorded a soundtrack album using primes numbers a while back. Apparently church bell ringers are often set up to peal at prime number beats to produce endlessly variable melodies.

      I’ve been learning some interesting stuff over the last few days.

      • http://twitter.com/nedlud Lucien Stals

        As always, somebody beat me to it ;)

        But I should check that out.

        Thanks

    • 123

      Lucien, you may be interested in hearing Conlon Nancarrow’s Player Piano Studies. Hand-punched on paper rolls in the fifties, they are anything but “ambient”…

    • http://twitter.com/Frenzie Frans

      Didn’t they used to do this (or something a lot like it) with MIDI soundtracks in (some) games prior to roughly the mid-’90s?

  • http://profiles.google.com/korymath Kory Mathewson

    This is an absolutely incredible article.

  • cdw9

    I think i t would now be interesting to see this effect applied to backgroung images positioned with percentages, so that as you adjust the browser width, the pattern changes even more

  • Regis Zaleman

    One of the most inspiring article I have read in a long time in web dev trickery! The whole concept is beautiful, thanks.

  • Egiova63

    Brilliant. As soon as we kick these IE annoyances… Very clever intuition. Intelligent post.

  • http://www.facebook.com/people/Joseph-Rissler/100001305363328 Joseph Rissler

    That’s amazing. I never thought to use primes as the basis for a background.

    One thing I’d like to point out though, which might be convenient. Your numbers don’t need to be strictly prime. They just need to be coprime. In other words, they share no common factors.

    Two prime numbers will be coprime, for example. But also pairs like 10 (2*5) and 21 (3*7). In other words, the lower the GCD (or the higher the LCM; lower GCD = higher LCM) of your numbers, the better. Primes are just convenient in that the GCD of any prime and any other number that is not a multiple of that prime is 1.

  • http://www.facebook.com/people/Joseph-Rissler/100001305363328 Joseph Rissler

    Just made a quick demo of this. Total size of Images+css is 993 bytes. That’s pretty damn nice. (I cut out a lot of the image file size by making them 1px tall. You can do the same with your first example, and probably get an even smaller size than I did.)

    http://undecim.org/primebackground/index.html

    I’ll make a few more. Maybe make take a shot at some of the ideas you listed at the end of the post.

    • http://twitter.com/alexmwalker Alex Walker

      Joseph, that is super-cool! I got a little buzz working the idea up, but to see other people jazzed enough to make stuff like this is twice the buzz.

      Thanks :)

  • Vale

    Awesome article. I never though of this application for prime numbers.
    BTW Italian cicada’s noise it’s prettier than american’ :P

  • http://twitter.com/pu_design Frank Puschmann

    Outstanding! You are a genius, this is totally impressive!

  • http://twitter.com/vetesnik Oldřich Vetešník

    This is awesome, thanks a lot!

  • Toki

    This
    WEB
    page
    layout
    is
    killing
    my
    CPU
    :-(

  • Hassan Derakhshandeh

    What a clever technique! I also very much like the name you chosen for it: “the cicada principle”.
    Thanks.

  • Melvin Jose

    Add some some more images of the same “ruffle” size and some nifty javascript… You could get some nice random effects. A different look everytime the browser does a refresh.

    Thanl you for this inspiring post!

  • Ryan Dunn

    As a massive maths nerd, this is awesome as hell.

  • http://accuser.cc Matthew Gibbons

    Awesome use of CSS and math. I knocked this up last night – http://cicada.heroku.com. Enjoy!

    • http://twitter.com/alexmwalker Alex Walker

      Great stuff, Matthew!

      Hey, might be cool if your demo could include a little semi transparent info box in the top left corner showing the standalone images, the image dimensions and the repeat length. Just an idea.

      • http://accuser.cc Matthew Gibbons

        There, I fixed that for you. :)

        http://cicada.heroku.com

        • http://twitter.com/alexmwalker Alex Walker

          Dude, that is awe. Some. And a super-quick response too. Love it.

        • Trace

          Nice! But why are you giving the images in the list a fixed width? What makes this work is the (sub)prime image width. So why not show the images with their real width?

    • http://profiles.google.com/jer.eps Jeremy Epstein

      How does the site serve randomly chosen image sets on each refresh?

      • http://accuser.cc Matthew Gibbons

        I generate the PNG images on the fly, using random numbers seeded by a path parameter. For your pleasure, I have uploaded the code (it is a Sinatra app) to Github: https://github.com/accuser/cicada. Enjoy!

    • Anonymous

      Sweet! One point though, it seems your images always left-justify the stripe, so your patterns repeat a lot quicker than the article. Add a random x to the stripe and it will be even more awesome! :)

  • http://aaronstone.co.cc/ Aaron Stone

    Clever article. The way you’ve explained it, even non-designers can understand it because they can relate it to cicidas. =) Thanks for this wonderful article.

  • http://twitter.com/marksteggles Mark Steggles

    Very cool post

  • Jonathan Puddle

    Genius!

  • Lorenzo

    I will keep this page in my favorite to get a list of all the way you can comment something absolutly outstanding! Go haed and thank you for posting!

  • Anonymous

    You’re a genius of generous magnitude… Lovin the mighty legion of lego!

  • http://twitter.com/thousand thousand

    LOVE THIS! Number theory and design!? My two favorite things! Definitely going to use it at some point!

  • http://www.waynejohn.com/ Wayne John

    I think my head is about to pop. It’s all too much, lol!

  • http://www.facebook.com/gantlaborde Gant Laborde

    It’s worth mentioning that this principle is how Hash tables work in programming. By using a prime, you can make a lookup space where each item gets it’s own spot, and can be looked up via division. This allows AMAZING lookup speeds, because it’s technically O(1), where the only drawback is fragmentation.

    I’ve used this same concept to make really cool looking animations. Since the lowest common denominator of A < N where N is a prime numner is (A * N) you can do do that cool decoding lock animation that you see in most movies where they are breaking a cipher. Like at the end of War Games :)

    Thanks for the tips!

  • http://www.jamiemaing.com Jamie Maing

    Amazing stuff you’ve demonstrated here. I’ve always loved permutations, combinations and was good at it too. Never thought it’d come in handy with all the web design I’ve been doing. :) Not to mention having multiple background images at the same time…didn’t know that was possible, lol.

  • Antonioferreiragigante

    Incredible

  • olivierb

    Very nice idea.
    Note that this seems very related to Moiré patterns and could lead to nice (slowly) animated backgrounds.
    http://en.wikipedia.org/wiki/Moir%C3%A9_pattern
    http://en.wikipedia.org/wiki/Line_moir%C3%A9

  • bc poster

    I read most of the posts yesterday. My apologies if the following was corrected after that.

    Contrary to yesterday’s posts, the two patterns that are being overlayed do not have to have prime length. Moreover, they do not have to be relatively prime (two numbers are relatively prime if the greatest common divisor is 1). The idea is more general than that.

    Suppose I have one pattern that is 12 units in length. Suppose I overlay it with another semitransparent pattern that is 15 units length. Note that 12 and 15 are not relatively prime–their greatest common divisor (gcd) is 3. Nonetheless, the resulting pattern will have a period of 60 (i.e., the pattern will repeat after 60 units but not sooner). Where did 60 come from? 60 is the least common multiple (lcm) of 12 and 15.

    In general, given a pattern with period equal to M units and another with period equal to N units, the period of the overlay pattern will be lcm(M,N) units.

    (Just a note that lcm(M,N) = M*N/gcd(M,N). This general formula shows that when the periods of the component patterns are relatively prime then the period of the combined pattern is just the product of the periods as has been discussed.)

    More generally, if I have k component patterns with periods equal to M1, M2, … , Mk, respectively, then the period of the combined pattern will be
    lcm(M1, M2,…, Mk).

    There are a couple of subtleties here. The first is, what is a unit? That just depends on what you’re counting. In the first example in the blog, the unit is a pixel. In the second example, it’s a “curtain fold.”

    The second is, what is the period of the component pattern?

    To answer this, let’s do another example. Suppose that I have component of length 6 and another of length 15. I should get a combined pattern with a period of 30–since 30 is the lcm of 6 and 15, right? Not necessarily!! I did not say that *periods* of the component patterns are 6 and 15. Just because a component pattern has length 6 does *not* mean it has period 6. In particular, if this component pattern is 123123, then it only has period 3. If this is combined with a component pattern with period 15 the resulting pattern will just have period 15. You are not saved from the distinction between period and length just because the length of a component pattern is a prime number. It could be the case that all the units of the component pattern are the same. In this case the period is 1 and having a prime length won’t help you at all.

    Finally, let’s generalize this to two dimensions. In two dimensions you talk about a “unit cell” instead of a period. (If I have a tile of x units by y units and I tile the plane with it, the unit cell would be the smallest rectangle that would generate the same pattern.) But the generalization is pretty straightforward. Suppose the unit cell of component pattern is Mx units in the x direction and My units in the y directions. Likewise, suppose the unit cell of the second component pattern is Nx units in the x directions and Ny units in the y directions. Then the unit cell of the combined pattern will be lcm(Mx, Nx) units in the x direction and lcm(My, Ny) units in the y direction.

    Have fun!

    Bill

    • http://twitter.com/alexmwalker Alex Walker

      Great stuff, Bill. I’m a designer with some sciencey leanings so it’s great to have a real mathematician cover off the theory properly.

  • Umlimo

    Have you considered using Penrose tiling for infinite non-recursive effects?

  • http://imperion.pl Paweł P.

    WOW! This idea is great!
    Good work! Bye!

  • http://pulse.yahoo.com/_V7FUSHSJAKFDKHPYLQKKAMABYM pab_men

    Good article!

  • Teenager

    if you were to make code for a continuous pattern the size of terraforming, then use a random number generator to find “where” on the pattern you were looking, it would be a unique experience every time.

  • Dmitri

    It’s unbelievable!!!

  • Johan Sundström

    Suggestion: for the first three example pictures with plain blue, puce and beige (and transparent!) parts, adding an “outline: 2px dashed #888″ or something makes it a ton clearer what is going on, as there isn’t much mention about the transparent part (I usually read “semi-transparent” as “0 < x < 100% opacity, distributed evenly across the entire picture”) in the article, and as they seem like solid-colour images to the naked eye now.

  • http://profiles.google.com/kay2dan Kay2Dan Hay2Dan

    This was wonderful. I read through the whole thing and yet Im sure I dont understand much of it… math was never my strong point. Something I will be reading again. Cheers Alex

  • Anonymous

    Very interesting. Thanks for the post.

  • http://matthewlein.com Matthew Lein

    Really brilliant idea.

    I incorporated the stripes concept into a JavaScript that makes stripe patterns like that one. Appropriately name cicadaJS.

    http://matthewlein.com/cicadajs/

  • http://profiles.google.com/authorandrew Andrew Joyce

    I have put this idea into practice at http://www.mosaic-web.com – thanks for the amazing article!

  • Guest your name

    What if the predator’s boom and bust cycle is only one year?

  • Carl – Web Courses Bangkok

    I am literally amazed about this Alex, thank you very very much. I want to bring this to our Intermediate Web Design courses here Web Courses in Bangkok. They will love it!

  • http://www.webcoursesbangkok.com Laura – Web Courses Bangkok

    Amazing…never thought that maths and design would make such a great couple!

  • http://ensightful.com Dan Owen

    I’ve used prime numbers to control the timing of pseudo-controls in Flash. Again to increase the sense of realism by effectively eliminating the possibility of repetition. Repetition appears to make everything booring.

    Nice work!

  • Anonymous

    I noticed that the Lego background repeated vertically every seven rows (see screenshot at http://www.flickr.com/photos/randycox/5616462525). For a long page of content, this vertical repeating would be much more noticeable than horizontal repeating. It seems like it would be fairly simple to apply the prime number intervals not only horizontally, but vertically as well, which would take care of the problem.

    • http://twitter.com/alexmwalker Alex Walker

      True Randy, I designed the Lego demo with page width rather than page length in mind — the tiles are 3×7, 2×13 etc.

      It wouldn’t be hard to reconstruct the example to shuffle the parts vertically.

  • mOrloff

    Oh man, this cicada concept is awesome! I love it!
    Here’s a twist to take it up a notch (to further randomize the randomness):
    Use a sprite for your BG layers, and define your first layer out of that according to your liking.
    Then, using PHP, have the areas and the dimensions of those areas randomly selected/defined from a list from a list of prime numbers for the subsequent layers (within the limitations of your sprite, of course).

    Not only could you have an absurdly huge area without repeats, but EVERY time the page gets loaded there is a unique version of that background.

    AWESOME!

    • mOrloff

      But alas, the love goggles for this concept allowed me to look past the fact that only the width and height can only be set once :(
      Technically, we can still use a sprite and randomly assign X/Y positions…but that just wouldn’t be the same :).
      I’m gonna give it a whirl anyhow.

  • Steve

    Wow this is very bad ass!!

  • http://twitter.com/templatejuice Template Juice

    Excellent stuff you are working on. Watch out coluorlovers

  • jim

    What made you choose position 3 and 6 in example 2?

    • http://twitter.com/alexmwalker Alex Walker

      Jim, it doesn’t matter that much, but it just means that my pattern started out with a simple 1, 2, 3, etc.

      If I’d selected positions 2 and 4 the pattern would have gone 1,3,1,6,2,1,etc .
      Basically if I use 4 unique ruffles, and 1,3, and 7 as my magic numbers, I’ll get the same amount of variation — 21 units between repeats — regardless of where I position them. Only the pattern will change.

      However, if I was to make the first tile 2 ruffle units wide, I’d effectively double the ‘length before repeat’ (i.e. 2x3x7=42) — for the addition of maybe 8kb.

      In the curtain example a ruffle unit is roughly 100px which puts the first repeat at well over 2000px. Not too many displays are over 1920px, so that’s probably enough.

  • jeremy

    You, sir, are a genius and deserve a nobel prize.

  • njw

    Very good application of a principle I have seen used for years in motion graphics and flash but not plain old web pages. The use of multiple backgrounds continues to amaze me.

  • Dave

    Well done, sir. My hat is off.

  • Lynde

    I am an artist who is visually pattern sensitive, yes, I walk into a room and spot that repeated knothole on the floor immediately. Being a bit OCD and obsessed with perfect symmetry in a world where art teachers beat me up for years to let things happen asymmetrically because that is far more interesting and attractive to the eye. I LOVE this article and answer to keeping the sense of symmetry I love but giving the appearance of asymmetrical form.

    Not to mention that reading all this kept me in stitches for well over 30 minutes. Who cares what it is called or why? Pretty much everyone it appears. So in the spirit of all this spirited debate, I vote for Cicada.

  • Stephanie Casha

    Very interesting idea…

  • http://profiles.google.com/mguerra79 Márcio Guerra

    Awesome, awesome, awesome… I love prime numbers (well… love is too strong, but I do like them!) and the way, first, cicadas use them, is very nice, and then, web design coming from the nature, or using nature principles, this is very, very nice!
    Congrats on this article, really!

    Cheers from Portugal

    Márcio Guerra

  • Stephanie Boucher

    Hi, I can’t get the multple background image css to work. Is it a browser problem? I’m using IE8 and Firefox 3.5.18. thanks! stephanie

    • http://twitter.com/alexmwalker Alex Walker

      Hi Stephanie,

      Unfortunately none of the Internet Explorers before IE9 support multiple background images. Your options are:

      1) Set a single ‘acceptable’ tile for older browsers and then set your nicer cicada tiles straight after. Older browsers will ignore the cicada stuff.

      2) Set your backgrounds on multiple elements. For instance, HTML, BODY and a wrapper DIV. This should work fine on all browsers.

      Firefox 3.5 *should* be fine with multiple backgrounds. Are you not seeing that?

      • Stephanie Boucher

        Hi Alex,
        No, doesn’t work in my Firefox. The code is identical to what you wrote. Strange…

  • Anonymous

    This sounds great, and makes sense to me. The backend, however, confuses me.

    Is the idea that a PHP or similar script will calculate the numbers that are then applied to a CSS file?

  • http://www.facebook.com/profile.php?id=1172376491 Kris Hunt

    Doesn’t Internet Explorer explode if you try to use transparent PNGs in a background image?

    • http://alexmwalker.mp/ Alex Walker

      Kris, you can make transparent 8bit PNGs using Fireworks that work ok in IE6. They basically render identically to transparent GIFs — all semi-transparent pixels turn 100% clear in IE6. I posted on it here

  • JOhnny

    wow….just….wow!

  • http://justmilkdesign.com/ Daniel Strube

    This is awesome. Enough Said.

  • http://www.wemagine.nl Sander

    Nice one! I’m sure going to use this on my MMO-browser game to make the worldmap textures look less repeating, thanks for this one!

  • http://www.stereohero.com Pontus Ekman

    Thank you for this great article. Very well explained, pure genius!

  • http://www.facebook.com/johnathan.warlick Johnathan Warlick

    This in mind-bottling.

  • http://www.surgeforward.com Web Development

    This is some fastinating stuff. Thanks for sharing your findings.

  • http://www.facebook.com/profile.php?id=20200561 Collin White

    Genius, absolutely genius.

  • bobsag

    Super creative post, I love it!

  • http://twitter.com/darrellwolfe Darrell Wolfe

    I would like to say:

    1. VERY cool web trick, thank you for taking the time to explain it and help us use it.

    2. What in the Love of God are you people wasting your time arguing about cicada’s and relative primality for? This is about web design people! Seriously, stop being so stuck up! lol

  • http://twitter.com/BlackPrincex Bernard Tan

    Brilliant article. I like how concept is put into execution rather than just talks.

  • deadcow

    Holy Monkey Pants!!! That is completely awesome, and I mean that in the true definition of the word. I am actually awestruck. You, Sir, are a true genius.

  • http://www.szudi.hu/ Janos

    Great article. Same technique works well with timelines in flash for making a not repetitive animation. Years ago I used prime numbers for small rotating images with gif animations.

  • Andrea

    Phew. I gave up making tiled backgrounds because they are soo-oo dull. This adds a whole new (prime) dimension to web graphics. Here’s to geeks and creativity!

  • http://www.facebook.com/ssahil.sshah Sahil Shah

    This is the best intellect article, I’ve ever read. Bravo :)

  • http://www.facebook.com/mbseacott Mary Beth Seacott

    Amazing! You, sir, have inspired me to try some new things in my work. I thank you for that. =)

    I’ll be passing this along to my fiancé as he will not only enjoy the article, but the math discussion/argument in the comments

  • ChrisG

    fascinating and educational, thank you.

  • Polly M

    So, which came first the Cicada or the math?

    • http://twitter.com/alexmwalker Alex Walker

      Well the math has always been there — it’s gets packed in with space-time and the universe. We (people) just noticed it at some point.

      The cicadas can’t count. Maybe a long time ago a group of cicadas operated on 12 or 10 year cycles. Maybe they did ok too. They just didn’t do as well as their neighbours who happen to work on 13 year cycles.

      Over thousands of years that slight advantage keeps adding up — like compound interest — at eventually the 12 year guys go out of business.

  • Nathália Torezani

    Hi, Alex! My name is Nathália, I’m a journalist at iMasters (http://imasters.com.br/), one of the largest developer communities in Brazil. We are starting a plan to improve our content, by translating some great materials that we unfortunately can only find in English.
    We´d like to republish this article of yours.
    Can you contact me?

    • http://klepas.org Simon Pascal Klein

      Hey Nathália,

      We’ve already received an email from you guys about translations Rhina. We’ll get back to you shortly.

      —Pascal.

  • http://www.hautstyle.co.uk HautStyle

    Wouhaou! That’s sooo cooooooool! I’m trying to play around with it at the minute, slightly lost but it’s getting there! Very cool! Cheers guys!

  • Andrea

    So here I am sitting with my brother- the mathematician- and we were wondering if you could randomize the x and y starting points of the body tag so the viewer (an alert viewer!) would see a slightly different iteration of a pattern every time s/he refreshed the page. Crazy?

  • http://twitter.com/fischerwest Fischer West

    Alex, Great article.
    A “background-only” full-screen section at the bottom of the cicada gallery pages would make seeing the full majesty of the non-repetition much easier.

    In the space given them now it is a little too hard to see the effect.

    • http://klepas.org Simon Pascal Klein

      Good idea, and we’ve accommodated for it by leaving around 600px of padding after the content to view the background at the bottom of the page. (:

      Thanks!

      —Pascal.

  • http://www.inspire-by-design.com Lee Fuller

    a brilliant concept..

  • http://twitter.com/alexmwalker Alex Walker

    Very good point. We’ve been coding the gallery stuff between normal work, and intended to make the foreground ‘toggle-able’.

    But I’m thinking, just adding a bunch of margin to the bottom will be an immediate improvement for a single line of code. I’ll do that, and we we have time to do something slicker, I will.

  • Kontakt

    This is not geeky, this is absolutely brilliant.
    I am really happy about the fact that there’s still deep-thinkers in this world,
    it sometimes appears to me that there aren’t many left on this planet.
    Thanks a lot for this post.
    noRiddle

  • http://www.webdesignmauritius.info Web Design Mauritius

    Impressive. Really :-).

  • val

    Mind boggling. Brilliant – and I hope I never need to give this much thought to my seamless tiling (but if I do.. I’ll be ready)

  • Anonymous

    So, I just kind of tripped on this site, but you may find my website interesting since it relates a lot to this one:

    http://www.sievesofchaos.com/

    The first tab (visualizations) uses circles to visualize the sieve of eratosthenes, but the second tab uses those visualizations to predict the quantities of primes and twin primes… which you could also do with your methods using probabilities…

    Happy trails…

  • animatethis

    wow! blows my mind

    when i studied web design last century i thought i was really clever for managing an animated background that was built in gif builder and used a very small tiled .jpg to do so but this takes that to a whole new level.

    it is so very very nice to see.

    thank you, thank you, thank you for sharing *v8v*

  • Lebisol

    Pushing the envelope can be fun just remember to recognize  that at one point it is a suitcase not an envelope :)
    Fun effects.

    p.s. Chuck Norris today is NN4.7

  • http://www.facebook.com/lynnmoon Lynn Mooney

    Alex, you totally rocked it with this idea and article!!!!!!!!!!!!!  I totally agree with the Chuck Norris comment below.  Thanks for sharing it.

  • Vicente Saraco

    This is the design of the future. Thanks man!

  • http://www.broomeandthekimberley.com.au/blog/ Enquiries

    Absolutely awesome sorry amazing.  I don’t really get it first up but I will play around with it.  Thanks for the inspiration

  • http://www.mactonweb.com web design california

    Very useful post. This is very nicely given and helpful too. I liked the content in it. Thanks for this post.

  • BRIAN R BISSELL

    Amazing article…. so clear and informative. 

    Thank you for sharing!

  • MaksimSlepov

    Yeah! You’re a genius! :) Very good!

  • Ansa

    OMG Hawt.

  • http://www.kitetoy.com kite

    Quite engaging. Keep these kinds of blogposts pouring in.

  • Patrick

    If you optimize those pngs, you can get a size of 475 bytes.

  • http://investing.businessweek.com/research/stocks/private/person.asp?personId=9316930&privcapId=22533820&previousCapId=40814475&previousTitle=CANOEL%20INTERNATIONAL%20ENERGY EnriquetaH88

    Remarkable way to put it.

  • http://akwdjalwdkjawkdjalwkjd falwkjfdalwjkda ladalkjdlawkjd

    love your imagination!!!! great work!! oh yeah.. cool photography too.

  • Pingback: Sam Beckham - Back to the drawing board

  • http://www.aplaceformyhead.co.uk Matt Fairbrass

    Absolutely astounding. Brilliant article, well written and clearly demonstrated. Thank you for sharing, I am now looking for projects where I can actively use this technique as it really does create a better visual sense of randomness to tiled backgrounds.

  • http://www.klasnmvgh67as.com Saul Sibbald

    An attention-grabbing dialogue is worth comment. I think that it is best to write more on this subject, it won’t be a taboo subject but typically persons are not enough to speak on such topics. To the next. Cheers

  • Pingback: Sam Beckham - Super Mario

  • http://buttonpresser.com Pete Fecteau
  • http://webmites.org/ Gerry

    Wow, that is amazing, those textures are nice! Entertaining read about cicadas too. I’ll definitely give it a try some time.

  • Darryl

    Brilliant insight and application. Beautiful, simple yet intricate…natural laws.
    A similar thing may occur using numbers of the Fibonacci sequence/golden ratios: 1,2,3,5,8,13,21,34,etc,etc.
    I’ll try that out for sure.

  • tome

    You bloody genius.

  • Ondreas

    A masterpiece !!!
    Fantastic concept, very inspirational.