Author Topic: Water Ripple Effect  (Read 7537 times)

0 Members and 1 Guest are viewing this topic.

Offline Ashish

  • Forum Resident
  • Posts: 630
  • Never Give Up!
    • View Profile
Water Ripple Effect
« 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
  3.  
  4. _TITLE "Ripple Effect, Pixel by Pixel Algorithm"
  5. SCREEN _NEWIMAGE(231, 288, 32)
  6.  
  7. image& = _LOADIMAGE("bg.jpg")
  8.  
  9. _SOURCE image&
  10. DIM imageData(_WIDTH(image&), _HEIGHT(image&)) AS _UNSIGNED LONG
  11. DIM buffer1(_WIDTH(image&), _HEIGHT(image&)), buffer2(_WIDTH(image&), _HEIGHT(image&)), tempBuffer(_WIDTH(image&), _HEIGHT(image&))
  12. DIM smoothedBuffer(_WIDTH(image&), _HEIGHT(image&)), HeightMap(_WIDTH(image&), _HEIGHT(image&))
  13.  
  14. FOR i = 0 TO _WIDTH(image&) - 1
  15.     FOR j = 0 TO _HEIGHT(image&) - 1
  16.         imageData(i, _HEIGHT(image&) - j) = POINT(i, j)
  17. NEXT j, i
  18.  
  19. _PUTIMAGE (0, 0), image&
  20.  
  21. d = 0.99
  22. 'make our  ripples! :D
  23. FOR i = 0 TO 4
  24.     buffer1(RND * _WIDTH(image&), RND * _HEIGHT(image&)) = 255
  25.     IF _MOUSEBUTTON(1) AND _MOUSEY > _HEIGHT(image&) - 1 THEN
  26.         buffer1(_MOUSEX, _MOUSEY - 143) = 255
  27.     END IF
  28.     FOR y = 1 TO _HEIGHT(image&) - 2
  29.         FOR x = 1 TO _WIDTH(image&) - 2
  30.             buffer2(x, y) = ((buffer1(x - 1, y) + buffer1(x + 1, y) + buffer1(x, y - 1) + buffer1(x, y + 1)) / 2 - buffer2(x, y))
  31.             buffer2(x, y) = buffer2(x, y) * d
  32.     NEXT x, y
  33.  
  34.  
  35.     FOR i = 1 TO _WIDTH(image&) - 1
  36.         FOR j = 1 TO _HEIGHT(image&) - 1
  37.             smoothedBuffer(i, j) = (buffer2(i - 1, j) + buffer2(i + 1, j) + buffer2(i, j + 1) + buffer2(i, j - 1)) / 4
  38.             HeightMap(i, j) = smoothedBuffer(i, j) * 2 * d
  39.     NEXT j, i
  40.  
  41.  
  42.     FOR i = 1 TO _WIDTH(image&) - 1
  43.         FOR j = 1 TO _HEIGHT(image&) - 1
  44.  
  45.             xOff = smoothedBuffer(i - 1, j) - smoothedBuffer(i + 1, j)
  46.             yOff = smoothedBuffer(i, j - 1) - smoothedBuffer(i, j + 1)
  47.             tx = xOff + i: ty = yOff + j
  48.             IF tx > _WIDTH(image&) THEN tx = _WIDTH(image&) - 1
  49.             IF ty > _HEIGHT(image&) THEN ty = _HEIGHT(image&) - 1
  50.             IF tx < 0 THEN tx = 0
  51.             IF ty < 0 THEN ty = 0
  52.  
  53.             PSET (i, j + _HEIGHT(image&) - 1), imageData(tx, ty)
  54.                        
  55.                         'swapping the buffers
  56.             tempBuffer(i, j) = buffer2(i, j)
  57.             buffer2(i, j) = buffer1(i, j)
  58.             buffer1(i, j) = tempBuffer(i, j)
  59.     NEXT j, i
  60.  
  61.  
  62.  
  63.     _DISPLAY
  64.  
  65.     _LIMIT 60
  66.  
bg.jpg
* bg.jpg (Filesize: 33.42 KB, Dimensions: 231x144, Views: 539)
« Last Edit: May 20, 2018, 10:36:12 am by Ashish »
if (Me.success) {Me.improve()} else {Me.tryAgain()}


My Projects - https://github.com/AshishKingdom?tab=repositories
OpenGL tutorials - https://ashishkingdom.github.io/OpenGL-Tutorials

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
    • View Profile
Re: Water Ripple Effect
« Reply #1 on: May 19, 2018, 12:42:00 pm »
Hey Ashish!

Looks interesting, missing tail end of data section... at least!
Out of data.PNG
* Out of data.PNG (Filesize: 78.52 KB, Dimensions: 825x732, Views: 446)

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
    • View Profile
Re: Water Ripple Effect
« Reply #2 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.
Ripple Effect.PNG
* Ripple Effect.PNG (Filesize: 233.06 KB, Dimensions: 607x598, Views: 560)
« Last Edit: May 20, 2018, 12:01:56 pm by bplus »

Offline Ashish

  • Forum Resident
  • Posts: 630
  • Never Give Up!
    • View Profile
