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 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: Kishimisu YouTube: @Kishimisu Kishimisu shader: Types of shaders: GLSL Data Types: (GLSL) All available p5js shader attributes and uniforms: gl_FragCoord: mix function: Library: 2D SDFs: Examples: All examples: Vertex shader example: Fragment shader gradient example: Fragment shader position example: Fragment shader image example: Fragment shader array example: Fragment shader SDF example: Fragment shader logic example: 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: @BarneyCodes/join Twitter: Reddit: #shaders #graphics #creativecoding