Author Topic: Fade In & Out Tests  (Read 2174 times)

0 Members and 1 Guest are viewing this topic.

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
Fade In & Out Tests
« on: October 05, 2021, 01:51:13 am »
I have 3 ideas I'm testing for an effect of having a background image over which I want to Fade In and then Fade Out a Loaded Image.

Here is what @Cobalt  suggested, I probably did something wrong in applying the procedure but don't know what:
Code: QB64: [Select]
  1. _Title "Fade In-Out Tests Cobalts suggestion" 'b+ 2021-10-04
  2. ' Steve suggest: _SetAlpha alphaLevel255& [, color1&][ TO color2&] [, iHdl&]
  3. ' bplus idea random fill overlapping at low to middle transparencey using Point probably very lumpy image
  4. Screen _NewImage(120 * 8, 30 * 16, 32) ' current screen size for Halloween Crypt-O-Gram
  5. fio& = _LoadImage("haunted heads.jpg", 32)
  6. '_PutImage , fio&, 0 ' OK image works
  7.  
  8. ' make sample image
  9. snap& = _NewImage(_Width, _Height, 32)
  10. For i = 1 To _Width * _Height * .00035
  11.     Line (Rnd * _Width, Rnd * _Height)-Step(Rnd * 50, Rnd * 50), _RGB32(Rnd * 255, Rnd * 255, Rnd * 255, Rnd * 255), BF
  12. _PutImage , 0, snap&
  13.  
  14. '  Test Cobalt's suggestion
  15. Dim Shared Layer(0 To 100) As Long ' <<<< Cobalt didn't mention this
  16. 'Layer(0) = snap&  ' <<<<  un comment and just get background, comment and get back ground then only fade in of heads
  17. Fade_In fio& ' where's my background image???
  18.  
  19.  
  20. ' Fade_In, Fade_Out, DarkenImage From Cobalt 2021-10-04  https://www.qb64.org/forum/index.php?topic=4254.msg136319#msg136319
  21. Sub Fade_Out (L&)
  22.     For n! = 1 To 0.00 Step -0.05
  23.         i2& = _CopyImage(L&)
  24.         DarkenImage i2&, n!
  25.         _PutImage (0, 0), i2&, Layer(0)
  26.         _FreeImage i2&
  27.         _Delay .06
  28.     Next
  29.  
  30. Sub Fade_In (L&)
  31.     For n! = 0.01 To 1 Step 0.05
  32.         i2& = _CopyImage(L&)
  33.         DarkenImage i2&, n!
  34.         _PutImage (0, 0), i2&, Layer(0)
  35.         _FreeImage i2&
  36.         _Delay .06
  37.     Next
  38.  
  39. Sub DarkenImage (Image As Long, Value_From_0_To_1 As Single)
  40.     If Value_From_0_To_1 <= 0 Or Value_From_0_To_1 >= 1 Or _PixelSize(Image) <> 4 Then Exit Sub
  41.     Dim Buffer As _MEM: Buffer = _MemImage(Image) 'Get a memory reference to our image
  42.     Dim Frac_Value As Long: Frac_Value = Value_From_0_To_1 * 65536 'Used to avoid slow floating point calculations
  43.     Dim O As _Offset, O_Last As _Offset
  44.     O = Buffer.OFFSET 'We start at this offset
  45.     O_Last = Buffer.OFFSET + _Width(Image) * _Height(Image) * 4 'We stop when we get to this offset
  46.     'use on error free code ONLY!
  47.     Do
  48.         _MemPut Buffer, O, _MemGet(Buffer, O, _Unsigned _Byte) * Frac_Value \ 65536 As _UNSIGNED _BYTE
  49.         _MemPut Buffer, O + 1, _MemGet(Buffer, O + 1, _Unsigned _Byte) * Frac_Value \ 65536 As _UNSIGNED _BYTE
  50.         _MemPut Buffer, O + 2, _MemGet(Buffer, O + 2, _Unsigned _Byte) * Frac_Value \ 65536 As _UNSIGNED _BYTE
  51.         O = O + 4
  52.     Loop Until O = O_Last
  53.     'turn checking back on when done!
  54.     _MemFree Buffer
  55.  
  56.  
  57.  
  58.  

