How to transition between two images using a grayscale transition map

Question

Imagine you have two images A and B, and a third grayscale image T. A and B contain just about anything, but let's assume they're two scenes from a game.

Now, assume that T contains a diamond gradient. Being grayscale, it goes from black on the outside to white on the inside.

Over time, let's assume 256 not further elaborated on "ticks" to match the grayscales, A should transition into B giving a diamond-wipe effect. If T instead contained a grid of smaller rectangular gradients, it would be like each part of the image by itself did a rectangular wipe.

You might recognize this concept if you've ever worked with RPG Maker or most visual novel engines.

The question ofcourse is how this is done. I know it involves per-pixel blending between A and B, but that's all I got.

For added bonus, what about soft edges?

And now, the conclusion

Final experiment, based on eJames's code

Sample from final experiment -- waves up, 50% http://helmet.kafuka.org/TransitionsSample.png

Answer 1

The grayscale values in the T image represent time offsets. Your wipe effect would work essentially as follows, on a per-pixel basis:

for (timeIndex from 0 to 255)
{
    for (each pixel)
    {
        if (timeIndex < T.valueOf[pixel])
        {
            compositeImage.colorOf[pixel] = A.colorOf[pixel];
        }
        else
        {
            compositeImage.colorOf[pixel] = B.colorOf[pixel];
        }
    }
}

To illustrate, imagine what happens at several values of timeIndex:

1. timeIndex == 0 (0%): This is the very start of the transition. At this point, most of the pixels in the composite image will be those of image A, except where the corresponding pixel in T is completely black. In those cases, the composite image pixels will be those of image B.

2. timeIndex == 63 (25%): At this point, more of the pixels from image B have made it into the composite image. Every pixel at which the value of T is less than 25% white will be taken from image B, and the rest will still be image A.

3. timeIndex == 255 (100%): At this point, every pixel in T will negate the conditional, so all of the pixels in the composite image will be those of image B.

In order to "smooth out" the transition, you could do the following:

for (timeIndex from 0 to (255 + fadeTime))
{
    for (each pixel)
    {
        blendingRatio = edgeFunction(timeIndex, T.valueOf[pixel], fadeTime);
        compositeImage.colorOf[pixel] =
                    (1.0 - blendingRatio) * A.colorOf[pixel] + 
                    blendingRatio * B.colorOf[pixel];
    }
}

The choice of edgeFunction is up to you. This one produces a linear transition from A to B:

float edgeFunction(value, threshold, duration)
{
    if (value < threshold) { return 0.0; }
    if (value >= (threshold + duration)) { return 1.0; }

    // simple linear transition:
    return (value - threshold)/duration;
}

Answer 2

I'd say you start with image A, then on every step I you use the pixels of image A for every position where T is smaller than I, and pixels of the image B otherwise.

For a soft edge you might define another parameter d, and calculate you pixels P like so:

For every point (x,y) you decide between the following three options:

• I < T(x,y) - d then the point is equal to the point of A
• T(x,y) - d <= I < T(x,y) + d then let z = I - (T(x,y) -d) and the point is equal to A(x,y)(1-z/(2d)) + B(x,y)(z/(2d))
• I < T(x,y) + d then the point is equal to the point of B

This produces a linear edge, of course you can chose between an arbitrary number of functions for the edge.