Uploaded July 2026 | Updated September 2026, 2 weeks ago
Learn the fundamentals of shaders, with zero prior experience required. Starting from the basics of how the GPU renders pixels, you'll progress to building an animated, fractal heart effect written entirely from scratch. Designed specifically for creative developers who want to break into WebGL and master the math of motion.
Course developed by @pattvira
⭐️ Connect with Patt Vira ⭐️
🔗 Website: pattvira.com
🔗 Twitter: twitter.com/pattvira
🔗 Instagram: instagram.com/pattvira
⭐️ Code ⭐️
Part 1: editor.p5js.org/pattvira/sketches/LV4ZSuHXD
Part 2: editor.p5js.org/pattvira/sketches/fdykpy1OD
Part 3: editor.p5js.org/pattvira/sketches/I0HtC1ISj
Part 4: editor.p5js.org/pattvira/sketches/WQXm21NW2
❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: scrimba.com/freecodecamp
⭐️ Chapters ⭐️
- 0:00:00 Intro
- 0:00:51 Part 1 - Basic Introduction to Shaders
- 0:01:17 What is a shader?
- 0:03:24 Bridge between CPU and GPU
- 0:04:20 Vertex and fragment shaders
- 0:06:09 Start coding in p5.js
- 0:09:44 GLSL Rulebook
- 0:12:50 Set up canvas space in a vertex shader
- 0:16:16 Color pixels in a fragment shader
- 0:17:44 Map clip space to screen coordinates
- 0:20:03 Create a static gradient
- 0:22:04 Create a dynamic gradient
- 0:27:03 Part 2 - Domain Repetition
- 0:28:33 Draw a circle
- 0:32:05 Use gl_FragCoord to get pixel coordinates
- 0:38:45 Create tiling with fract()
- 0:42:00 Fix aspect ratio
- 0:43:56 Introduce the standard resolution fix
- 0:45:01 Part 3 - Shaping Functions
- 0:45:38 What is a shaping function?
- 0:46:20 Explore sin() function
- 0:47:41 Explore step() function
- 0:48:25 Explore smoothstep() function
- 0:49:40 Explore abs() function
- 0:51:33 Create a glowing effect with inverse distance equation
- 0:55:02 Animate glowing rings
- 0:54:21 Experiment with other shapes
- 0:57:43 Part 4: Colors
- 0:57:43 Introduce mix() function
- 1:01:01 Change the blend ratio using uTime
- 1:02:12 Change the blend ratio using position
- 1:04:18 Change the blend ratio using shaping functions (step & smoothstep)
- 1:05:22 Change the blend ratio using shaping functions (distance functions)
- 1:08:22 Introduce cosine-based color palette
- 1:10:54 Bonus! Fractals!
🎉 Thanks to our Champion and Sponsor supporters:
👾 @omerhattapoglu1158
👾 @goddardtan
👾 @akihayashi6629
👾 @kikilogsin
👾 @anthonycampbell2148
👾 @tobymiller7790
👾 @rajibdassharma497
👾 @CloudVirtualizationEnthusiast
👾 @adilsoncarlosvianacarlos
👾 @martinmacchia1564
👾 @ulisesmoralez4160
👾 @_Oscar_
👾 @jedi-or-sith2728
👾 @justinhual1290
--
Learn to code for free and get a developer job: freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
Learn the fundamentals of shaders, with zero prior experience required. Starting from the basics of how the GPU renders pixels, you'll progress to building an animated, fractal heart effect written entirely from scratch. Designed specifically for creative developers who want to break into WebGL and master the math of motion.
Course developed by @pattvira
⭐️ Connect with Patt Vira ⭐️
🔗 Website: pattvira.com
🔗 Twitter: twitter.com/pattvira
🔗 Instagram: instagram.com/pattvira
⭐️ Code ⭐️
Part 1: editor.p5js.org/pattvira/sketches/LV4ZSuHXD
Part 2: editor.p5js.org/pattvira/sketches/fdykpy1OD
Part 3: editor.p5js.org/pattvira/sketches/I0HtC1ISj
Part 4: editor.p5js.org/pattvira/sketches/WQXm21NW2
❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: scrimba.com/freecodecamp
⭐️ Chapters ⭐️
- 0:00:00 Intro
- 0:00:51 Part 1 - Basic Introduction to Shaders
- 0:01:17 What is a shader?
- 0:03:24 Bridge between CPU and GPU
- 0:04:20 Vertex and fragment shaders
- 0:06:09 Start coding in p5.js
- 0:09:44 GLSL Rulebook
- 0:12:50 Set up canvas space in a vertex shader
- 0:16:16 Color pixels in a fragment shader
- 0:17:44 Map clip space to screen coordinates
- 0:20:03 Create a static gradient
- 0:22:04 Create a dynamic gradient
- 0:27:03 Part 2 - Domain Repetition
- 0:28:33 Draw a circle
- 0:32:05 Use gl_FragCoord to get pixel coordinates
- 0:38:45 Create tiling with fract()
- 0:42:00 Fix aspect ratio
- 0:43:56 Introduce the standard resolution fix
- 0:45:01 Part 3 - Shaping Functions
- 0:45:38 What is a shaping function?
- 0:46:20 Explore sin() function
- 0:47:41 Explore step() function
- 0:48:25 Explore smoothstep() function
- 0:49:40 Explore abs() function
- 0:51:33 Create a glowing effect with inverse distance equation
- 0:55:02 Animate glowing rings
- 0:54:21 Experiment with other shapes
- 0:57:43 Part 4: Colors
- 0:57:43 Introduce mix() function
- 1:01:01 Change the blend ratio using uTime
- 1:02:12 Change the blend ratio using position
- 1:04:18 Change the blend ratio using shaping functions (step & smoothstep)
- 1:05:22 Change the blend ratio using shaping functions (distance functions)
- 1:08:22 Introduce cosine-based color palette
- 1:10:54 Bonus! Fractals!
🎉 Thanks to our Champion and Sponsor supporters:
👾 @omerhattapoglu1158
👾 @goddardtan
👾 @akihayashi6629
👾 @kikilogsin
👾 @anthonycampbell2148
👾 @tobymiller7790
👾 @rajibdassharma497
👾 @CloudVirtualizationEnthusiast
👾 @adilsoncarlosvianacarlos
👾 @martinmacchia1564
👾 @ulisesmoralez4160
👾 @_Oscar_
👾 @jedi-or-sith2728
👾 @justinhual1290
--
Learn to code for free and get a developer job: freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
