Intro to Shaders – JavaScript & p5.js Course for Beginners

This beginner's course is designed to teach you the fundamentals of graphics programming with zero prior experience required. You'll start by understanding how the GPU renders pixels and progressively learn core concepts like vertex and fragment shaders, domain repetition, and shaping functions. By

following along in p5 js, you will apply these techniques to build a stunning animated fractal heart effect entirely from scratch. Developed by Pat Verra, this course is the perfect starting point for creative developers eager to break into WebGL and master the math of motion.

>> Hi everyone. Today is the day. We're going to dive into the world of shaders. So, if you're like me just a few months ago, you'd be like, "What is a shader and why should I care?" Well, let me tell you why. If you have seen these beautiful sketches and wonder, "How are they made?" Or if you have created a

sketch like this and wonder, "How can I make it run a little bit faster?" Shaders might be your answer. This video is the very first part of the shaders minieries where I walk you through the fundamental concepts of shaders. And by the end of the series, you'll be able to create this piece from scratch. So,

let's answer the big question. What is a shader? And why does it make things run so much faster? The speed difference comes down to how the CPU and the GPU handle data. The CPU, or the central processing unit, is the main brain of your computer, built to handle complex logic, one task at a time. Think of a

CPU like a master artisan. incredible at complex work but slow if forced to build thousands basic tables one by one. The GPU on the other hand is a specialized processor built to handle massive grids of data simultaneously by running task in parallel. Think of the GPU as a mass scale factory floor. Thousands of simple

workstations executing identical task at once. A shader is simply the code written to run on the GPU. It is the single blueprint distributed to every workstation on that factory floor at the exact same moment. The trade-off for this speed is total isolation. Pixels on the GPU cannot communicate with each

other. Your code has no idea what the pixel next to it is doing. The only reason these millions of isolated pixels can form a cohesive image is because every single workstation executes the exact same mathematical blueprint across a shared coordinate space. For this series, we'll be setting up our sketches

in JavaScript using p5 js, but the actual shader code will be written in a dedicated language called GLSL or OpenGL shading language. While different frameworks require different boiler plate to get a shader on the screen, the core mathematical logic you write inside GLSL is universally transferable. The

newer version of p5 actually has a library called p5 strands that allows you to write your shader code in JavaScript and it translates it to the GPU behind the scenes. And you can check out this amazing tutorial by Juan Rodrigue Garcia to learn more. But for this minieries, I thought that we would

look at how the logic works fundamentally so that you can pick up your shader code and drop it in any environment that you choose. Okay. So now that we have the split between the setup code and the shader code, how do they actually talk to each other? To make that happen, your setup code or in

my case my p5 js code needs to do exactly three things. First, it tells the browser to use the graphics card 3D pipeline or set it to the WebGL mode.