Cicada Principle

Periodical cicadas are insects of North America that mature into adulthood and emerge every 13 or 17 years. They come out together in their billions, thus making it difficult for predators to eat them all. What's interesting is their periods are prime numbers. This means that predators can't easily synchronize their own periods to that of the periodical cicadas. Another theory is that prime numbers prevent the emergence of hybrids from the cicadas with different periods.

Inspired by this natural phenomenon, now called Cicada Principle, web frontend designers have sought to use prime numbers to produce variations and patterns in their designs in a more efficient manner. Often CSS containing prime numbers are used to achieve this.

Discussion

  • Could you illustrate how prime numbers are useful in frontend design?
    Illustrating the Cicada Principle. Source: Devopedia 2021.
    Illustrating the Cicada Principle. Source: Devopedia 2021.

    Let's take two prime numbers 3 and 5. If we shade two rows based on these primes, we'll find that the shading will not fall on the same column until the 15th column. This is because 3 and 5 don't have any common factors other than 1. In fact, for this to happen, it's sufficient that the numbers are co-primes.

    In the case of the periodical cicadas, the periods are 13 and 17. This means that it's only once in 13x17 = 221 years that the two different species will come out in the same year.

    Frontend designers who wish to create pseudorandom elements in their design need not actually generate random numbers or hardcode many variations. The use of large prime numbers will give them sufficient variations because patterns can be discerned only on a larger scale based on the multiples of those prime numbers.
  • Where and how can I apply the Cicada Principle in CSS?
    The stacking order model. Source: Walker 2011.
    The stacking order model. Source: Walker 2011.

    Backgrounds can be created without having any repeating patterns in them or showing gaps or seams between tiles. We can tile and overlap images of different widths, these widths having prime-numbered pixels. More efficiently, we can implement the same using CSS gradients. Michael Arestad has created interesting backgrounds by using prime numbers for background sizes and positions.

    In general, Alex Walker proposed a "stacking order model", where many layers are stacked to create a background. The bottom layer can be small and repetitive since much of it will be obscured by higher layers. The topmost layer should have the largest dimension and also be thinly scattered (largest prime number in the group). It should also preferably not have eye-catching details.

    Element borders, including border radius, can be varied so that each element of a group gets a different border. These borders can also be animated for a mouse hover event.

    We can use the principle for CSS animations too by having the durations as prime numbers, scaled if necessary by a suitable factor.

  • Could you illustrate an example of creating a CSS background based on Cicada Principle?
    Illustrating CSS background creation using Cicada Principle. Source: Adapted from Storey 2014.
    Illustrating CSS background creation using Cicada Principle. Source: Adapted from Storey 2014.

    Let's create a background by applying Cicada Principle to the background-size. By setting, the sizes to either 17px or 37px and then applying linear-gradient we get a repetitive pattern, which is not very interesting.

    When we combine both 17px and 37px widths, we obtain a more interesting background. However, this still shows some visual tiling. By adding another layer of width 53px, which is also a prime number, we get a background that's closer to what we want.

    To create the gradients in the first place, we need to adjust the alpha values. Here too we can make use of prime numbers, with each layer getting a different alpha value for creating the gradients.

Milestones

Apr
2011
Pseudorandom background from just three images. Source: Walker 2011.
Pseudorandom background from just three images. Source: Walker 2011.

Alex Walker reads about periodical cicadas and gets the idea to use prime numbers for generating pseudorandom background patterns. He uses three images of different prime-numbered widths: 29, 37 and 53 pixels. When these three are overlapped and tiled, the resulting background will not repeat for 29x37x53 = 56,869 pixels. The three images together take up less than 7kB in size.

Jun
2012

Eric Meyer uses CSS gradients for implementing the Cicada Principle for backgrounds. Compared to background images, this reduces requests to server and saves on download bandwidth. He calls these gradients Cicadients.

Jan
2015

Lea Verou produces CSS animations using the Cicada Principle.

Sep
2016

Charlotte Jackson use Cicada Principle to create pseudorandom borders around images. She does this by adjusting the CSS border-radius using prime numbers in CSS selectors.

Sample Code

  • /* Source: http://thenewcode.com/840/Brood-X-Visualizing-The-Cicada-Principle-In-CSS
   Accessed: 2019-08-18
*/
div.prime {
	background: rgb(231,144,15);
	background-image: linear-gradient(
		90deg,
		hsla(255,100%,100%,.07) 50%,
		transparent 50%
		),
		linear-gradient(
			90deg,
			hsla(255,100%,100%,.17) 50%,
			transparent 50%
			),
        linear-gradient(
            90deg,
            transparent 50%, 
            rgba(255,255,255,.21) 50%
            );
	background-size: 17px, 37px, 53px;
}
 

References

  1. Arestad, Michael. 2013. "Cicada Principle gradients." CodePen, August 11. Accessed 2019-08-18.
  2. Jackson, Charlotte. 2016. "Magic randomisation with nth-child and Cicada Principle." September 28. Accessed 2019-08-18.
  3. Meyer, Eric. 2012."Cicadients." June 22. Accessed 2019-08-18.
  4. Storey, Dudley. 2014. "Brood X: Visualizing The Cicada Principle In CSS." The New Code, March 09. Updated 2016-09-25. Accessed 2019-08-18.
  5. Verou, Lea. 2015. "The cicada principle in animations." LeaVerou/dabblet.css, GitHub Gist, January 06. Accessed 2019-08-18.
  6. Walker, Alex. 2011. "The Cicada Principle and Why It Matters to Web Designers." Design-ux, SitePoint, April 06. Accessed 2019-08-18.
  7. Wikipedia. 2019. "Periodical cicadas." Wikipedia, August 03. Accessed 2019-08-18.

Further Reading

  1. Walker, Alex. 2011. "The Cicada Principle and Why It Matters to Web Designers." Design-ux, SitePoint, April 06. Accessed 2019-08-18.
  2. Arestad, Michael. 2013. "Cicada Principle gradients." CodePen, August 11. Accessed 2019-08-18.
  3. Jackson, Charlotte. 2016. "Magic randomisation with nth-child and Cicada Principle." September 28. Accessed 2019-08-18.

Article Stats

Author-wise Stats for Article Edits

Author
No. of Edits
No. of Chats
DevCoins
User avatar dineshpathak
3
0
736
Avatar of user arvindpdmn arvindpdmn
2
0
14
DevCoins due to articles, chats, their likes and article hits are included.
755
Words
2
Authors
5
Edits
0
Chats
3
Likes
4800
Hits

Cite As

Devopedia. 2021. "Cicada Principle." Version 5, April 15. Accessed 2024-06-26. https://devopedia.org/cicada-principle
Contributed by
2 authors

Last updated on
2021-04-15 05:07:34
design algorithms frontend

See Also