The Cicada Project: Have your say!

Tweet

So, it was a little over three weeks ago that we launched the Cicada Project, our community-driven gallery for backgrounds exploring the cicada principle. The plan was to see where lots of different minds would take the idea — while juicing up the competition with an iPad 2 giveaway. It seems to be working!

With a week to go and more than 30 strong entries on display, I thought it might be time for a quick update. While there is still plenty of time to make your own grab for glory, here are some of the most-voted-for designs so far.

Li2ards by @fischerwest

Li2ardsAs I discovered talking to Scott Moorhead (AKA @fischerwest) on the DesignFestival Podcast, he’s a guy who has been thinking about pattern for quite a long time. In fact, he has some interesting pattern experiments dating back to 1998 that still stand the test of time.

So far he’s contributed three designs, and he may even have a few shots left in the locker. Li2ard is based on some lizard line-art from M. C. Escher but uses the cicada principle to mix and shuffle their colors and patterns into a reptilian mardi gras.

Cubes by @EffDeeKaa

CubesCubes is a mock 3d design by @EffDeeKaa that feels like Escher-designed video game to me. I have a nagging urge to play it.

It’s a monochrome design and uses clean, flat color, which lets it tip the scales at a very respectable 82kb — despite blending seven layers of imagery.

This seems like the kind of isometric design that could sparks off new ideas in other minds.

Leafbed by @Debteakle

LeafbedLeafbed is a lovely photographic, autumnal design from Sydney designer Debbie Teakle of naptimewebdesign.com.

Although the file size total is a touch on the heavy side, it’s a nice case study on obscuring the naturally square character of background tiling.

Quter Quilt Fixed by @kayinangel

QuiltAs the title hints at, Toronto-based Sean Kayin McLeod has submitted a design with a hand-stitched, quilt flavor to it.

While the simple charm of the design is obvious, it’s easy to overlook some of the intricate detail going on. The geometric shapes in each colored panel keep mixing and recombining to create new and kaleidoscope-like patterns.

Subtle but quite lovely.

RetroClassified by @Nomnomlabs

QuiltGary Jay from Nomnomlabs found very creative, original approach for his entry. By layering up old-timey print ads from the 1930’s-50’s, he was able to generate almost endless panels of retro newspaper.

Like Leafbed, it’s no lightweight, but it’s so fun that you don’t seem to notice the total file size.

Cartoon Clouds by @KariSletten

Cartoon cloudsKari Sletten has given us this simple but very well-executed fluffy cloud design. It’s lightweight (37kb), versatile, tasteful and could drop into any number of blogs out there seamlessly.

I think I’d like to wallpaper my apartment in this one. If only I could stop hearing ‘The Simpsons’ theme in my head every time I see it.

A little koi by @fischerwest

Koi PondElegant. Serene. Beautiful.

Another @fischerwest design and, I have to say, my personal favorite so far. We’ve been surprised how many designs look great behind Design Festival, and I’d probably be happy to leave this one. Impressive work.

Mario Cicada by @SBeckhamDesign

MarioVideo games have been fertile grounds for inspiration with two game-inspired designs currently gracing the gallery.

Anyone who’s ever jumped a mushroom while avoiding a high-speed turtle will likely have a soft spot for Sam Beckham’s Mario Brothers-inspired design. The demo here probably isn’t wide enough to show off just how clever this design is. but you’ll get the idea.

And the whole thing weighs in at 33kb — you gotta love those 8-bit graphics.

Pacman, fixed by @aryasudhanshu

MarioAnd what tribute to ol’ school gaming would be complete without the that famous little yellow chomper?

Sudhanshu Arya has constructed an awesome seven-layer, organic Pacman maze compete with ghosts. Apart from looking great, it got Dan and I thinking about the possibilities of getting random-looking animations by GIF-animating the ghosts with prime number frame timings. Hmmm, interesting…

Of course, these are only a handful of what’s on show. Check them all and vote for whoever you like.

Using the Cicada Principle in your CSS

Outside of the Cicada Project, we’ve also seen some really interesting ideas that take a lead from the original article.

Frank Fuchs' Randomly Rotated Images

I’m particularly excited with German designer Frank Fuchs‘ approach. Rather than using layers of imagery, Frank is effectively layering CSS3 rules to give his Flickr gallery page a loosely shuffled look.

If you’re interested, he’s written up a detailed explanation in German on his site but the basic idea works something like this:

  1. We start with a garden-variety thumbnail gallery which has been marked up as a standard unordered list.
  2. Next we might rotate all thumbnails (let’s say) 3 degrees to the left using CSS3 transform rotation.
  3. CSS3 also allows us to target particular child items with in set via the nth-child selector. Using this we can target every second thumbnail and rotate it 4 degrees to right. Remember two is a prime number.
  4. Following the same process, we then target every third thumbnail and rotate it (lets say) 6 degrees to the left. You can see where this is going.
  5. Layering up our rules, we in turn target every 7th, and then every 11th thumbnail, giving each one a random twist in one direction or the other.

The result is an attractive gallery layout that has a usable structure but also keeps a loose human feel — all without needing a single extra class or ID.

To me, that’s tantamount to CSS magic.

So what now?

If you’ve been inspired and think you have a killer idea, get your entry in — there’s still time to make your play for the iPad 2. Otherwise get in there, browse the projects and help pick a winner!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://twitter.com/alandowling alandowling

    I just submitted my own version and had a blast making it. I already see how I would have changed the numbers on the layers a bit for more variation but think, overall, it came out really nice! Very cool concept btw. My submission is over at http://bit.ly/kepxKM