fbpx

Intro to Shaders with p5.js

Or log in to access your purchased courses

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!

Instructor(s)

Jeremy Rotsztain (b. 1977 in Toronto, Canada) is an artist and software programmer working with computer graphics to explore new modes of abstraction—across video installations, virtual reality worlds, mobile phone applications, and digital prints. Jeremy holds a Master's degree from the Interactive Telecommunications Program at New York University. His work has been exhibited throughout the United States and internationally, including Zentrum für Kunst und Medien (ZKM), Yerba Buena Center for the Arts, San Jose Institute of Contemporary Art, Cooper-Hewitt Smithsonian Design Museum, New York Hall of Science, Boston Cyber Arts Festival, Festival Nouveau Cinéma de Montréal, and New Forms Festival. Jeremy lives and works in Portland, Oregon.