Water Ripple Effect

[Ashish]

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. RANDOMIZE TIMER
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
19. _SOURCE 0
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
27. NEXT
28. DO
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 - 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
72. LOOP
73.  

[bplus]

Hey Ashish!

Looks interesting, missing tail end of data section... at least!

[bplus]

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.

[Ashish]

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. :(

[bplus]

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.

[bplus]

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:

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]:

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.

[Ashish]

@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

[bplus]

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. RANDOMIZE TIMER
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
19. _SOURCE 0
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
27. NEXT
28. DO
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
77. LOOP
78.  
79.  

[Ashish]

Oh! So that's what you are saying! :)
BTW, Do you think using floating point values with array is good? ???

[bplus]

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!