Introduction to shaders: Learn the basics!

0:00 Intro
1:24 What is a shader?
3:37 Setting up shaders in P5js
5:58 GLSL data types
7:00 Vectors
8:58 Attributes, Uniforms and Varying
10:19 Barebones fragment shader
11:00 Vertex shader
14:57 Fragment shader revisited
15:30 Gradients
16:45 FragCoord tangent
18:28 Mix function
21:22 Setting uniforms
22:43 Uniform images (sampler2D)
24:58 p5.filterShader
25:12 Uniform arrays
27:05 Circles and SDFs
31:47 Boolean logic
33:25 Debugging shaders
34:13 Conclusion

Resources:
Inigo Quilez YouTube:    / @inigoquilez  
Inigo Quilez shader: https://www.shadertoy.com/view/ldScDh

Kishimisu YouTube:    / @kishimisu  
Kishimisu shader: https://www.shadertoy.com/view/mtyGWy

Types of shaders: https://www.khronos.org/opengl/wiki/S...
GLSL Data Types: https://www.khronos.org/opengl/wiki/D...)
All available p5js shader attributes and uniforms: https://github.com/processing/p5.js/b...
gl_FragCoord: https://registry.khronos.org/OpenGL-R...
mix function: https://registry.khronos.org/OpenGL-R...
p5.filterShader Library: https://github.com/BarneyWhiteman/p5....
2D SDFs: https://iquilezles.org/articles/distf...

Examples:
All examples: https://editor.p5js.org/BarneyCodes/c...
Vertex shader example: https://editor.p5js.org/BarneyCodes/s...
Fragment shader gradient example: https://editor.p5js.org/BarneyCodes/s...
Fragment shader position example: https://editor.p5js.org/BarneyCodes/s...
Fragment shader image example: https://editor.p5js.org/BarneyCodes/s...
Fragment shader array example: https://editor.p5js.org/BarneyCodes/s...
Fragment shader SDF example: https://editor.p5js.org/BarneyCodes/s...
Fragment shader logic example: https://editor.p5js.org/BarneyCodes/s...

Shaders are an incredibly useful programming tool to have under your belt, especially for creative coding and generative art. They unlock a whole heap of potential, but they're a bit quirky to learn!
This video covers a lot of the fundamentals and will hopefully set you up well for using shaders in the future!
This is a bit of a long/dense video so be sure to take a break if you need, and you can always watch it more than once to help it all sink in!

This video and its examples use P5js in WEBGL mode, however the concepts are transferable to pretty much any environment that you can use shaders in (some syntax may vary, especially in the CPU code).

Follow me:
Support the channel: https://www.youtube.com/@BarneyCodes/...
Twitter:   / barneycodes  
Reddit:   / barneycodes  

#shaders #graphics #creativecoding