I either just get all background Or all background until Fade_IN applied then ONLY image fade in very fast.
haunted heads.jpg
* haunted heads.jpg (Filesize: 40.07 KB, Dimensions: 1280x720, Views: 259)

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
Re: Fade In & Out Tests
« Reply #1 on: October 05, 2021, 02:33:50 am »
Well this works so dang nice I don't even want to try the idea I had!
Code: QB64: [Select]
  1. _Title "Fade In-Out Tests per Steve Test _SetAplpha" ' b+ 2021-10-04
  2. ' Steve suggest: _SetAlpha alphaLevel255& [, color1&][ TO color2&] [, iHdl&]
  3. ' bplus idea random fill overlapping at low to middle transparencey using Point probably very lumpy image
  4. Screen _NewImage(120 * 8, 30 * 16, 32) ' current screen size for Halloween Crypt-O-Gram
  5. fio& = _LoadImage("haunted heads.jpg", 32)
  6. _PutImage , fio&, 0 ' OK image works
  7. Print "Here is Image to Fade In-Out, zzz... press any"
  8.  
  9. ' make sample image
  10. snap& = _NewImage(_Width, _Height, 32)
  11. For i = 1 To _Width * _Height * .00035
  12.     Line (Rnd * _Width, Rnd * _Height)-Step(Rnd * 50, Rnd * 50), _RGB32(Rnd * 255, Rnd * 255, Rnd * 255, Rnd * 255), BF
  13. _PutImage , 0, snap&
  14. Print "Here is background I want to Fade-In Image over, zzz... press any"
  15. FadeIn snap&, fio&, 7 ' well that works nicely
  16. FadeOut snap&, fio&, 15
  17.  
  18. Sub FadeIn (BackHdl&, Img&, secs)
  19.     'Here is Wiki on _SetAlpha
  20.     'Syntax
  21.     '_SETALPHA alpha&[, color1&][ TO colour2&] [, imageHandle&]
  22.  
  23.     'Parameters
  24.     'alpha& is the new alpha level to set, ranging from 0 (transparent) to 255 (opaque).
  25.     'color1& designates the 32-bit LONG color value or range of color values color1& TO colour2& to set the transparency.
  26.     'If no color value or range of colors is given, the entire image's alpha is changed, including any _CLEARCOLOR settings.
  27.     'If imageHandle& is omitted, it is assumed to be the current write page or destination image.
  28.  
  29.     'timing
  30.     tf = Int(255 / secs) ' 255 image transparencies from 0 to 255 in secs seconds
  31.     t = Timer(.001)
  32.     For al& = 1 To 255
  33.         _PutImage , BackHdl&, 0
  34.         _SetAlpha al&, , Img&
  35.         _PutImage , Img&, 0
  36.         Locate 1, 1: Print Timer(1) - t
  37.         _Display
  38.         _Limit tf
  39.     Next
  40.  
  41. Sub FadeOut (BackHdl&, Img&, secs)
  42.     tf = Int(255 / secs) ' 255 image transparencies from 0 to 255 in secs seconds
  43.     t = Timer(.001)
  44.     For al& = 254 To 0 Step -1
  45.         _PutImage , BackHdl&, 0
  46.         _SetAlpha al&, , Img&
  47.         _PutImage , Img&, 0
  48.         Locate 1, 1: Print Timer(1) - t
  49.         _Display
  50.         _Limit tf
  51.     Next
  52.  
  53.  

I think I have it!

Offline SMcNeill

  • QB64 Developer
  • Forum Resident
  • Posts: 3972
    • Steve’s QB64 Archive Forum
Re: Fade In & Out Tests
« Reply #2 on: October 05, 2021, 02:36:45 am »
A simple set of routines to FadeIn an image and then FadeBack to the original screen:

Code: QB64: [Select]
  1. Dim Shared Background
  2.  
  3. Screen _NewImage(1024, 720, 32)
  4. 'draw a pretty screen
  5. For i = 0 To 100
  6.     Line (Rnd * 1024, Rnd * 720)-(Rnd * 1024, Rnd * 720), _RGB(Rnd * 256, Rnd * 256, Rnd * 256), BF
  7.  
  8. 'now, create an image to fade in and out.  to keep it simple, I'm going to work with just a circle so I don't need external files
  9. image = _NewImage(600, 600, 32)
  10. _Dest image
  11. Cls , 0
  12. For i = 0 To 200 Step .25
  13.     Circle (300, 300), i, _RGB32(255, 255, 0)
  14.  
  15.  
  16. FadeIn 212, 60, image
  17. FadeBack
  18.  
  19. Sub FadeIn (x, y, image)
  20.     Background = _CopyImage(0) 'the background before we alter it with a fade in effect.
  21.     PCopy 0, 1
  22.     For i = 1 To 10 'ten steps, 1 per second for slowly visible fade in effect
  23.         PCopy 1, 0
  24.         temp = _CopyImage(image)
  25.         _SetAlpha i * 25.5, &HFF000000&& To &HFFFFFFFF&&, temp
  26.         _PutImage (x, y), temp
  27.         _FreeImage temp
  28.         _Display
  29.         _Limit 1
  30.     Next
  31.  
  32. Sub FadeBack
  33.     PCopy 0, 1
  34.     For i = 1 To 10 'ten steps, 1 per second for slowly visible fade in effect
  35.         PCopy 1, 0
  36.         temp = _CopyImage(Background)
  37.         _SetAlpha i * 25.5, &HFF000000&& To &HFFFFFFFF&&, temp
  38.         _PutImage (x, y), temp
  39.         _FreeImage temp
  40.         _Display
  41.         _Limit 1
  42.     Next
  43.  

