Cicada Experiment

The Cicada Principle is a way of seemingly randomizing the appearance of a tiled background using layered backgrounds and prime intervals to break the tiling. It's explained here: The Cicada Principle and Why It Matters To Web Designers. All the examples I've seen of it so far have been breaking the horizontal tiling only. Breaking only the vertical tiling would be a simple matter of turning the instructions 90°. But what about both horizontal AND vertical at the same time?

The default background on this page is the next to final group, Knotwork

Random Repeating Shapes (View)

To start with, I'm using random shapes that I've roughly made into seamless textures. This version is not meant to be pretty. And yes, it uses basic shapes and brushes from Photoshop. Well, also some of custom brushes I created, but the point is that these graphics are simple and dirty. Call this one my "proof of concept."

For this version, I'm using 25px as my "interval unit". Mainly I wanted to see this in action with a very small interval so I could see just how quickly it becomes repititious when doing both axes at once.

Some of these files are fairly large pixel-wise, so instead of showing them here and in other themes, I'll list them in order from front-most to back-most with file-size.

Swirls (View)

This was suggested to me by my final texture layer for the Random Shapes. I'm not entirely happy with the result here; it still feels very repititious even though if you look at the individual components they don't truly repeat exactly. I think I made the horizontal strip (image 1) too short, which made for a very prominent white swirl repeating every 173px vertically. If I revisit this one I might try doubling or tripling the size on it (roughly) to remove that heavy vertical repetition.

Knotwork (View)

Knotwork is kind of my "thing." It seems like something this method would lend itself well to. The real thing to watch with this will be making sure that my over and under stay correct and that I don't get off a column and have something coming in from the wrong direction. The columns in this one are 32px wide. but they are all pairs so I think I need to count them as 64px wide instead. I also want to make sure to frame this properly so the knots aren't simply going out of the page. That's easy enough to do at the left and top but I'm not so sure about the right and bottom, since I can't just make the html be a multiple of 64px. I will leave that for last, as it will be the top set of layers anyway, but I may have to just accept that it will spill endlessly to the right and bottom. There is probably some javascript way to get the proper positioning for the right and bottom edge images, but the question is whether or not it's worth the trouble. I can think of an obvious one, but that would end up with up to a 63px gap of white space to the right or bottom. (Edit: I think I'll leave it flowing off the screen. I kind of like the sprawling feel of it.

Knotwork 2 - With Paper (View)

This is the same as the original knotwork but with additional paper texture and staining. The regular Knotwork is too intense in contrast to work as a background (though it makes a great example of this technique in action). However, something like this would make a great textured background if it was muted somewhat. We're starting to get fairly graphic intensive however, so any practical application of this would need to be better condensed and optimized. For instance, I haven't crushed my pngs here, which would provide substantial file size decreases.

Here's a list of primes

At the end of the page I've added 1000px of padding so that the background is visible in all it's prime-numbered glory.