Game Development

Principle of the cicada and why it is important for the web designers

imageThere are interesting facts about the life cycle of periodical cicadas. Usually, we do not see around a lot of these insects, because most part of their life they spend under the ground and gently suck the plant roots.

However, depending on the type every 7, 11, 13 or 17 years, periodical cicadas simultaneously crawl out together to the light and they turn into the noisy flying creatures, mate and die soon.
Although our strange cicadas cheerfully go into another world, here arises the obvious question: is it just coincidence or the numbers 7, 11, 13 and 17 some special?

It turns out that these numbers have something in common. They are all prime numbers that are divisible only by themselves and by one (it's 1, 2, 3, 5, 7, 11, 13, 17, 19, 23 and so on).

Studies have shown that the number of animals that eat cicadas - usually are birds, spiders, wasps, snakes and fish - often exhibit a shorter cycle of 2-6 years between the peak and decline in the population. Thus, if our cicadas appeared, for example, every 12 years, each predator with a life cycle 2, 3, 4 or 6 years could synchronize the cycles of booms in numbers with the regular appearance of cicadas. In fact, they probably would have declared a general holiday of overeating that would be called a Day of Cicadas.

On the other hand, if a brood of cicadas was as unfortunate as to appear during the three-year peak number of wasps that the next time it happens only after 51 years. In the intermediary generation of cicadas can easily restore their population and far exceed the number of predators.
Wonderful, but how does this apply to web design?

How make seamless textures (tiling). This is super useful thing, but it could be difficult to keep the right balance.

On the one hand, we want to use files as small as possible to get the maximum benefit from the effect of tiling. However, as soon as we notice any special feature in the background, for example, a small speck on the background of wood fiber, which is repeated at regular intervals, then immediately loses all illusion of genuine randomness.

Maybe we can borrow some ideas from cicadas to break this pattern?
Generation of natural randomness using CSS
Example 1

Bearing in mind the “principle of the cicada”, there are three square semitransparent PNG sizes 29, 37 and 53 pixels, respectively, they are set as the background images in HTML test page.

image29-a.png (2.0kb) image37-a.png (1.7kb) image53-a.png (2.5kb)

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


imageAs we can see, these squares overlap and interact, generating new patterns and colors. Since we're using magic prime numbers, the pattern will not be repeated for a long time.

As far as this long? 29 × 37 × 53 ... or 56 869 pixels!

Remember, it's a tiny graphic files, less than 7 kilobytes together, while they are generating a texture almost 57 000 pixels in width.

Can we imagine, what happens if we add a fourth square, for example, 43 pixels? Or we cannot imagine, because the numbers become a little brutal, and can hypnotize, if we look at them too long. It is enough to say that we get a figure more appropriate for the terra-forming of planets than for web design.

Ok. In theory, geometric shapes work well, but as we can still use this idea?
Example 2

imageLet us take a photo-realistic example that each of us could see in one form or another: theatrical curtain. If we look at the blind here, we can see the even vertical blocks. This example will be called gap block of assembly (ruffle unit), and unlike the first example, it will be more important than the strict dimensions in pixels of the images with which we worked.
This is JPEG the size of 8kb.

When rendering a single block, the graphic embodies all that we hate in a seamless background. In addition to clearly visible seams, it looks very mechanical and completely unconvincing.

imageFor the second level we use a prime number three. We choose a new section of curtain and place it inside a transparent PNG, which will be wide of three blocks of assembly. We blur left and right edges, so that it smoothly blends into the background.
The resulting file got into 15kb.

imageWhen we mix this new element with the previous layer, obviously we get the best result. Still it is visible unnatural periodic pattern, but it starts a little break up.

The magic number of our third layer is seven.

imageWe make a new transparent PNG in seven blocks wide, and put two new sections of the original image at positions 3 and 6. If it sounds incomprehensible, the diagram on the left should be slightly to clarify the situation and blur the edges of image in order to make easier docking with the previous layers.

Obviously, this image will be larger in the pixels and in file size, but it still has a size around 32kb – it is not too brutally by any measures.

Here's what happened when we cover by this graphic two previous layers. Of course, eyes can see small fragments of the image, which was allegedly repeated (because it actually repeats), but the lower layers are so random that eyes will soon cease to look for a pattern.

If we look at this background from the numerical side and imagine each unit in the form of numbers, we get the following: 1, 2, 3, 1, 2, 6, 1, 2, 1, 3, 2, 1, 6, 2, 1, 1, 3, 1, 1, 6, 1, 1, 2, 3 ...

The pattern is there, but it is very difficult to recognize.

In this example is an almost endless background as a theater curtain with 53kb. And of course, we can easily add a fourth layer - possibly 11 blocks in size - if needed.

Also keep in mind that this example uses the most minimal prime numbers - 1, 3 and 7. If we have 11, 13 and 17, it could do much more complex variation on a given size. In reality, it all comes to the scale of the texture relative to the screen width.
Example 3

The last example is not so much a practical plan of how much just for fun with prime numbers. We will not retry the theory, because the basic concept is the same as in the previous two examples, let us try to edit it in Firebug.

2200 years ago the Chinese emperor Qin Shi Huang created the Terracotta Army of 8,000 men to guard his tomb. There are full-size statue of each warrior, horse, and weapons that represent a unique handiwork.

Using a simple CSS, the prime numbers and a set of images, we're going to build our own mighty army. Maybe it did not have enough height, but it takes by its numerical strength.

Mighty legion Lego!
The Legion is composed of only eight images, which are joined together to create thousands of combinations. It uses:

• 2 images for the background
• 2 images of the feet
• 2 images of the torso
• 2 images of the head

Experimenting with this idea, we see the principles, which seem to work. First, the order of texture’s overlay is better if organized as an inverted pyramid.
We can make the bottom layer of relatively small and repetitive, because it is covered by all layers from the top. In reality, it will be seen only by 20-40%.

On the other hand, the top layer must be very large, but less intense, since this layer will never be overlapped by others. Also, it is better not to include high visibility, attracting view details on the top layer. Leave it lean and generalized.

In any case, almost always it needs to use the method of trial and error.
Browser Support

Use multiple backgrounds element in HTML. This option is supported by all modern browsers (Firefox 4, Chrome 10, IE9, Opera 11, Safari 5), but obviously not by all older versions.

However, if the condition set backward that appropriate a good fit can be tiling Bhtml, body and a container div. Perhaps, the container cannot be semantic, but this little indulgence can potentially have an effect on the entire site.
There are much more competent ways to use the idea. For example:

• Infinite cityscape
• Nonrecurring texture of wood
• Starry sky
• Close jungle
• Cloudy sky
Pirat 30 august 2011, 11:38
Vote for this post
Bring it to the Main Page


Leave a Reply

Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute