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

The video is an excellent introductory resource for shader programming, particularly for creative coders familiar with p5.js. The instructor, Patt Vira, demonstrates a clear pedagogical approach, breaking down complex concepts into digestible segments. The explanation of CPU vs. GPU architecture is accessible and sets a solid foundation for understanding why shaders are used. The GLSL syntax overview is concise but sufficient for beginners, and the emphasis on vectors and swizzling is crucial for shader development. The practical coding sessions are well-paced, with the instructor explaining each step and troubleshooting common errors, such as precision issues in fragment shaders. The progression from basic color output to domain repetition and shaping functions is logical, and the final fractal heart project ties together the learned concepts effectively. However, the video lacks explicit citations to external sources, which may limit its utility for those seeking deeper theoretical understanding. The reliance on p5.js’s WebGL mode means some boilerplate is abstracted, but the instructor acknowledges this and focuses on transferable GLSL logic. The adéquation between title and content is strong, as the video delivers exactly what it promises: an introduction to shaders for beginners. Overall, the course is a valuable resource, though it could benefit from references to official documentation or further reading. The public comments (not provided) would likely reflect appreciation for the clear explanations and practical approach.

The title accurately reflects the content: a beginner-friendly introduction to shaders using JavaScript and p5.js.

8/10

The course is well-structured, with clear explanations of shader concepts and practical coding examples. The instructor demonstrates expertise in the subject, and the content aligns with standard WebGL/GLSL practices. However, the video is a tutorial and does not provide citations to external sources, limiting its scholarly depth.

Markers derived by PSI from the transcript: the creator did not define chapters.

• 00:00Introduction to the course and what will be covered.
• 00:51Part 1: Basic Introduction to Shaders - what is a shader?
• 01:17Explanation of CPU vs GPU and why shaders are fast.
• 03:24Bridge between CPU and GPU - how they communicate.
• 04:20Vertex and fragment shaders explained.
• 06:09Start coding in p5.js - setting up WebGL mode.
• 09:44GLSL Rulebook - syntax and data types.
• 12:50Set up canvas space in a vertex shader.
• 16:16Color pixels in a fragment shader.
• 17:44Map clip space to screen coordinates.
• 20:03Create a static gradient.
• 22:04Create a dynamic gradient.
• 27:03Part 2: Domain Repetition - draw a circle.
• 32:05Use gl_FragCoord to get pixel coordinates.
• 38:45Create tiling with fract().
• 42:00Fix aspect ratio.
• 43:56Introduce the standard resolution fix.
• 45:01Part 3: Shaping Functions - what is a shaping function?
• 45:38Explore sin() function.
• 46:41Explore step() function.

• p5.js Editor Sketch - Part 1 — Code for Part 1 of the tutorial.
• p5.js Editor Sketch - Part 2 — Code for Part 2 of the tutorial.
• p5.js Editor Sketch - Part 3 — Code for Part 3 of the tutorial.
• p5.js Editor Sketch - Part 4 — Code for Part 4 of the tutorial.
• Patt Vira's Website — Instructor's website with additional resources.
• freeCodeCamp News — Platform hosting the course.

• The Book of Shaders — A well-known online resource that covers shader fundamentals in a similar interactive manner.
• WebGL Fundamentals — A comprehensive tutorial site that explains WebGL and shaders in depth.

• www.freecodecamp.org
• scrimba.com