Coding Challenge #102: 2D Water Ripple

Subscribers:
1,750,000
Published on ● Video Link: https://www.youtube.com/watch?v=BZUdGqeOD0w



Duration: 17:17
120,483 views
3,223


In this coding challenge, I attempt to simulate 2D water ripples using Processing (Java). Code: https://thecodingtrain.com/challenges/102-2d-water-ripple

๐Ÿ•น๏ธ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/tYXtzNSl

๐ŸŽฅ Previous video: https://youtu.be/fUkF-YLLXeg?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
๐ŸŽฅ Next video: https://youtu.be/X0kjv0MozuY?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
๐ŸŽฅ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
๐Ÿ““ 2D Water: https://web.archive.org/web/20160418004149/http://freespace.virgin.net/hugo.elias/graphics/x_water.htm
๐Ÿ’พ Processing: http://processing.org

Videos:
๐ŸŽฅ Cellular Automata: https://www.youtube.com/watch?v=DKGodqDs9sA
๐Ÿ”ด Livestream Archive: https://youtu.be/ORwIZCKJA-Q?t=7570s

Related Coding Challenges:
๐Ÿš‚ #24 Perlin Noise Flow Field: https://youtu.be/BjoM9oKOAKY
๐Ÿš‚ #85 The Game of Life: https://youtu.be/FWSR_7kZuYg
๐Ÿš‚ #103 Fire Effect: https://youtu.be/X0kjv0MozuY

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

๐Ÿš‚ Website: http://thecodingtrain.com/
๐Ÿ‘พ Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
๐Ÿšฉ Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
๐Ÿ’ก GitHub: https://github.com/CodingTrain
๐Ÿ’ฌ Discord: https://thecodingtrain.com/discord
๐Ÿ’– Membership: http://youtube.com/thecodingtrain/join
๐Ÿ›’ Store: https://standard.tv/codingtrain
๐Ÿ–‹๏ธ Twitter: https://twitter.com/thecodingtrain
๐Ÿ“ธ Instagram: https://www.instagram.com/the.coding.train/

๐ŸŽฅ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
๐ŸŽฅ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

๐Ÿ”— p5.js: https://p5js.org
๐Ÿ”— p5.js Web Editor: https://editor.p5js.org/
๐Ÿ”— Processing: https://processing.org

๐Ÿ“„ Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#2dwaterripple #cellularautomata #processing







Tags:
programming
daniel shiffman
creative coding
coding challenge
tutorial
coding
challenges
coding train
the coding train
live stream
class
challenge
codingtrain
code challenge
2d water
2d water ripple
2d water simulation
2d water effect
2d water processing
2d water algorithm