Fixing The Coding Train’s Code (Water Ripple Shader)
Vložit
- čas přidán 5. 07. 2024
- Code from video: editor.p5js.org/BarneyCodes/s...
Coding Train Livestream: • Coding Water Ripples w...
Coding Train Water Ripples: • Coding Challenge 102: ...
Hugo Elias Article: web.archive.org/web/201604180...
About a year ago Daniel Shiffman from The Coding Train attempted to make a water ripple shader using P5js. He had done it before in Processing, using a technique described in an article by Hugo Elias, but unfortunately could not get the JavaScript/Shader version working.
I decided to give it a shot to try and help Dan out!
The effect works similar to a cellular automata, where we check the neighbouring pixels to figure out how the ripple should move.
Follow me:
Support the channel: www.youtube.com/@BarneyCodes/...
Twitter: / barneycodes
Reddit: / barneycodes
Chapters:
0:00 Failed Attempt
0:37 How it works
1:10 Fragment Shader
2:28 Vertex Shader
3:04 The Buffers
3:20 P5 setup
3:54 Adding ripples
4:18 Updating the buffers
#creativecoding #shader #p5js #javascript - Jak na to + styl
Incredible! I may actually have the strength now to go back and revisit this! When I get back to streaming I would love to feature this. I'm also planning some shorts now with quick answers to questions so maybe I reference this is one too!
I would absolutely love to see you revisit this, your videos are such an inspiration to me (and to so many others)!
Looking forward to the streams and the shorts when you get around to them!
Thanks so much for the comment :)
Show your love for The Coding Train here! 🚂🚂
He's the best!
This is unbelievable. Someone else is also aware of Hugo Elias' articles.
Well done! just like Dan, I tried this myself and got into a deep rabbit hole of shaders.
Thank you! It's such a broad topic, so much to explore!
I'd love to have more shader + p5.js tutorials. Specially a starter tutorial about it will be really cool.
I'll definitely be doing more shader videos in the future! I think a proper intro to shaders in P5 video is a great idea. Thanks for your comment!
Coding Train has been real quiet since this dropped
Looks like he just posted 😂
@@BarneyCodes yeah jk, good video dude. I've been putting off really learning shaders. I'll definitely revisit this video when I finally stop dragging my feet
@@morejpeg Thanks! Shaders definitely open up a lot of cool techniques. I highly recommend checking out the book of shaders and shader toy if you haven't already!
@@BarneyCodes Yeah I've dabbled in both before
Ah good stuff, it definitely took me a few goes to get into shaders!
Thank you so much ! Please do more shader stuff with p5 and glsl ! Shaders are amazing.
Will do! I've got a few more ideas for shaders planned. If there's anything in particular you'd like to see then let me know!
I appreciate the content. Really nice and not overcomplicated. If I can make a small suggestion, please leave the code on the screen for 1s
It makes a bit easier to pause to read it
And thanks again
That's a great suggestion and honestly I can't believe I didn't think of it hahaha! Thanks so much for the comment!
No worries. Maybe I'm just too slow :)
No not at all, they are definitely a bit too quick sometimes! I'll be more mindful of it in the future!
Another great video! I'm inspired to actually dig into this now.
Thanks Steve! They're a bit daunting at first but it really opens up a lot of possibilities!
You don't need to make the rectangle the width and height of the canvas, you can actually just call rect(0, 0, 0, 0), or with whatever parameters you want, at line 61 and it will work.
Oh that's good to know, thanks!
what is this a crossover episode ?!
Hahaha, it is indeed ;)
I'm not able to get the ripple to work when I created a point in mouseDragged method as compared to creating it in the draw method under mouseIsPressed. I'm not sure why it did not work, I thought that it would be the same. Any Idea why its not working?
Hmm that's a great find, I'm not sure why that wouldn't work either! My only thought is that the mouseDragged method is triggered by an event, outside the render loop so I wonder if it is interacting strangely with the shader code? I'll have a play with it when I get some time and let you know if I come up with anything. Let me know if you find something too!
@@BarneyCodes Yeah, I'll keep having at it in the meantime.
didnt dan schiffman create p5js
I'm not sure that he created it, but he's definitely involved with the Processing Foundation which P5js is a part of, and of course heavily involved with promoting its use in his videos!
@@BarneyCodes Correct, Lauren McCarthy is the creator of p5.js! I am a director of The Processing Foundation which organizes community initiatives and software development related to p5 and Processing. For more: processingfoundation.org/
@@TheCodingTrain Thanks for clarifying!
it's insane !
I try a lot of things with it 😁😁but I have a really hard time with the colors.
For example I can't get the background to be white and the circles to be black. If you have any clues...
Anyway, thanks a lot for this video !!!
Glad you're trying stuff out!
I think the problem you're running into is that we use the output of the previous frame as the input of the next, meaning anything we do to manipulate the colour will affect the values we're reading in next time.
This wasn't an issue for the case of my blue ripples, since the red channel held the raw simulation value, so I could just read that.
Say we were reading the green channel instead, where the output was "next/2.0 + 0.5" (putting the value in the range of 0.5-1).
To use this as the input we need it back in the original range of 0-1, so once we've read the green value, we would have to go "(g - 0.5) * 2.0".
Note: if you're reducing the size of the range, you're going to reduce the accuracy, but for something like this it probably won't be too noticeable. To minimise the effects, you should read in the colour channel with the biggest range.
Essentially, changing the values for display puts them into new ranges, but we need to "undo" those changes to get the raw simulation value back, before we can calculate the next frame.
So if you want black circles and white background, you are using a range of 1-0 for display, but we need it as 0-1 for simulation. Outputting the value as a colour would be "1.0 - next", and converting the colour back into the simulation value would be "1.0 - val", where val is the colour value of whichever colour channel you read in.
Example:
editor.p5js.org/BarneyCodes/sketches/ezHuZKOV9
I hope that helps! Let me know if you have any questions!
@@BarneyCodes thank you so much your answer that's awesome ! let's have fun with it 😀😀👍👍
No problem at all, keen to see what you come up with!
FANTASTIC work, but one gentle, constructive remark-- please, please s-l-o-w down. It was very hard to follow your explanation d/t the tight editing and rapid talking. Would be much more helpful if it were a slower-paced ten minute vid instead of the super fast five minute one. Again, excellent work!!
Thank you so much for the feedback, really appreciate it! I'll certainly keep that in mind for future videos 😊