Re: Water Ripple Effect
« Reply #3 on: May 20, 2018, 04:40:02 am »
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. :(
if (Me.success) {Me.improve()} else {Me.tryAgain()}


My Projects - https://github.com/AshishKingdom?tab=repositories
OpenGL tutorials - https://ashishkingdom.github.io/OpenGL-Tutorials

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
    • View Profile
Re: Water Ripple Effect
« Reply #4 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.
Bridge reflected and rippled.PNG
* Bridge reflected and rippled.PNG (Filesize: 681.16 KB, Dimensions: 692x380, Views: 605)
bridge.PNG
* bridge.PNG (Filesize: 439.84 KB, Dimensions: 684x216, Views: 510)
« Last Edit: May 20, 2018, 11:46:25 am by bplus »

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
    • View Profile
Re: Water Ripple Effect
« Reply #5 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.
« Last Edit: May 20, 2018, 11:56:35 am by bplus »

Offline Ashish

  • Forum Resident
  • Posts: 630
  • Never Give Up!
    • View Profile
Re: Water Ripple Effect
« Reply #6 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
if (Me.success) {Me.improve()} else {Me.tryAgain()}


My Projects - https://github.com/AshishKingdom?tab=repositories
OpenGL tutorials - https://ashishkingdom.github.io/OpenGL-Tutorials

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
    • View Profile
Re: Water Ripple Effect
« Reply #7 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
  3.  
  4. _TITLE "Ripple Effect, Pixel by Pixel Algorithm"
  5. SCREEN _NEWIMAGE(231, 288, 32)
  6.  
  7. image& = _LOADIMAGE("bg.jpg")
  8.  
  9. _SOURCE image&
  10. DIM imageData(_WIDTH(image&), _HEIGHT(image&)) AS _UNSIGNED LONG
  11. DIM buffer1(_WIDTH(image&), _HEIGHT(image&)), buffer2(_WIDTH(image&), _HEIGHT(image&)), tempBuffer(_WIDTH(image&), _HEIGHT(image&))
  12. DIM smoothedBuffer(_WIDTH(image&), _HEIGHT(image&)), HeightMap(_WIDTH(image&), _HEIGHT(image&))
  13.  
  14. FOR i = 0 TO _WIDTH(image&) - 1
  15.     FOR j = 0 TO _HEIGHT(image&) - 1
  16.         imageData(i, _HEIGHT(image&) - j) = POINT(i, j)
  17. NEXT j, i
  18.  
  19. _PUTIMAGE (0, 0), image&
  20.  
  21. d = 0.99
  22. 'make our  ripples! :D
  23. FOR i = 0 TO 4
  24.     buffer1(RND * _WIDTH(image&), RND * _HEIGHT(image&)) = 255
  25.     'WHILE _MOUSEINPUT: WEND
  26.     'IF _MOUSEBUTTON(1) AND _MOUSEY > _HEIGHT(image&) - 1 THEN
  27.     '    WHILE _MOUSEINPUT: WHILE _MOUSEBUTTON(1): WEND: WEND
  28.     '    buffer1(_MOUSEX, _MOUSEY - 173) = 255
  29.     'END IF
  30.  
  31.     lc = lc + 1
  32.     IF lc MOD 200 = 0 THEN buffer1(RND * _WIDTH(image&), RND * _HEIGHT(image&)) = 255
  33.     FOR y = 1 TO _HEIGHT(image&) - 2
  34.         FOR x = 1 TO _WIDTH(image&) - 2
  35.              buffer2(x, y) = ((buffer1(x - 1, y) + buffer1(x + 1, y) + buffer1(x, y - .25) + buffer1(x, y + .5)) / 2 - buffer2(x, y))
  36.             buffer2(x, y) = buffer2(x, y) * d
  37.     NEXT x, y
  38.  
  39.  
  40.     FOR i = 1 TO _WIDTH(image&) - 1
  41.         FOR j = 1 TO _HEIGHT(image&) - 1
  42.             smoothedBuffer(i, j) = (buffer2(i - 1, j) + buffer2(i + 1, j) + buffer2(i, j + 1) + buffer2(i, j - 1)) / 4
  43.             HeightMap(i, j) = smoothedBuffer(i, j) * 2 * d
  44.             '_LIMIT 100
  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.             '_LIMIT 100
  66.     NEXT j, i
  67.  
  68.  
  69.  
  70.     _DISPLAY
  71.  
  72.     _LIMIT 60
  73.  
  74.  
« Last Edit: May 21, 2018, 10:01:14 am by bplus »

Offline Ashish

  • Forum Resident
  • Posts: 630
  • Never Give Up!
    • View Profile
Re: Water Ripple Effect
« Reply #8 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? ???
if (Me.success) {Me.improve()} else {Me.tryAgain()}


My Projects - https://github.com/AshishKingdom?tab=repositories
OpenGL tutorials - https://ashishkingdom.github.io/OpenGL-Tutorials

Offline bplus

  • Global Moderator
  • Forum Resident
  • Posts: 8053
  • b = b + ...
    • View Profile
Re: Water Ripple Effect
« Reply #9 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!