Cicadients
Published 11 years, 9 months pastI’ve been a fan of “The Cicada Principle” since it was first published. After wandering through a CSS gradients gallery or two back in April, it occurred to me that it ought to be simple to merge the two things. So I did: thus was born “Cicadients”. It took me until now to actually blog about it because, well, you know, things were, hey, what’s that weird thing over there?
What?
As a recap, the Cicada Principle states that if you pick a few simple patterns that repeat at prime-number intervals, you can create complicated patterns that only repeat at intervals that are the product of the individual intervals. For example, if you have patterns that repeat every 3, 5, and 7 pixels (respectively), the combination of the three will repeat every 3×5×7 pixels, which is to say every 105 pixels. Bump up the intervals, and you get some truly staggering numbers. For example, shift up to 7, 11, and 13 pixels and their combination repeat every 1,001 pixels; combining 11, 13, and 17 gets you 2,431; combining 13, 17, and 23 yields 5,083.
The examples presented in the original article use semi-opaque PNGs to achieve this effect. All I did was replace their images with images of my own; to wit, CSS gradients. (Yes, gradients are images, every bit as much as any PNG. They’re just described differently.) In doing so, I not only reduced server hits, but I also saved a fair number of bytes. In the first case, I did so while achieving pixel-perfect fidelity to the original. In the second case, I didn’t make it exactly the same as the original, but I got fairly close in 0.63KB (2.81KB with prefixes). I could probably get closer to the original with a little more effort — a couple of my gradients are a little too smeary — but that will probably wait a while, if I ever get to it at all. But, again, the final result is a kilobyte or two; the original example was 23KB plus extra server hits.
That was the real reason for my efforts, aside from the simple pleasure of doing it: to find out how much more efficient a gradient could be than a raster image in appropriate situations. I had expected some savings with gradients, but I was frankly astounded by how much was saved. You can do a lot more with gradients than sunset backgrounds and lickable button highlights.
Of course, gradients are not right for every situation: the third example in “The Cicada Principle”, for example, should only be done with gradients as an example of how not to do it. Possibly also as a public declaration of deep masochistic tendencies. Either way, you’d probably crash browsers, and that’s currently the job of radial gradients.
I’ll be very interested to see if people come up with their own cicadient examples. If you do, let us know about them in the comments!
Comments (10)
You, sir, have a robot brain. I always suspected, but now I know.
This is just wonderful.
This is some mind bending [REDACTED]. And it’s amazing.
couldn’t you add Fozzy Bear into Nº 2 on retina displays? #rimshot via twitter
Well done! My patterns gallery had something similar for a while http://lea.verou.me/css3patterns/#cicada-stripes but it just used the cicada principle, didn’t follow one of their patterns. I love what you did there :)
Thanks, folks! Of course, the real credit goes to Alex Walker for devising the Cicada Principle and sharing it with the world. All I did was rework it in another format, which isn’t clever so much as cunning. Not that there’s anything wrong with that!
(Also, Norcross, apologies for the redaction. I still worry about people who visit from workplaces that run content-filter proxies, so I chose to take the redact-and-publish route rather than dump the comment entirely.)
Wow, that’s really cool. I can’t believe I’ve used images before, when I could have just use that. Thanks for this, will definitely try them out.
Pingback ::
Christopher Bullock | A Cicadient Experiment
[…] I didn’t think much about it until Eric Meyer wrote about it in a blog post entitled, “Cicadients“. What Eric did was realize that CSS3 gradients could follow this same principle. Lea […]
Excellent! Next I’d like to see CSS-gradient mesh artwork.
We can’t call that the LCM principle, the coprime principle (or least common principle instead)?
We all work with formal languages here:
For almost all point-wise combinations of periodic functions, the period of their combination of the least common multiple of their periods. Why? If they have common factors, they count twice in the period and one is excluded.
Let t = x/2pi
sin(12t) + sin(2t) will have the following period
lcm(12,2) =
lcm(2*2*3, 2) =
2*2*3 =
12
sin(3t) + sin(7t) will have the following period
lcm(13,7) =
lcm(13, 2) =
3*7 =
21
You don’t need primes. You need coprimes. For instance 12 is coprime to 5
sin(12t) + sin(5t) will have the following period
lcm(12,5) =
lcm(2*2*3, 5) =
2*2*3*5 =
60
I was trained as a computational biologist, and while is awesome that evolution reared it’s lovely head in cicada mating, the principle is one of maximizing the period of multiple period functions. Given a choice, you do that by choosing a function with no common divisors. Not knowing the other functions, you do that by choosing a relatively large prime, which will be the smallest number that will not share divisors. products of primes (which aren’t prime) work fine, but they are mch larger.
That’s the theory. Coprimes all the way, if you can choose your repeating pattern set.
Pingback ::
Cicadas Principle | Muhammad Irfan
[…] Cicadas principle states that if you pick a few simple patterns that repeat at prime-number intervals, you can increase “perceived randomness” level. Instead of uniformly placing tiles across a page, which would be boring, we can lighten the page using this principle. […]