Text Only | Text with Attachments

QB64.org Forum

Active Forums => Programs => Topic started by: Ashish on May 19, 2018, 11:27:00 am

Title: Water Ripple Effect
Post by: Ashish on May 19, 2018, 11:27:00 am
Hi QB64 Guys! :D
Here's a water ripple simulation (not very precise) made by me with help of method provided by
this guy - https://web.archive.org/web/20160418004149/http://freespace.virgin.net/hugo.elias/graphics/x_water.htm

Click on the water add more ripples
& Download the image data from the attachment

Code: QB64: [Select]
  1. 'Coded by Ashish in Qb64
  2. 'https://web.archive.org/web/20160418004149/http://freespace.virgin.net/hugo.elias/graphics/x_water.htm
  4.  
  5. _TITLE "Ripple Effect, Pixel by Pixel Algorithm"
  6. SCREEN _NEWIMAGE(231, 288, 32)
  7.  
  8. image& = _LOADIMAGE("bg.jpg")
  9.  
  10. _SOURCE image&
  11. DIM imageData(_WIDTH(image&), _HEIGHT(image&)) AS _UNSIGNED LONG
  12. DIM buffer1(_WIDTH(image&), _HEIGHT(image&)), buffer2(_WIDTH(image&), _HEIGHT(image&)), tempBuffer(_WIDTH(image&), _HEIGHT(image&))
  13. DIM smoothedBuffer(_WIDTH(image&), _HEIGHT(image&)), HeightMap(_WIDTH(image&), _HEIGHT(image&))
  14.  
  15. FOR i = 0 TO _WIDTH(image&) - 1
  16.     FOR j = 0 TO _HEIGHT(image&) - 1
  17.         imageData(i, _HEIGHT(image&) - j) = POINT(i, j)
  18. NEXT j, i
  20.  
  21. _PUTIMAGE (0, 0), image&
  22.  
  23. d = 0.99
  24. 'make our  ripples! :D
  25. FOR i = 0 TO 4
  26.     buffer1(RND * _WIDTH(image&), RND * _HEIGHT(image&)) = 255
  30.     IF _MOUSEBUTTON(1) AND _MOUSEY > _HEIGHT(image&) - 1 THEN
  32.         buffer1(_MOUSEX, _MOUSEY - 143) = 255
  33.     END IF
  34.     FOR y = 1 TO _HEIGHT(image&) - 2
  35.         FOR x = 1 TO _WIDTH(image&) - 2
  36.             buffer2(x, y) = ((buffer1(x - 1, y) + buffer1(x + 1, y) + buffer1(x, y - 1) + buffer1(x, y + 1)) / 2 - buffer2(x, y))
  37.             buffer2(x, y) = buffer2(x, y) * d
  38.     NEXT x, y
  39.  
  40.  
  41.     FOR i = 1 TO _WIDTH(image&) - 1
  42.         FOR j = 1 TO _HEIGHT(image&) - 1
  43.             smoothedBuffer(i, j) = (buffer2(i - 1, j) + buffer2(i + 1, j) + buffer2(i, j + 1) + buffer2(i, j - 1)) / 4
  44.             HeightMap(i, j) = smoothedBuffer(i, j) * 2 * d
  45.     NEXT j, i
  46.  
  47.  
  48.     FOR i = 1 TO _WIDTH(image&) - 1
  49.         FOR j = 1 TO _HEIGHT(image&) - 1
  50.  
  51.             xOff = smoothedBuffer(i - 1, j) - smoothedBuffer(i + 1, j)
  52.             yOff = smoothedBuffer(i, j - 1) - smoothedBuffer(i, j + 1)
  53.             tx = xOff + i: ty = yOff + j
  54.             IF tx > _WIDTH(image&) THEN tx = _WIDTH(image&) - 1
  55.             IF ty > _HEIGHT(image&) THEN ty = _HEIGHT(image&) - 1
  56.             IF tx < 0 THEN tx = 0
  57.             IF ty < 0 THEN ty = 0
  58.  
  59.             PSET (i, j + _HEIGHT(image&) - 1), imageData(tx, ty)
  60.                        
  61.                         'swapping the buffers
  62.             tempBuffer(i, j) = buffer2(i, j)
  63.             buffer2(i, j) = buffer1(i, j)
  64.             buffer1(i, j) = tempBuffer(i, j)
  65.     NEXT j, i
  66.  
  67.  
  68.  
  69.     _DISPLAY
  70.  
  71.     _LIMIT 60
  73.  
