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
---- take the rect of the *image* and turn it into a
---- 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.