Image Processing
Tween  Lab Report

Chinese Translation by Hector Xiang
In-between images: Fade from one image to another

Purpose
The program Tween.EXE shows how to fade from one image to another by forming a Tween ("in between") image that is a weighted sum of the original two images. A sequence of images shows the full transition from one image to the other.

Materials and Equipment

Software Requirements
Windows 95/98/NT
Delphi 3/4 (to recompile)
Tween.EXE

Hardware Requirements
Best with 1024-by-768 pixel monitor with high color or true color.
Colors may not display correctly in 256-color mode.

Procedure

  1. If necessary, download the TulipSmall.BMP and SunflowerSmall.BMP files, or identify 24-bits/pixel test images of the same dimensions, for use with the Tween program.
  2. Double click on the Tween.EXE icon to start the program.
  3. Press the Image A button and select a .BMP file such as the SmallSunflower.BMP file.
  4. Press the Image B button and select a .BMP file such as the SmallTulip.BMP file. The "Tween" image that is 100% Image A and 0% Image B should appear.
  5. Select the Stretch CheckBox to see the full images if the images you're working with are larger than 320-by-240 pixels.
  6. Slide the TrackBar left or right to select a different Tween image. With the TrackBar at the left the image is 100% Image A. At the right the image is 100% Image B. In the middle the Tween image is 50% Image A and 50% Image B, as shown above. A new Tween image is computed each time the position of the Trackbar is changed.
  7. Select the number of images for a sequence (e.g, 25) with the spinedit box and press the Create Sequence button. (Caution: this can exhaust your virtual memory resources if a large number of large images is computed.)
  8. Move the Trackbar left or right to view the pre-computed Tween images manually.
  9. Press the Show Sequence button to show the sequence of Tween images as quickly as possible. If necessary, adjust the time delay before pressing the Show Sequence button to slow the sequence of images.
  10. Loading a new image, or pressing the Reset button, will reset the sequence of images and return to calculating each Tween image.

Discussion
Logic in the ButtonLoadClick procedure only allows Tween images to be computed if the height and width of both images are the same. Also, both images must have pf24bit PixelFormat.

The heart of creating the Tween image is the CreateTweenBitmap function. This function accepts two TBitmaps and two positive integer weights. The sum of the cardinal weights should be greater than zero (if the sum is zero a "white" image is returned).

Each Tween pixel is formed by the weighted sum of the R, G and B components, e.g.,
PixelTween = (WeightA*PixelA + WeightB*PixelB) DIV (WeightA+ WeightB). See the WeightPixels function.

In the twCalculate mode, the Tween weights for the A and B are set by the Trackbar as TrackBarTween.Max - TrackBarTween.Position for Image A and TrackBarTween.Position for Image B.

Pressing the Create Sequence button results in the creation of an in-memory TList of TBitmaps and changes the program to the twShowList mode. Caution: Creating a large TList of large images can give your machine's virtual memory management system a real workout, or even exhaust your memory resources!

Sometimes pressing the Show Image button several times will give a more uniform display of the images as the virtual memory system brings all images back into memory.

In the twShowList mode, the Tween images are no longer re-computed when moving the Trackbar but are simply fetched from the TList and displayed.

The ResetSequence procedure carefully frees each TBitmap in the TList to avoid a memory leak before a new sequence is started.

Also see:
- the Fade Lab Report.

- Robert Lee's optimized Alpha Blending example:
   www.optimalcode.com/exalpha.zip 

Conclusion
The Tween program demonstrates how to fade from one image to another using the Delphi Scanline property..

Also see, "HarmFade," which is Graphic/animation component that will transition from one TPicture to another TPicture.   It will do either a blend or a dissolve transition.   It is easy to use, just assign pictures like you would for a TImage, and in your code use the HarmFade.Blend or HarmFade.Dissolve method to start the effect.  It's also sometimes called a 'tweener.'
www.users.uswest.net/~sharman1/HarmFade.zip
http://delphi.icm.edu.pl/ftp/d30free/harmfade.zip

Feature-Based Image Metamorphosis
www.hammerhead.com/thad/morph.html

Keywords
Scanline, Tween Image, TList of TBitmaps, CreateTweenBitmap function

Download
Delphi 3 Source and EXE (146 KB): Tween.ZIP
Code compiles with Delphi 4 without any changes. Delphi 3 EXE is 271 KB while Delphi 4 EXE is 358 KB.

24-bit color .BMP images (320-by-240 pixels): TulipSmall.ZIP (184 KB) and SunflowerSmall.ZIP (189 KB)

Updated 10 June 2003


since 1 Nov 1998