Water For Life Microsite using Papervision3D

Euro has just launched an integrated campaign for the NSW Government called “Water For Life”, which aims to inform the public about new water sources, and ways in which we can use our existing sources more efficiently. The campaign presents a “day-in-the-life” view of a water drop’s journey through our water system, and includes TV commercials, printed and online advertising, and a microsite.

The aim of the microsite was to unify the journeys presented in each TV commercial, and provide a little more depth of information without becoming too heavy on details. We wanted to reuse and maintain the visual style of the TVCs, with the almost anthropomorphic focus on the water drop itself, so we decided to build a set of 3D scenes where people could discover additional information on water efficiency at various points on the drop’s journey.

We used Papervision3D to render the scenes, which were partly modelled in 3D Studio Max and textured using a combination of texture-baking in 3DS and plenty of post-production in Photoshop. Then additional elements were added directly in Papervision, such as the refractive water drop, depth-of-field particles, tree decals, skyboxes, lens flares, etc.

I’m really happy with the final result, as well as the performance of the 3D scenes thanks to some optimisation tricks and techniques. I’m planning on doing a series of posts going into further detail on some of the effects and optimisation techniques, including source code where possible. If there’s anything specific you’d like me to cover, leave a comment.

#tweetcoding Part 4 – Bubbles, Sineribbon & Feedback Vortex

Number eight is Bubbles. Of my #tweetcoding entries, this is possibly my favourite. It’s nothing special technically, but I love recreating natural/physical phenomena, and to do so in 140 characters is even better. I was inspired when staring into a glass of beer – unfortunately I was unable to implement a nice amber colour within the constraints.

Love the pseudo-3D parallax effect, random motion, differing colours & transparency. The only thing I would improve is the visual appearance of the bubbles – it’d be nice to add some shading. Otherwise I’m pretty happy with this one.

Nine is Sineribbon. This was an attempt to recreate one of my favourite effects, seen here in another classic PC demo – X14 by Orange from 1995. Skip to the 2:50 mark to see the effect or, better still, watch the whole thing. Unfortunately for me, the character constraint was too limiting, so I ended up with what you see here. I might try and revisit this one though.

Ten – Feedback Vortex. Video Feedback goes all the way back to the advent of analogue video back in 1956, although it wasn’t used purposefully until the 1960s and didn’t really take off until decades later. Creating this effect in Flash is simple – just add a bitmap to the stage and, each frame, copy the entire stage into the bitmap, with input image, noise or colour around the bitmap to start the effect off. Over multiple frames, this generates copies of the input image – each one nested within the last. By adjusting the scale and rotation of the bitmap, the copies can be made to spiral, or zoom in and out.

My favourite demoscene example is again from X14 by Orange, at the 2:40 mark.

Credit is due to Quasimondo for the first #tweetcoding entry to use bitmap feedback, but I’m no stranger to the effect either, having implemented it in Director back in the day, and again in Flash when the FP8 beta was released.

#tweetcoding Part 3 – Starfield, Sinescroller, TweetSynth & VintageFlash

My fourth entry is Starfield – another classic demoscene effect. Nothing special about this one – it simply uses FP10’s new 3D abilities to move some 2×2 pixel bitmaps. Would have been nice to get some rotation in there, but unfortunately most of the 140 characters are use up with creating the stars.

Fifth is Sinescroller. Perhaps the most common demoscene effect – scrollers go all the way back to the early crackintros in which coders would inject personal messages, greetings or credits. Unfortunately this is a fairly unimpressive sinescroller – only 3 characters, and pretty poor kerning.

TweetSynth is my sixth entry, and the first entry to use audio by seven minutes. Nothing to see here, but make sure your volume is down low first. I didn’t want to use random data, so I played with the numbers until it sounded interesting. Check out Zachberry’s entry too – he managed to get a much more interesting sound going.

Number seven is VintageFlash, an attempt at recreating an “old film effect”. Managed to squeeze three separate elements into this one – the background flicker, random noise to simulate dust, and the vertical lines simulating scratches in the film.

Onwards to Part 4.

#tweetcoding Part 2 – Interference, Plasma & Fountain

Following on from my previous post, my first entry is a classic demoscene effect called “Interference”. Two sets of concentric circles intersect and invert each other out, causing crazy Moiré patterns which strobe like early 90s rave visuals. The effect has been used in countless demos on pretty much every platform, but the best example has to be the classic Amiga demo State of the Art by Spaceballs, from back in 1992.

Flash’s even-odd fill rule happily handles the inversion automatically, so all you need to do is draw both sets in one beginFill/endFill block.

Here it is in action.

Next up is “Fountain”, another common effect, and probably the most basic particle emitter. A nice side-effect of incrementing the particles’ positions on the lineTo call is that they elongate as their velocity increases. One of those rare situations where an optimisation actually improves the effect.

Another nice optimisation involved the boundary checking. Instead of testing whether a particle has dropped off the bottom of the screen then resetting its position – if(p.y>400){p.x=275;p.y=400} etc – I simply check that its velocity has gone beyond a certain value at the same time as the gravity is applied, then re-use the initialisation code to reset it.

Third is “Plasma”, another classic demoscene effect going all the way back to the C64 – it’s hard to find an old-school demo that doesn’t feature a plasma effect of some sort. Mario Klingemann (AKA Quasimondo) posted the first entry to use Perlin noise and I set about improving it to use the offsets parameter, causing the octaves to move and interact with each other.

On to #tweetcoding Part 3.

#tweetcoding Part 1

Grant Skinner recently started a little challenge on Twitter to see what could be done in 140 characters of AS3. I took a stab at it too, with this sinewave routine (which looks a bit like Sonic the Hedgehog, or the Drupal logo):

…but it became pretty obvious that with ActionScript’s fairly verbose syntax (particularly considering event listeners), there isn’t much room to move. So Grant proposed a template of “gimme code”, which defines a set of shortcuts to commonly used functions, and kicked off the #tweetcoding competition. First prize is a copy of Flash CS4 from Adobe plus a copy of “AdvancED ActionScript 3.0 Animation” by Keith Peters. Second and third runners up will also receive a copy of Keith’s book.

Robert Cadena has set up a page which, aside from tracking the competition entries, also conveniently compiles each entry as well.

As Grant Skinner noted the competition is reminiscent of the old Flash 4 days. It also has parallels with the Demoscene 4k and 64k competitions, and sceners’ abilities to squeeze amazing real-time effects and music into very tight constraints (that’s 30-year-old hardware right there).

So, given my history with the scene, I felt naturally drawn to the comp. There’s something inexplicably cool (yes, and geeky) about getting a computer to perform for you by using a minimal amount of instructions. Realising that you can optimise a routine by tweaking a few instructions or characters here or there gives you a rush that only computer programmers know. When you succeed in shaving off individual characters to just fit within the 140 character limit, it feels good. And if you’ve got characters to spare then that’s just exorbitant, like you’ve left half your food on your plate.

Anyway, I think I’ve geeked-out enough for this post.

Next post – my first three entries.