xerode.id » Animation

Play with my balls

xerode — Sun, 15 Feb 2009 22:13:24 +0000

Recently I had to a test as part of an application for a job as a Flash developer at a London digital agency. Here’s the brief:

Have three balls bouncing around the screen.

There must be gravity

The balls should bounce off the sides of the screen and back in

The balls should bounce off each other

I’ve yet to hear back from them, so I decided to do a little bit more tweaking and post it up here. The different types of balls have slightly different properties such as bounciness, mass and size.

[kml_flashembed movie="/flash/experiments/physics/balls.swf" width="400" height="400" fversion="9" useexpressinstall="true" xiredirecturl="http://www.xerode.net/blog/2009/02/15/play-with-my-ballsplay-with-my-balls/" /]

There’s some basic interactivity, allowing the balls to be picked up and dropped. This can cause a few problems when a ball is dropped in a position that intersects another ball, so I’ve still got a little bit bug-fixing to do but overall I’m happy with it.

Yet another flag post

xerode — Sun, 18 Jan 2009 16:07:03 +0000

This will be the last post about flags, I swear. I’m not obsessed with them. I’ve been playing with particles recently, looking at the different ways of drawing to the screen as they all have pros and cons in terms of speed, quality and control. I updated the flag code to use draw( ) instead of merge( ) and used some blend modes to improve the shading. On my 3 year old desktop it runs at roughly the same rate as the previous version but I think it looks an awful lot better.

[kml_flashembed movie="/flash/experiments/flag/perlin2.swf" width="450" height="270" fversion="9" useexpressinstall="true" xiredirecturl="http://www.xerode.net/blog/2008/11/28/a-better-flag-ripple-using-perlin-noise/" /]

It’s scrappily written but if you want the source code it’s available on the next page.

A better flag ripple using Perlin noise

xerode — Fri, 28 Nov 2008 19:15:19 +0000

Since my last post on animating a flag using ActionScript, I’ve been looking at how to improve the effect. The answer? Scrap my initial idea and use some of Flash’s classes.

[kml_flashembed movie="/flash/experiments/flag/perlin.swf" width="450" height="270" fversion="9" useexpressinstall="true" xiredirecturl="http://www.xerode.net/blog/2008/11/28/a-better-flag-ripple-using-perlin-noise/" /]

I used BitmapData’s perlinNoise function to generate a grayscale image and played with the values until I found something useful. This image was merged with the flag to provide shading and then used as a displacement map for a DisplacementMapFilter applied to the shaded flag.

The effect was animated by changing the offsets of the Perlin noise, constantly increasing the x offset to provide the scrolling while using Sine waves on the y offset to simulate turbulence. Sine waves were also used to modulate the DisplacementMapFilter’s x and y displacement values to make the animation less uniform. The frame was then merged with the previous frame, to slightly soften the output.

I’m more satisfied with this result than my original attempt – it’s higher quality and renders faster. Although I pretty much had to disregard my previous work and it’s still a pretty useless effect, I’ve learnt more about some classes that’ll be useful when I come to look at particles and sprite rendering in games.

Flag ripple effect using BitmapData

xerode — Tue, 18 Nov 2008 12:52:36 +0000

I’ve been looking at ActionScript’s Bitmap and BitmapData classes a bit recently as they’re one area of Flash I’ve yet to really play around with. I’ve read from bitmaps before but hadn’t tried writing to them and as this is a useful technique for visual effects and games, I started looking at it over the weekend.

I wanted to replicate some of the effects seen in 8 and 16-bit video games, where sprites would be distorted to represent fire or water effects during battles in Pokémon or other RPGs. I figured that the simplest way would be to use sine waves to repositon rows or columns of pixels. Add a little animation and I came up with a basic flag ripple effect.

[kml_flashembed movie="/flash/experiments/flag/flag.swf" width="300" height="200" fversion="9" useexpressinstall="true" xiredirecturl="http://www.xerode.net/blog/2008/11/18/flag-effect-using-bitmapdata-in-actionscript/" /]

It’s a very rough and ready script and the output isn’t realistic but I’m going to look at using dynamic gradients and masking or the DisplacementMapFilter class to improve it. With the advent of Flash 10′s Pixel Bender Filters I’m guessing that scripting this kind of effect may become obsolete but as a means of teaching myself about writing BitmapData it’s pretty effective.

In case you’re wondering, the Flash movie above is an imitation of some of the fake advertising in the Starship Troopers series, using one of my photos from an Anonymous protest.