Submitted by , posted on 09 September 2002

Image Description, by

These are some samples from a Smalltalk demo which I wrote this year. It started out as a little graphics test, and turned into a fully polished demo with original trans-break music (thanks Franko). It's a real-time 2D warping visualiser. What i love about it the most is the way that the visuals tell a story. You really feel like you're going on a journey with the sights and sounds. The image above has a story, the frames read from left to right, top to bottom.

After many magic numbers, the final effect was finished. What you see in this image is actually a sample from each frame, 1 second apart. I wrote a little "tile maker" feature into it, which allows you to sample the images and write out a BMP file as the demo is running. It runs full screen, on Mac, Windows, Linux, everything etc. thanks to the beautiful cross-platform architecture of Squeak Smalltalk. It's software only, but can still blit it with the best of 'em.

The technique is very simple:

-- for each frame
---- take the *image* of the screen
---- draw some shapes or simple particles onto the *image*
---- take the rect of the *image* and turn it into a quad
---- scale and rotate the quad so that it is still centered on the *image*
---- copy that source quad back onto the full *image* rect, with a blending RGB+A
-- end each frame

By controlling the way your quad scales and rotates (from the original rect of the image), you can create very different "fractal" techniques. Larger quads than the source rect will zoom out from the image, Smaller quads than the source rect will zoom in to the image. Rotation of the quad determines how much "fractal" warping the pixel copy will acheive. The Alpha component of the RGBA blending colour determines how much blur your motion leaves, while the RGB determines what colour will be blended into the new result. I used a sin function which rotated around the screen to move a root particle around the image, then reflected it's motion into 3 other particles. The root particle's distance from the center of the image determined the scale of the quad while it's angle to the center creates the quads rotation.

Keep Coding,

Image of the Day Gallery



Copyright 1999-2008 (C) FLIPCODE.COM and/or the original content author(s). All rights reserved.
Please read our Terms, Conditions, and Privacy information.