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

This course provides a hands-on introduction to shader programming by using p5.js to interface with the GPU, teaching viewers how to render pixels, create dynamic patterns, and build fractal-like animations from scratch.

• Shader basics — Programs written in GLSL run on the GPU, allowing millions of isolated pixels to be calculated simultaneously in parallel [02:06].

• Pipeline roles — Vertex shaders define geometry placement in space, while fragment shaders handle the color and visual output for each individual pixel [04:21].

• Data flow — JavaScript code manages the WebGL pipeline by loading files asynchronously and sending dynamic variables like time or resolution as "uniforms" to the GPU [03:32].

• Coordinate mapping — Converting screen coordinates into normalized values between 0 and 1 is necessary to maintain accurate proportions regardless of window size [35:40].

• Tiling logic — The fract() function strips away whole numbers, creating a repeating grid pattern that allows for infinite domain repetition [38:51].

• Shape generation — Distance functions calculate how far a pixel is from a point, allowing for the drawing of circles, hearts, or boxes without traditional geometry [28:54].

• Visual blending — The mix() function interpolates between two color values based on an amount, which can be manipulated by shaping functions or time to create animations [59:10].

• Fractal loops — Accumulating color values inside a loop by remapping coordinate space creates complex, nested visual effects [1:11:12].

• How do fragment shaders determine pixel colors without communication between neighbors?

• What is the role of uniform variables in passing data from JavaScript to GLSL?