Title: Re: Water Ripple Effect
Post by: bplus on May 19, 2018, 12:42:00 pm
Hey Ashish!

Looks interesting, missing tail end of data section... at least!
Title: Re: Water Ripple Effect
Post by: bplus on May 19, 2018, 12:55:51 pm
form [abandoned, outdated and now likely malicious qb64 dot net website - don’t go there] post:
Code: QB64: [Select]
  1. EDIT : OK this site still can't post complete data section.
  2.  
  3.  

Looks nice Ashish!

Couldn't we ripple effect any png or jpeg file without all that DATA?

Append: I should say, take any png or jpeg or whatever QB64 can deal with, load the file, gets the points, reflect them and then ripple the reflection. We can do that right?

Oh, I wonder if that would work with sound, been reading too much of Einstein... ;P

Append: Note screen shot here does not do justice to ripple effect you can create especially by clicking mouse over and over a same few points for interference patterns in ripples.
Title: Re: Water Ripple Effect
Post by: Ashish on May 20, 2018, 04:40:02 am
Quote from: bplus on May 19, 2018, 12:55:51 pm
Couldn't we ripple effect any png or jpeg file without all that DATA?
Of course, we can do it. Please, check the modified code again. Sorry for troubling you and other programmers from my half code. ;D
I wonder, why the program doesn't post fully to the forum. :(
Title: Re: Water Ripple Effect
Post by: bplus on May 20, 2018, 11:27:42 am
Here is all I modified to try a different image:
Code: QB64: [Select]
  1. SCREEN _NEWIMAGE(684, 350, 32)
  2.  
  3. image& = _LOADIMAGE("bridge.png")
  4.  
  5.  

Oh hey! It almost worked!

1. we need the new image to catch the width of image to reflect
2. and double the height
and then 3. figure out how to make ripples oval or elliptical according to distance from water line (which is half way down if we double the height).
4. also ripples I was clicking off were not coming in at mouse x, y because I did not fix that part of code.

Never-the-less nice work getting rid of DATA, now this is worth a study. What is very interesting is that you still get an interference pattern when ripples run into each other! These are fake ripples and yet they appear to behave as real ones interference pattern and all! (I am speaking about the [abandoned, outdated and now likely malicious qb64 dot net website - don’t go there] version with mouse click x, y coordinated to picture).

Note: Bridge.png source was a reframed snap of Copyright free images on Internet.
Title: Re: Water Ripple Effect
Post by: bplus on May 20, 2018, 11:52:36 am
Quote
I wonder, why the program doesn't post fully to the forum. :(

So do I. My guess is that it is either a size issue or some DATA items might look like virus or malware or just plain dangerous. But I don't know how carefully:

Quote
SMF 2.0.15 | SMF © 2017, Simple Machines
XHTML RSS WAP2

scans stuff being posted.

Oh hey! Check it out, here is the version running at [abandoned, outdated and now likely malicious qb64 dot net website - don’t go there]:

Quote
SMF 2.0.3 | SMF © 2011, Simple Machines
XHTML RSS WAP2

It looks like a much older version which means it's not up to date with security threats.
Title: Re: Water Ripple Effect
Post by: Ashish on May 21, 2018, 08:50:11 am
@bplus
I recommend you to watch this video to fully understand what is happening inside -

After that, read this article to its end carefully - https://web.archive.org/web/20160418004149/http://freespace.virgin.net/hugo.elias/graphics/x_water.htm
Title: Re: Water Ripple Effect
Post by: bplus on May 21, 2018, 09:43:20 am
Read? !