Now I'm not going for any smooth fade in and fade out effects here; I'm just shooting for something simple to showcase the _SETALPHA command.  All this does is take 10 seconds to slowly fade in a yellow circle onto the center of the screen, and then fadeout that circle over another 10 seconds.   It's one step of fading every second, so it's not a smooth transition here, but is instead one where you can visually watch each step along the way.  If I was going make this a smooth fade in and fade out, I'd probably do it with a much smoother FOR loop with a higher FPS limit, like so:

Code: QB64: [Select]
  1. Dim Shared Background
  2.  
  3. Screen _NewImage(1024, 720, 32)
  4. 'draw a pretty screen
  5. For i = 0 To 100
  6.     Line (Rnd * 1024, Rnd * 720)-(Rnd * 1024, Rnd * 720), _RGB(Rnd * 256, Rnd * 256, Rnd * 256), BF
  7.  
  8. 'now, create an image to fade in and out.  to keep it simple, I'm going to work with just a circle so I don't need external files
  9. image = _NewImage(600, 600, 32)
  10. _Dest image
  11. Cls , 0
  12. For i = 0 To 200 Step .25
  13.     Circle (300, 300), i, _RGB32(255, 255, 0)
  14.  
  15.  
  16. FadeIn 212, 60, image
  17. FadeBack
  18.  
  19. Sub FadeIn (x, y, image)
  20.     Background = _CopyImage(0) 'the background before we alter it with a fade in effect.
  21.     PCopy 0, 1
  22.     For i = 1 To 255
  23.         PCopy 1, 0
  24.         temp = _CopyImage(image)
  25.         _SetAlpha i, &HFF000000&& To &HFFFFFFFF&&, temp
  26.         _PutImage (x, y), temp
  27.         _FreeImage temp
  28.         _Display
  29.         _Limit 60
  30.     Next
  31.  
  32. Sub FadeBack
  33.     PCopy 0, 1
  34.     For i = 1 To 255
  35.         PCopy 1, 0
  36.         temp = _CopyImage(Background)
  37.         _SetAlpha i, &HFF000000&& To &HFFFFFFFF&&, temp
  38.         _PutImage (x, y), temp
  39.         _FreeImage temp
  40.         _Display
  41.         _Limit 60
  42.     Next
  43.  

Just be careful to free all your images so you don't get a memory leak anywhere in your program.  I really didn't shoot too hard to do this here (Background never frees itself anywhere, so multiple calls would generate an memory leak), but it's not an issue for a demo this simple.  Just don't let it catch you in your own code anywhere, if you're doing anything more than just fading in and out of a simple splash screen, for instance.  ;)



@bplus You posted while I was in the middle of making and editing my post.  Looks like what you have is very similar to this, but PBBTTTTTBBBTTT!!  I'm going to share this anyway, since I've already typed it all up and such.  :P
https://github.com/SteveMcNeill/Steve64 — A github collection of all things Steve!

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
Re: Fade In & Out Tests
« Reply #3 on: October 05, 2021, 02:47:35 am »
Quote
@bplus You posted while I was in the middle of making and editing my post.  Looks like what you have is very similar to this, but PBBTTTTTBBBTTT!!  I'm going to share this anyway, since I've already typed it all up and such.  :P

LOL just call us the Redundant Brother tonight!

Offline Dav

  • Forum Resident
  • Posts: 792
Re: Fade In & Out Tests
« Reply #4 on: October 05, 2021, 11:53:07 am »
Cool fade in & out routines.  Better than what I was using.  Thanks for sharing it.

- Dav