• Tweet

• Tweet

I’m a web developer by day, and as such subscribe to a few development and tech newsletters. This includes all of Sitepoint‘s updates. Their sister site, Design Festival, had an interesting technique involving backgrounds, called The Cicada Principle.

I discussed it with Rob (colleague, and pioneering inventor of Fire Cricket), commenting that he should give the accompanying competition a go. He is our designer, after all, and there was an iPad 2 up for grabs! He turned it straight back on me and suggested I do something writerly with it.

It hit me like a tonne of similes! I hadn’t even thought of doing some experimental writing with it, but the project was entirely up my alley (matron!) and so I set to work. The result isn’t exactly like Rob’s suggestion, but I’m pleased with how it’s turned out. Here’s how it went down…

The Cicada Principle

I won’t labor over this too much, as there’s a thorough explanation with some great examples by Alex Walker (same link as earlier by the way), who came up with the whole thing. But here’s a quick rundown.

It helps if you know a bit of CSS and HTML, but here goes. In modern web browsers, implementation of CSS3 means that you can assign multiple background images to one element. This means you can layer background images one on top of the other, including images with transparent or semi-transparent parts.

The Cicada Principle is based on this practice, combined with prime numbers. Prime numbers as you probably know, are only divisible by themselves and one.

Right, here’s how you can build a background with few resources, that doesn’t repeat very often. Have one image for your bottom layer. Now, make another image that is twice as long (the prime number two, you see), but have half of it transparent. This way, for every two times the bottom image is shown, it will be obscured or modified by the second image. Now again with a third image, and another prime number. For simplicity’s sake we’ll use the prime number three. It is three times as long as the base image and two thirds of it are completely transparent.

Now when we put them one on top of the other, we get a repeating background. But the exact sequence does not repeat as often as you might think, because we have used prime numbers.

In the crude demonstration below, we have a face with an “oh” mouth as the bottom layer, a smile as the second layer, and a frown as the top layer. The horizontal lines represent when each image/layer is shown, and the composite image is shown at the bottom.

If this still doesn’t make sense, I’m sure it’s my fault for rushing the explanation. Again, see the original article for something more thorough and for better examples. If you want to see the actual code I used, it’s available at the end of this article.

Applied to writing

So, the idea of my writer’s background is to create a stream of text that appears to go on and on. There will be repetition, but again, the overall pattern will repeat rarely.

The themes of the piece were fairly obvious. A long, somewhat rambling text lends itself to a stream of consciousness aesthetic. Repetition or déjà vu are other obvious things to touch on. So, we have a dreamlike, rambling stream of conscious based on these themes.

The process

There are probably numerous ways of constructing sentences using overlapping images, replacing verbs and nouns to make something bizarre. But I thought it best to keep it simple and stick to a block principle.

So, we have several “blocks” of text, that must necessarily all be fragments, and be able to be placed next to each other and still make some sense.

The lines for sentence 1 look like this:

• recurring dreams. In them I wake up, but find I’m still dreaming. I keep having
• nightmares. Last night I was running the wrong way on a merry-go-round. I hate
• to pinch myself. I’m in a daze most days. I spoke to Lucy, but she just told me
• to reach a little further than yesterday, but it’s hard, ’cause I guess I never had

Try reading them in a random order, including repeating a sentence every now and then. You can see that it kind of works. They make valid enough sentences, even if the overall “story” doesn’t make much sense.

You’ll also notice that each line is not a complete sentence. Obviously I want the overall impression to be as seamless as possible when they’re all lined up, and having rows of fullstops down the page would have looked pretty awful! So, I tried to vary the punctuation in each line, to try and break the whole thing up visually.

I decided I would go for blocks that had four rows. So I thought up three more bunches of four repeating sentences like the ones above.

Making Images

Next I arranged the looping sentences into the “blocks” described above, and wrote them out. This sounds easy enough, but actually I was very careful. Each line had to be the same height and same width so they sat well next to each other. Of course I hadn’t made each line the same length, even when typed (that would be too easy), so it was a matter of varying the size and spacing if my handwriting.

This is a lot more difficult than it sounds and there was still a lot of fiddling to do once I had scanned my handwriting into the computer. Once I’d manipulated the spaces in an image editor (Adobe Fireworks if you wanted to know, though any would have done), I put them side by side and saw they were too lined up – I could see the joins.

So I compared every block of sentences to block 1 (or block 0 as I later decided to call it, for no reason other than to confuse myself), varying the space at the beginning and end of each line until I thought I had eradicated the joins. Phew!

So, I now had four images. Each one consisted of four handwritten lines. When the images were placed next to each other, each of the four lines should line up correctly, without any obvious spacing or punctuation marking the join. Or, that was the plan.

Finding a pattern

I then set about laying out a clever arrangement for my sentence blocks in order to provide the most rewarding repetition to variety ratio. Don’t do this! I wasted a lot of time fiddling with complicated layouts, only to put it into practice and find it still looked crap!

I got on much better working on a live document, starting with a simple Cicada arrangement (like the one in the faces example way up the page), and tweaking where I saw obvious repetition. Eventually I came up with something that looked like a big sheet of text.

BUT! The joins were still too obvious – too much white space! So I edited each block, shifting the final and first words around to remove as much space as possible, without making words join up. Eventually I reached a point where you had to look at it (not very hard, mind) to figure out the joins.

The Result

Well it’s sitting on the background to this very site, but if you want a closer look, here is an uncluttered view on a much larger page. Scroll around to your heart’s content and have a read.

You will notice a couple if finishing touches. The “editing layer” adds a bit of variety and covers up some joins. It’s an average screen size in width and height but still loops seamlessly for larger monitors. Of course, the bits that are underlined or circled have no more relevance than the others, but sometimes they line up in such a way that it feels like they do.

I have also added a bit if PHP that varies the background position randomly. This means that every time you load the page, you get a different background! It technically still follows the same pattern, but varies where you are looking in that pattern.

Am I pleased? Well, overall yes, but I think I could have done a little better with every aspect – better lines that join together for more effective sentences that have more in common, giving a stronger impression that there is an actual story in there somewhere; maybe another block of lines to add new variety; hide the joins better. Generally though, it’s not a bad first attempt, and certainly serves as a good proof of concept. And it is fairly quick to do, so there may be more of these in future.

Want a go?

In the mean time, I thought I’d share everything so someone else can give it a go if they want. Below you can download a zip file containing a webpage, CSS file and images for the Freewriting background. Feel free to use it yourself, or to modify it in any way. Please provide some credit wherever the background shows, or in a readme file should you distribute a modified version, with a link back this site (and I would suggest linking to this very page would be helpful).

And if you do make your own, from scratch or modified, do let me know, so I can mention you on this site!

I hope you’ve found this project interesting. And if it’s prompted you to have a go that’s awesome! Be sure to check out the original Cicada Principle article as well as the Cicada Project competition, where you can find many other designs (not writing ones, but awesome all the same).

Useful Links

• The Freewriting Background in a zip
• The Freewriting background, Unleashed!
• The Cicada Principle
• The Cicada Project. The competition is over, but you can still put designs up there for all to see.