Flash Smoke Effect using DisplacementMapFilter

Inspired by David Lenaerts’ awesome smoke simulation using Alchemy, I wondered if a similar effect – pushing smoke around with the mouse – could be achieved using Flash’s DisplacementMapFilter. As with David’s simulation, click to add smoke and move the mouse to create wind.

There’s a great explanation of how DisplacementMapFilter works over at Emanuele Feronato’s blog, so I won’t repeat it here. The smoke effect is on the left, and on the right is the displacement bitmap that gets applied to the smoke image on each frame. To simulate wind, as the mouse is moved I add or subtract from the red and green channels using ColorTransform. The faster the mouse is moved, the more I add or subtract. To simulate the wind settling down, I apply a BlurFilter and another ColorTransform to cause the displacement map to converge towards 0x80C000 (no horizontal movement, slight upwards movement).

While not nearly as impressive as David’s more realistic simulation, I’m pretty happy with what can be achieved with simple bitmap displacement. I experimented with adding Perlin noise to prevent the smoke from getting too static when the mouse isn’t moving and got some really cool results, but have decided to keep things simple for now. Maybe in a future post.

Here’s the source. It was built in FlexBuilder as an ActionScript project, but wouldn’t be hard to convert to compile in the Flash IDE.

Euro RSCG & Sony Win Two AIMIA Awards

Hooray! Not much more to add to my previous post on the nominations, except to reiterate – well done to everyone involved at Euro and Sony.

It was the first time I’ve actually attended an AIMIA Awards night and I had a great time – caught up with some old friends, and met a few new acquaintances as well. Woke up with a spectacular hangover the next morning too.

Congratulations also to all the other award winners.

Update: Just added a few photos from the night.

#tweetcoding Part 5 – Snake, Cube, Jellycube & Headless Flasher

My next #tweetcoding entry is Snake, a game which needs no introduction. No game here unfortuntely – just the control mechanism, but I believe this was the first entry to use keyboard input. Use W, A, S and D to control the snake… although due to the code I’ve used which interprets keyboard commands into horizontal and vertical velocities, other keys will also affect movement in unexpected ways. Here’s how it works:

The key codes for W and S (up and down) are 87 and 83, and the key codes for A and D (left and right) are 65 and 68. When a key is pressed, first I check if it is up/down, or left/right by testing whether its keycode is above 80 or not. If below, I subtract 66.5 from the key code, leaving either -1.5 or 1.5, which I use as the X velocity. If above 80, I subtract 85, leaving either -2 or 2, then multiply by .75 to ensure that the X and Y velocities match.

Of course, this means that other keys will also affect either the X or Y velocity at unpredictable speeds.

Number 12 – my attempt at creating a shaded 3D cube cheats on two levels – 1: it’s not correct perspective 3D but isometric 3D, and 2: the “shading” is achieved with simple parallel lines which converge to mimic a shading effect as each plane turns away from the camera. The isometric effect is simple to produce – just scale the parent sprite/clip (in this case stage/root) by around 50%, and then rotate the children.

Jellycube was a natural progression from my previous entry, but also inspired by Human Target by Melon Dezign. Melon’s style was always a big inspiration for my demogroup Reality, particularly with their de-emphasis on cutting-edge effects in favour of design and humour. However, once again I wasn’t able to achieve my desired outcome – instead of squashing & stretching the cube I was restricted to rotation only.

My 14th, and final entry is Headless Flasher, an attempt at creating a stick figure running across the screen. This one was originally inspired by my cat Lucy, but it became pretty obvious that the 140 character limit wouldn’t allow four legs and a tail, so I switched over to a human stick figure. Unfortunately there was no room to add code for his head (or blood spurting out of his neck for that matter).

#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.

Papervision3D Grass/Fur Effect

To me, “Shadow of the Colossus” represents the pinnacle of PlayStation 2 games. Aside from the fact that it’s one of the most artistic games I’ve ever played, it’s also one of the most technically brilliant games on the platform, pushing the PS2 to its limits with real-time motion blur, HDR rendering, a LOD landscape system, IK & physics system, self-shadowing and, of course, the impressive fur shading. However, the PS2 can’t handle all of those things done “properly”, so some were achieved with ingenious tricks and shortcuts, all covered in this inspiring article on The Making of “Shadow of the Colossus”.

Since reading that article I’ve always wanted to recreate the fur effect, and have now done so using Papervision3D. As I was hoping to use it on a recent project, instead of fur I decided to simulate grass:

The effect is achieved by drawing cross-sections of the fur/grass on a set of parallel layers – in this case I have 7 layers which, using 512×512 alpha-transparent textures with 4×4 segments, is pushing the limits of Flash/PV3D. However, because we’re only ever dealing with 7 textures, it can handle potentially infinite blades of grass – the example above has 3000. The grass is generated in real-time – I build the layers up by starting each blade of grass with a certain size & direction, and growing it out on subsequent layers. The effect looks fine when the camera is close to perpendicular or the normal of the planes, but things start to fall apart when the planes and camera approach parallel.

The grass highlights are created with simple gradients, and I’ve also rendered basic shadows to the dirt layer (although they’re barely noticeable with such dense grass). Each blade of grass has a random colour, weighted heavily towards green but straying towards blue/brown in rare cases. Creating the effect of the grass moving in the wind is a simple matter of moving each plane along the X & Z axis, with the motion increasing based on the distance from the base layer.

Being a huge fan of both Ico and SOTC, I’m really looking forward to seeing the next game from Fumito Ueda and Team ICO, and what they can do with the PS3 hardware.