Just saying you could do this with simple mod:
Code: QB64: [Select]
  1. 'Coded by Ashish in Qb64
  2. 'https://web.archive.org/web/20160418004149/http://freespace.virgin.net/hugo.elias/graphics/x_water.htm
  4.  
  5. _TITLE "Ripple Effect, Pixel by Pixel Algorithm"
  6. SCREEN _NEWIMAGE(231, 288, 32)
  7.  
  8. image& = _LOADIMAGE("bg.jpg")
  9.  
  10. _SOURCE image&
  11. DIM imageData(_WIDTH(image&), _HEIGHT(image&)) AS _UNSIGNED LONG
  12. DIM buffer1(_WIDTH(image&), _HEIGHT(image&)), buffer2(_WIDTH(image&), _HEIGHT(image&)), tempBuffer(_WIDTH(image&), _HEIGHT(image&))
  13. DIM smoothedBuffer(_WIDTH(image&), _HEIGHT(image&)), HeightMap(_WIDTH(image&), _HEIGHT(image&))
  14.  
  15. FOR i = 0 TO _WIDTH(image&) - 1
  16.     FOR j = 0 TO _HEIGHT(image&) - 1
  17.         imageData(i, _HEIGHT(image&) - j) = POINT(i, j)
  18. NEXT j, i
  20.  
  21. _PUTIMAGE (0, 0), image&
  22.  
  23. d = 0.99
  24. 'make our  ripples! :D
  25. FOR i = 0 TO 4
  26.     buffer1(RND * _WIDTH(image&), RND * _HEIGHT(image&)) = 255
  29.     'WHILE _MOUSEINPUT: WEND
  30.     'IF _MOUSEBUTTON(1) AND _MOUSEY > _HEIGHT(image&) - 1 THEN
  31.     '    WHILE _MOUSEINPUT: WHILE _MOUSEBUTTON(1): WEND: WEND
  32.     '    buffer1(_MOUSEX, _MOUSEY - 173) = 255
  33.     'END IF
  34.  
  35.     lc = lc + 1
  36.     IF lc MOD 200 = 0 THEN buffer1(RND * _WIDTH(image&), RND * _HEIGHT(image&)) = 255
  37.     FOR y = 1 TO _HEIGHT(image&) - 2
  38.         FOR x = 1 TO _WIDTH(image&) - 2
  39.              buffer2(x, y) = ((buffer1(x - 1, y) + buffer1(x + 1, y) + buffer1(x, y - .25) + buffer1(x, y + .5)) / 2 - buffer2(x, y))
  40.             buffer2(x, y) = buffer2(x, y) * d
  41.     NEXT x, y
  42.  
  43.  
  44.     FOR i = 1 TO _WIDTH(image&) - 1
  45.         FOR j = 1 TO _HEIGHT(image&) - 1
  46.             smoothedBuffer(i, j) = (buffer2(i - 1, j) + buffer2(i + 1, j) + buffer2(i, j + 1) + buffer2(i, j - 1)) / 4
  47.             HeightMap(i, j) = smoothedBuffer(i, j) * 2 * d
  48.             '_LIMIT 100
  49.     NEXT j, i
  50.  
  51.  
  52.     FOR i = 1 TO _WIDTH(image&) - 1
  53.         FOR j = 1 TO _HEIGHT(image&) - 1
  54.  
  55.             xOff = smoothedBuffer(i - 1, j) - smoothedBuffer(i + 1, j)
  56.             yOff = smoothedBuffer(i, j - 1) - smoothedBuffer(i, j + 1)
  57.             tx = xOff + i: ty = yOff + j
  58.             IF tx > _WIDTH(image&) THEN tx = _WIDTH(image&) - 1
  59.             IF ty > _HEIGHT(image&) THEN ty = _HEIGHT(image&) - 1
  60.             IF tx < 0 THEN tx = 0
  61.             IF ty < 0 THEN ty = 0
  62.  
  63.             PSET (i, j + _HEIGHT(image&) - 1), imageData(tx, ty)
  64.  
  65.             'swapping the buffers
  66.             tempBuffer(i, j) = buffer2(i, j)
  67.             buffer2(i, j) = buffer1(i, j)
  68.             buffer1(i, j) = tempBuffer(i, j)
  69.             '_LIMIT 100
  70.     NEXT j, i
  71.  
  72.  
  73.  
  74.     _DISPLAY
  75.  
  76.     _LIMIT 60
  78.  
  79.  
Title: Re: Water Ripple Effect
Post by: Ashish on May 21, 2018, 12:07:49 pm
Oh! So that's what you are saying! :)
BTW, Do you think using floating point values with array is good? ???
Title: Re: Water Ripple Effect
Post by: bplus on May 21, 2018, 12:24:48 pm
Quote
BTW, Do you think using floating point values with array is good? ???

Probably much faster with integers, and probably would spoil my little mod of your code. I have experimented, and only fractions under .5 work to flatten the y values (for ellipses instead of circles), trying  y +/- .65 has really weird results!

So what is good? ;-))

Your post was fun, thanks!
Text Only | Text with Attachments