QB64 Phoenix Edition
Blending two images - Printable Version

+- QB64 Phoenix Edition (https://staging.qb64phoenix.com)
+-- Forum: QB64 Rising (https://staging.qb64phoenix.com/forumdisplay.php?fid=1)
+--- Forum: Code and Stuff (https://staging.qb64phoenix.com/forumdisplay.php?fid=3)
+---- Forum: Help Me! (https://staging.qb64phoenix.com/forumdisplay.php?fid=10)
+---- Thread: Blending two images (/showthread.php?tid=1515)

Blending two images - Ikerkaz - 02-28-2023

Hi to all Smile

I would like to blend two identical images. I am doing a space game, and I want to show some kind of warp flash in the ship engines Wink

I have a flash sprite (PNG with transparency), and I want to paint two of them, one very close to the other.

But the image blending is not showing the way I like... Sad

This is what QB64 does:
[Image: 1.png]

I would like to paint something like this (I made the example in photoshop):
[Image: 2.png]

Is there any way to paint this images as the second example?

Thank yoy very much Smile

RE: Blending two images - bplus - 02-28-2023

I have posted a tool/demo for fading one image into another. My previous avatar went from one image to another and back again.
https://staging.qb64phoenix.com/showthread.php?tid=272&pid=2665#pid2665
Contains an excellent demo and is very simple to use.

To blend two identical images, you must mean put them next to each other, side by side, otherwise they blend into same one image.

Otherwise if the image has transparency and you want to show 2 objects in image side by side just use _PutImage far enough apart that the objects don't overlap.

RE: Blending two images - Petr - 02-28-2023

Code: (Select All)
Screen _NewImage(800, 600, 32)

image& = _LoadImage("1.png", 32)
W = _Width(image&): H = _Height(image&)

newimage& = _NewImage(W - 1, H - 1, 32)

_PutImage (W \ 2, 0)-(W, H), image&, newimage&, (W \ 2, 0)-(W, H) 'right half
_PutImage (0, 0)-(W \ 2, H), image&, newimage&, (W, 0)-(W \ 2, H) 'left half

_PutImage (100, 100), newimage& 'place done image

PutImage is enought for this use.

RE: Blending two images - Ikerkaz - 02-28-2023

(02-28-2023, 03:59 PM)Petr Wrote:
Code: (Select All)
Screen _NewImage(800, 600, 32)

image& = _LoadImage("1.png", 32)
W = _Width(image&): H = _Height(image&)

newimage& = _NewImage(W - 1, H - 1, 32)

_PutImage (W \ 2, 0)-(W, H), image&, newimage&, (W \ 2, 0)-(W, H) 'right half
_PutImage (0, 0)-(W \ 2, H), image&, newimage&, (W, 0)-(W \ 2, H) 'left half

_PutImage (100, 100), newimage& 'place done image

PutImage is enought for this use.

Thank you Petr... I tried your code with my image, and this is the output:

[Image: salida.png]

This is not what I am looking for... Sad


[Image: tam1-4.png]

This is my original image. I would like to paint two of them very close without problems. I don't know if it is possible in QB64... anyway thank you very much.

RE: Blending two images - bplus - 02-28-2023

What if you faded the image you made with Photoshop with the image of the spaceship (I assume)?

I could test if I had spaceship image.

RE: Blending two images - TerryRitchie - 02-28-2023

I played around with this for a while and this is the best I could come up with:

Code: (Select All)
DIM Image AS LONG '       alpha image
DIM i AS INTEGER '        for/next loop counter
DIM Pulse AS INTEGER '    number of times to overlay image
DIM PulseDir AS INTEGER ' inc/dec pulse counter

Image = _LOADIMAGE("tam1-4.png", 32) '                     load alpha image
ImageLeft = _NEWIMAGE(130, 288, 32) '                      left image holder
ImageRight = _NEWIMAGE(130, 288, 32) '                     right image holder
_PUTIMAGE (0, 0), Image, ImageLeft '                       create left image
_PUTIMAGE (0, 0), Image, ImageRight, (74, 0)-(203, 287) '  create right image

SCREEN _NEWIMAGE(640, 480, 32) '                           graphics screen
Pulse = 0 '                                                initialize variables
PulseDir = 1
DO '                                                       begin pulse loop
    _LIMIT 30 '                                            30 frames per second
    CLS
    Pulse = Pulse + PulseDir '                             increment/decrement pulse amount
    IF Pulse > 10 OR Pulse < 1 THEN PulseDir = -PulseDir ' reverse pulse adder
    FOR i = 1 TO Pulse '                                   loop the number of pulses
        _PUTIMAGE (32, 0), Image '                         overlay alpha image over and over
    NEXT i
    _PUTIMAGE (0, 0), ImageLeft '                          overlay left image
    _PUTIMAGE (130, 0), ImageRight '                       overlay right image
    _DISPLAY '                                             update screen
LOOP UNTIL _KEYDOWN(27) '                                  ESC to end


By playing around with the amount of left and right image used you can draw the white beams closer or farther apart. By overlaying the original image in between the two outer images you can create a pulsing effect showing your ion engines increasing/decreasing in power. This also softens the slightly darker line in between the left and right image that no matter how hard I try I can't get rid of.

I took your image and processed two of them overlapping side by side in a few paint programs I have. The result is always the same as what QB64 does, so QB64 is actually blending them properly.

RE: Blending two images - Ikerkaz - 02-28-2023

(02-28-2023, 05:59 PM)TerryRitchie Wrote: I played around with this for a while and this is the best I could come up with:

Code: (Select All)
DIM Image AS LONG '       alpha image
DIM i AS INTEGER '        for/next loop counter
DIM Pulse AS INTEGER '    number of times to overlay image
DIM PulseDir AS INTEGER ' inc/dec pulse counter

Image = _LOADIMAGE("tam1-4.png", 32) '                     load alpha image
ImageLeft = _NEWIMAGE(130, 288, 32) '                      left image holder
ImageRight = _NEWIMAGE(130, 288, 32) '                     right image holder
_PUTIMAGE (0, 0), Image, ImageLeft '                       create left image
_PUTIMAGE (0, 0), Image, ImageRight, (74, 0)-(203, 287) '  create right image

SCREEN _NEWIMAGE(640, 480, 32) '                           graphics screen
Pulse = 0 '                                                initialize variables
PulseDir = 1
DO '                                                       begin pulse loop
    _LIMIT 30 '                                            30 frames per second
    CLS
    Pulse = Pulse + PulseDir '                             increment/decrement pulse amount
    IF Pulse > 10 OR Pulse < 1 THEN PulseDir = -PulseDir ' reverse pulse adder
    FOR i = 1 TO Pulse '                                   loop the number of pulses
        _PUTIMAGE (32, 0), Image '                         overlay alpha image over and over
    NEXT i
    _PUTIMAGE (0, 0), ImageLeft '                          overlay left image
    _PUTIMAGE (130, 0), ImageRight '                       overlay right image
    _DISPLAY '                                             update screen
LOOP UNTIL _KEYDOWN(27) '                                  ESC to end


By playing around with the amount of left and right image used you can draw the white beams closer or farther apart. By overlaying the original image in between the two outer images you can create a pulsing effect showing your ion engines increasing/decreasing in power. This also softens the slightly darker line in between the left and right image that no matter how hard I try I can't get rid of.

I took your image and processed two of them overlapping side by side in a few paint programs I have. The result is always the same as what QB64 does, so QB64 is actually blending them properly.
Thank you very much TerryRitchie!!! I think I will reuse your code Smile Smile Smile

RE: Blending two images - TerryRitchie - 02-28-2023

No problem Smile

RE: Blending two images - Ikerkaz - 03-03-2023

In case anyone is interested, I am going to try to explain in my painful English what I have finally done to solve my problem.

I read the glow PNG and put it in a new image (long) variable (I will call it "source").
If this image's width is (i.e.) 100x100 pixels, I create a 2-dimension array that is 150x100 positions (because I'm going to paste one glow near to the other). I will call this array "destiny".

I read for the first time "source" image pixel by pixel with POINT, and I paste these values onto "destiny" array.
I read again "source" image, and I compare the values of "destiny" array located 50 positions to the right. From both valors, I paste the maximum one onto "destiny". 

Finally, i read "destiny" array pixel by pixel, and I write them into another image variable, and then I put this image on the screen.

I hope I have explained myself well... this is my final result, and I like it Smile


[Image: Captura-de-pantalla-2023-03-03-084752.png]

RE: Blending two images - Ikerkaz - 03-03-2023

Another example, now with both images closer:

[Image: Captura-de-pantalla-2023-03-03-102316.png]