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

Flash Radial Spin/Zoom Motion Blur

Update – just posted the source to my MotionBlurSprite class.

Following on from my previous post on motion blur, here’s a quick-and-dirty (and therefore pretty fast) method for achieving radial blur effects in Flash. Just slice your image up into a grid of smaller bitmaps, and apply a linear blur to each slice. You do get seams between each slice where the blurred slices either don’t overlap properly, or overlap too much. While this is quite noticeable when the effect is applied to a static image, it looks pretty good when things are whizzing around.

Using this method, you can achieve a radial zoom blur:

…and radial spin blur:

…and of course combine motion blur, zoom blur and spin blur to achieve 3D motion blur:

Flash Motion Blur

Update – just posted the source to my MotionBlurSprite class.

Years ago when the Flash Player 8 beta was released and we got our first glimpses of Photoshop style filters such as Drop Shadow, Glow & Blur, I was pretty disappointed to note that there was no ability to specify an angle for the BlurFilter, which would enable motion blur in any direction. As it was, it looked like we were limited to horizontal and vertical blurs only due to the fact that Flash filters are always applied after transforms, no matter what order you have them in your code. After reading a somewhat cryptic FlashCoders post from an Adobe employee that hinted that directional blur could be achieved, I discovered that it was possible using the new bitmap methods.

Let’s say you want to apply a 45 degree blur to a Sprite. Off-stage, rotate the Sprite -45 degrees, then draw it to a BitmapData instance. Then, apply a horizontal BlurFilter to the BitmapData, throw it on the stage and rotate it 45 degrees back to zero.

Anyway, this is all old news now – the reason for this post is because I’ve got an idea for how to achieve quick-and-dirty radial and zoom blurs in Flash. So I’ve upgraded the motion blur effect to AS3. I’ll post the motion blur class once I’ve cleaned it up – at the moment it’s just a proof-of-concept. Here’s the basic motion blur effect:

Radial & zoom blur coming soon…