Advanced C# Programming Course @freecodecamp

Updated September 2026, 5 days ago

$Intro to Shaders – JavaScript & p5.js Course for Beginners Learn the fundamentals of shaders, with zero prior experience required. Starting from the basics of how the GPU renders pixels, youll 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: https://pattvira.com 🔗 Twitter: https://twitter.com/pattvira 🔗 Instagram: https://www.instagram.com/pattvira ⭐️ Code ⭐️ Part 1: https://editor.p5js.org/pattvira/sketches/LV4ZSuHXD Part 2: https://editor.p5js.org/pattvira/sketches/fdykpy1OD Part 3: https://editor.p5js.org/pattvira/sketches/I0HtC1ISj Part 4: https://editor.p5js.org/pattvira/sketches/WQXm21NW2 ❤️ Support for this channel comes from our friends at Scrimba – the coding platform thats reinvented interactive learning: https://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: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news$

Guide to Agentic AI – Build a Python Coding Agent with Gemini

Learn the basics of Git in 60 seconds with Beau Carnes

Whats CS50s 72-hour Regret Clause? Dr. David J. Malan explains here.

CTO Andrew Brown on DevOps + Cloud Certification Exams [freeCodeCamp Podcast #120]

Agentic AI – Complete Course for Beginners

Learn Kubernetes in 6 Hours – Full Course with Real-World Project

How to use Pythons .isprintable() method

Did you know that Dijkstra came up with his famous algorithm in about 20 minutes?