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: https://www.youtube.com/@InigoQuilez Inigo Quilez shader: https://www.shadertoy.com/view/ldScDh Kishimisu YouTube: https://www.youtube.com/@kishimisu Kishimisu shader: https://www.shadertoy.com/view/mtyGWy Types of shaders: https://www.khronos.org/opengl/wiki/Shader GLSL Data Types: https://www.khronos.org/opengl/wiki/Data_Type_%28GLSL%29 All available p5js shader attributes and uniforms: https://github.com/processing/p5.js/blob/main/contributor_docs/webgl_mode_architecture.md gl_FragCoord: https://registry.khronos.org/OpenGL-Refpages/gl4/html/gl_FragCoord.xhtml mix function: https://registry.khronos.org/OpenGL-Refpages/gl4/html/mix.xhtml p5.filterShader Library: https://github.com/BarneyWhiteman/p5.filterShader 2D SDFs: https://iquilezles.org/articles/distfunctions2d/ Examples: All examples: https://editor.p5js.org/BarneyCodes/collections/g_0h6nsR- Vertex shader example: https://editor.p5js.org/BarneyCodes/sketches/ZPnUfPUaE Fragment shader gradient example: https://editor.p5js.org/BarneyCodes/sketches/2Sa9hgvNn Fragment shader position example: https://editor.p5js.org/BarneyCodes/sketches/NJYQgvpU6 Fragment shader image example: https://editor.p5js.org/BarneyCodes/sketches/Ema18Yjqj Fragment shader array example: https://editor.p5js.org/BarneyCodes/sketches/QxtF99hH9 Fragment shader SDF example: https://editor.p5js.org/BarneyCodes/sketches/AQHT3p4Pz Fragment shader logic example: https://editor.p5js.org/BarneyCodes/sketches/z114LFTfL 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/join Twitter: https://twitter.com/BarneyCodes Reddit: https://www.reddit.com/user/BarneyCodes/ #shaders #graphics #creativecoding