Coding Challenge 102: 2D Water Ripple

References:

Videos:

Related Coding Challenges:

Timestamps:
0:00 Introduction
0:54 2D water ripples algorithm
1:38 Let's Code
2:14 Create a 2D Array
5:08 Find new current pixel value
7:54 Display new pixel value
9:31 Initialize array
10:06 Swap buffers
12:16 Add dampening
12:54 Correction: subtract current value
13:56 Add mousePressed
15:51 Add mouseDragged

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

#2dwaterripple #cellularautomata #processing

[iestynne]

Hugo Elias is a friend of mine. His site is a treasure trove of creative graphics techniques, wonderfully explained. Way ahead of his time in terms of visual online educational material. Really glad it got archived!

[Invalid]

I've learned a ton of stuff from watching your videos.
A big THANK YOU and don't ever stop coding. ☺

[atiiii]

Don't understand a single thing. I'm 0 at what you do. Neither understand a single thing what's going. But love the way how you do it. . You are pro! Keep it up. Watch all of ur videos...

[lordwhippleton]

You have been the biggest inspiration in me pushing myself towards coding and programming. Because of you I have created multiple versions of the animated circle packing, learned to make simple physx engines in P3D and have even made several audio visualizers as part of my senior capstone for highschool. Thank you so much Daniel Shiffman for what you have provided me and others!

[atrumluminarium]

Man seeing how webpages looked back in the day makes me feel so old

[CherPsKy]

I love how happy you present yourself. It's motivating.

[dannorris]

Wow! I'm up to date!!! Started watching the coding challenges at the beginning of the year and after watching 150 of them, I'm now up to date. Thanks so much for the videos Dan!

[addowhite]

I love this algorithm! I actually implemented this years ago back when I was in school from the exact same webpage. Was looking for it again recently but couldn't find it.
Well now I know why.
Glad to find it again :D

[likeyou]

With damping 0, 999 u get rly cool patterns if u drop one water drop in the middle

[thecodingnerd]

The ripples look super cool when they bounce off the edges :)

[edster]

I've just coded this in Lua using your video as a guide :) Love this coding challenge and your channel!

[aslatas]

My goodness, I have to try this in UE4 (or Unity). Might be able to generate heightmap waves that react to actual objects being tossed into water. Oh man now I'm excited.

[ErnestGWilsonII]

@Daniel you need to be more careful when you find old code on the internet, you got lucky this was not an ancient curse that opened a time portal and allowed the zombies back in! I am of course subscribed to this channel and thumbs up as always! I love that you took the time to thank the original author and dust off old technology that is still cool and in fact fun to run even on new technology! This makes me wonder how many awesome code archives could be dusted off and revampt. I also thought it was really neat how quickly you adapted the code into only a few lines of Easy-to-Read code. I really hope the original person that posted the web page decades ago sees your video, this was as fun today as it was then I am sure! I wonder if some newer technology used in conjunction with this algorithm could use some kind of hardware acceleration or webgl or just plain horsepower on new hardware that could add features and performance that the original author only dreamed of back in the day?

[draco]

I think it makes the effect look better if you use the abs function when assigning current[i][j] and also if you take the diagonal neighbours to your pixel

[cirrilo]

Best programming teacher in Oasis!!🕹😘☺Thnx!

[AndrewTuline]

That's a fun and nice simple routine that I've appropriated to create a 1D FastLED example on the Arduino.

My challenge, however, is limited RAM. Some folks spend most of their available RAM on the CRGB array for the LEDs, and not enough memory is left over for the arrays used in this example.

So, how to create a nice smooth propagated and dampened droplet without using arrays. So far, I've got sine waves, phase shifting and exponential dampening, but not the time oriented propagation from the initial 'splash'.

[xnick_uy]

Very cool result from a seemingly simple looking code.

If your arrays become too large and you need to save memory, it is possible to "skip" the temp array and the swap operation at the expense of adding some dirty looking code.: you add a second loop after the first one with the arrays swapped "by hand" (it requires a rendering in between them).

[dualityy]

1:34 someone who knows what they are talking about! I respect that!

[nietschecrossout]

You need to implement wave physics in this one; cancelation, addition etc.

[d_v_d]

processing 3, so happy seeing them frequent again,