# [Interest] The "Proper" Way to Mix/Cross-Fade Images

Jason H scorp1us at yahoo.com
Tue Mar 20 16:42:34 CET 2012

```I wonder if what he wants is a 3-image fade:
layer images 1 and 2 (bottom -> top) as : 121 or 221 then cross fade the top two. The first layer is always 100% opacity.

----- Original Message -----
From: Bo Thorsen <bo at fioniasoftware.dk>
To: Josiah Bryan <josiahbryan at gmail.com>; Qt Project MailingList <interest at qt-project.org>
Cc:
Sent: Tuesday, March 20, 2012 11:27 AM
Subject: Re: [Interest] The "Proper" Way to Mix/Cross-Fade Images

Hi Josiah,

You replied to me in person, please keep it on the list.

If they're not the same dimensions, or one of the images is
semitransparent, then even 50% opacity + 50% opacity = 100% opacity
wouldn't help you (because one of them would be 50% * x% where
0 <= x < 100). You wanted to avoid looking at the background through
those two images. That's impossible in these cases, because the begin or

However, it's still easy to fix this. Just paint your semi transparent
image over an opaque image with the background behind.

Pseudocode for this algorithm:

tempPic1 = background
draw pic1 on tempPic1

tempPic2 = background
draw pic2 on tempPic2
for x in range(0, 100):
draw pic1 in window
draw pic2 with x opacity in window

Now, if your background is semitransparent, you're in trouble. In that
case, I don't think there is any simple Qt way to do it. Transparency is
normally done with multiplications, what you want is addition. You might
be able to do this with the QPainter composition modes, If that works,
it would also solve the simpler cases.

You could also just go for the retro Sid Meyers favourite "fade" where
each pixel is replaced one at a time :P

Bo.

Den 20-03-2012 15:03, Josiah Bryan skrev:
> On Tue, Mar 20, 2012 at 9:55 AM, Bo Thorsen <bo at fioniasoftware.dk
> <mailto:bo at fioniasoftware.dk>> wrote:
>
>     Den 20-03-2012 14:17, Josiah Bryan skrev:
>
>         So it all boils down to this:
>         Is there any way to force QPainter (or, heck, just do it on a
>         raw OpenGL
>         surface and skip QPainter/QImage all together) to blend things
>         where 50%
>         opacity + 50% opacity = 100% opacity in the resultant image?
>
>
>     Yes. Paint the first without opacity. Then paint the other with 50%.
>
>
> However, that won't work when trying to smoothly crossfade between two
> images that don't contain purely 100% opaque pixels. Consider a scenario
> where the first image is a full 200x200px image (say, the fadetest-A.png
> from the original email), but the second image is, for example, the
> butterfly from the 'painting/imagecomposition' example in the Qt SDK
> (\$QTSDK_HOME/examples/painting/imagecomposition/images/butterfly.png).
>
> In this case, the first image would remain visible behind the un-covered
> areas of the butterfly image, thereby not appearing to "crossfade." (If
> this were rendered with a QTimer and a slot, the butterfly would "fade
> in" over the red letter A (fadetest-A.png), and then suddenly at the
> end, the red letter A image would just disappear - jaring and not the
> desired appearance.
>
> The goal is a smooth cross-faded transition from one image to the other
> - and rendering the first image at 100% opacity would certainly seem to
> ruin the cross-fade effect in every case *except* that where the two
> images to be faded are the exact same dimension and the exact same
> "coverage" in their alpha channels. Other than that, painting the first
> image at 100% opacity doesn't seem like it will work at all...of course,
> I would welcome code that proves me wrong!
>
> Thanks!
> -Josiah
>
>
>     Bo Thorsen,
>     Fionia Software.
>
>     --
>
>     Expert Qt and C++ developer for hire
>     Contact me if you need expert Qt help
>     http://www.fioniasoftware.dk
>
>
>
>
> --
> Josiah Bryan
> 765-215-0511
> josiahbryan at gmail.com <mailto:josiahbryan at gmail.com>

Bo Thorsen,
Fionia Software.

--

Expert Qt and C++ developer for hire
Contact me if you need expert Qt help
http://www.fioniasoftware.dk
_______________________________________________
Interest mailing list
Interest at qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest

```