Using noise in shaders (texture blending)

0:00 Intro
0:30 What is noise?
1:48 Setup
3:23 Vertex Shader
3:50 Reading textures
4:27 Blending with mix
5:01 Reading noise values
5:39 Controlling the noise
7:07 Scaling the noise
7:58 Conclusion
Code from this video:
editor.p5js.org/BarneyCodes/s...
Introduction to shaders: • Introduction to shader...
Examples used:
“Base warp fBM” by trinketMage: www.shadertoy.com/view/tdG3Rd
“contour noise” by DeltaT: www.shadertoy.com/view/dsGfRz
"Cloud perturbations" by felipetovarhenao: www.shadertoy.com/view/mdcBDl
More resources on noise:
Procedural shader noise: thebookofshaders.com/11/
Some different noise algos: lodev.org/cgtutor/randomnoise...
Perlin noise wiki article: en.wikipedia.org/wiki/Perlin_...
Textures used in this video:
Dirt texture: opengameart.org/content/simpl...
Grass texture: opengameart.org/content/10-se...
Noise textures give programmers a way to introduce random and organic elements into their effects. In this video I'll show you how you can use noise textures in a shader to create a simple texture blending effect.
There are so many ways that you can use noise to create awesome looking visuals, so hopefully you find this video useful and pick up a few tricks!
Follow me:
Twitter: / barneycodes
Reddit: / barneycodes
Support the channel: www.youtube.com/@BarneyCodes/...
#glsl #p5js #shaders

[@BarneyCodes]

If you'd like to see what else I'm working on, it would be great if you could wishlist my game Star Mining Co. on Steam! s.team/a/2584800/ What shader effect would you like to see next?

[@theman7050]

Is there a way to contact you man?

[@BarneyCodes]

My username is barneycodes on discord, feel free to reach out there! Otherwise you can email me at [e-mail]

[@Tritoon710]

Facing Ratio & Dot Product Thanks

[@BarneyCodes]

I'm planning on looking at some basic lighting in an upcoming video so should cover this then! Thanks for the comment!

[@number3boo]

So that's how they do it

[@openlink9958]

0:08 it looks like a shader that replicates how cells look like. Every "cell" (circle) is separated from adjacent circles but all of them are together, on a similar way how skin cells would be (or any kind of large cell structure really)

[@BarneyCodes]

That's voronoi noise! It pops up in nature quite a lot which is really cool! The basic idea behind it is that each pixel is coloured based on the distance to the nearest "seed" point, which is why you get those shaded blob regions!

[@theman7050]

Barney at it again!!! 🎉 Wow I used to think generating noise in code is more efficient. But using a texture for it comes as a surprise man. Thanks :)

[@BarneyCodes]

It's probably slightly more nuanced then "it's always better to use a texture", but things like Perlin and Worley noise can be a bit expensive to calculate every frame. On the other hand, white noise can be really quick because you can just take a hash of the position vector to get a "random" value. Thanks for your comment!

[@DeniseNepraunig]

Really great explanation. I love the way you go through this, showing all the code changes and variants! Top notch editing. Thanks man!

[@BarneyCodes]

Thank you so much! Glad you liked it!

[@literallyaperson7125]

nice

[@BarneyCodes]

Thanks!

[@tepiku]

Thanks for the video. Really well explained. 3:38 The thing with p5.js is that the coordinates 0,0 are located in the top left corner instead of the bottom left.

[@BarneyCodes]

Thanks! I sort of assumed that the underlying image data wouldn't be affected by that but I guess I was wrong!