Workshop: Shaders

 Code Art Together

with Char Stiles



In these online workshops you’ll learn how to code graphics and animations using shaders. This class is interactive, in that you can ask questions real-time;  you will be talking to your classmates and you will be encouraged to show your work.

The environment you'll code in is free and browser based, no time wasted in setup/installation. Quickly iterate on creations by talking directly to your graphics card with GLSL (a C-like programming language). 

Once you’ve got the basics of shaders down, real-time rendering skills translate to many projects: livecoding performances, music visualizers, spicing up your unity/three.js/openframeworks projects, snap filters, and animated gifs (as just a few examples).


Time Schedule

Saturdays at 11:30 (PT) (14:30 EDT, 18:30 UTC, 20:30 CEST) Time.Is

2 hour duration


  • May 30: ⓑ Raymarching for 3d Shaders
  • June 06: ⓒ Lighting & Cameras for 3d Shaders 


  • Apr. 18: ⓐ Fundamentals of 2d Shaders
  • Apr. 25: ⓐ Fundamentals of 2d Shaders
  • May 02: ⓑ Raymarching for 3d Shaders
  • May 16: ⓒ Lighting & Cameras for 3d Shaders 
  • May 23: ⓐ Fundamentals of 2d Shaders 



$20 suggested donation with a sliding scale. Get your ticket now.

We offer special deals for educators and team building. Introduce yourself so we can partner! 




Raymarching (May 2nd & May 16):

In this class we will learn about ray marching! Ray marching uses a very contained and mathematical way to describe a 3D scene in one fragment shader. This class is recommended for anyone who's comfortable with 2D shader writing, (including using and casting the datatypes: float, vec2, vec3, and vec4) or has taken the CODAME beginner livecode shader class by Char.

You will create your own 3D scene or music visualizer with ray marching. We will go over some examples of raymarching, how to set up the scene, and provide more material/functions/techniques so you can customize your scene or visualizer to fit your style.

Ray marching is physically based, i.e. you follow a ray the same way photons bounce around in the real world, which makes it really fun and eye-catching. It has a lot of use in the future with all this drive towards physically based real-time rendering techniques.



This 2-hour session will include the following exercises:

  • 15min - Introduction, concepts, and context.
  • 60min - Guided hands on creation, application of concepts.
  • 30min - Self directed hands on in smaller groups.
  • 15min - Show and tell your shader creation(s)! Q+A. Exploring next steps.
  • ??min - Round Table, Algorave & hang! 



ⓐ  No programming experience required, but some scripting recommended. If you're starting from scratch or need a brush up on syntax, follow the first 15 minutes of

ⓑ These build on topics from the fundamentals workshops, so it's best to have taken one of those (or done some of your own work with shaders ahead of time).

ⓒ Building on ⓐ and ⓑ. If you have not taken those, you should be familiar with the fundamentals of shaders and played with ray marching.


What to bring

Computer and internet connection.

For best experience, it's recommend to have a second screen (or tablet) for the video streaming and keep your main for computer display for live coding and test your shader creations.


Software to be installed


We will provide

We will send you links to tutorial and video meeting the day before the workshop.


Workshop creations

Some examples of work generated in previous workshops: 



Join us

In these challenging times this is a an opportunity to be more connected beyond our usual San Francisco boundaries.

This is just the start of a CODAME workshop series to continue to connect, inspire and shape the future by building beautiful and playful ART+TECH experiences all together.

Join us. Sponsor, Volunteer or lead a workshop. What topics grab your curiosity to learn or teach? Let us know through our call for workshops.

All proceeds will be split with the participating artists. Donations are always welcome.

💟 👾 💜 👾 💟
Thank you for your support for ART ♥️ TECH

CODAME is a member of Intersection for the Arts a non profit 501(c)(3) organization.


Code of Conduct for all attendees.