Intro to Shaders with p5.js
Bring your virtual objects to life and learn to code graphics and animations in this introductory workshop!
Shaders are small & unusual programs that run on your computer’s graphics processor (GPU). They are commonly used in game engines to add texture to 2D and 3D objects—but can also perform mathematical calculations and do complex data processing. In this intro workshop, participants will learn how to program GLSL shaders from scratch using p5.js. We will start by looking at the different kinds of shaders available and where shaders run within the render pipeline. Taking a generative art approach, we’ll synthesize color gradients using built-in GLSL functions, display textures on 3D models, and create animations to bring your AR filters, gifs, visualizers and virtual objects to life.
Course Logistics
Cost: $80 for Live workshop, $40 for Audit Access.
We also offer Diversity Scholarships. Apply here.
Experience Level:
Some familiarity with programming (javascript, c/c++, c#) is recommended.
Requirements:
• p5.js in a browser on a Mac or PC
Workshop Outline
• What are shaders & how do they work?
• How do digital artists use shaders?
• The structure of a GLSL shader file: inputs, outputs & functions
• Generating color gradients with built-in GLSL functions
• Adding color & texture to a 3D model
• Animating your shaders with time
• Exporting your shaders as stills & animations
Educational / Experiential Goals
* Understand how shaders work in a 3D render pipeline
* Learn about different shaders types (vertex, fragment, geometry, compute) and their respective functionality
* Explore built-in GLSL functions to generate color & create gradients
* Write custom shaders to texture an imported 3D model
* Integrate time into shaders to create simple animations
* Create screen captures and PNG sequences from our shaders to be able to share work online (on social media, as NFTs, etc.)
About Technologies
p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!
