Learn Shaders Through Livecoding

Learn Shaders Through Livecoding

In this workshop, you will learn how to livecode shaders by creating a visual composition with GPU code and a little bit of math. Livecoding is a method of programming in which one’s changes to the code are realized immediately and in real-time. This is an ideal way to create music visualizers, or any interactive abstract graphics of the sort. We will briefly go over how to use the shaders we create in a variety of other real-time engines like Unity, p5.js & touch designer.

You will learn about where the shader exists in the graphics pipeline, the basics of how the language works, and how to quickly iterate on writing your shader using livecoding tools. You will also be given a plethora of tools to build upon what you learn, so you can keep learning and practicing beyond this workshop.

Course Logistics

Dates:
Thursday, March 10, 2022

Times:
11:00AM-2:00pm PST

Cost:
$80 for a 3h workshop
We also offer Diversity Scholarships. Apply here.

Experience Level:
Intermediate

Requirements:
Bring a PC/Mac Laptop and charger.
Make sure your browser can run this page, you should see text on a colorful background: https://www.shader.place/present.html?room=
If not, first switch to a browser that can support webGL: https://caniuse.com/#feat=webgl
Then, follow instructions here to enable webGL for your browser:
https://superuser.com/questions/836832/how-can-i-enable-webgl-in-my-browser

Workshop Outline

  • Introduction to the graphics pipeline, concepts, and context.
  • Guided hands on creation in GLSL, application of concepts. This includes converting coordinate system to transform space, using basic trig functions to create shapes, and color palette functions to have more control over the look of your shader.
  • We break off into smaller groups and explore the code.
  • Show and tell your shader creation(s)!
  • Q+A.
  • Go over templates provided for Unity, Touch Designer and p5.
  • Exploring next steps, including introduction to online shader communities and tips for exporting and sharing your creation online!

Educational & Experiential Goals

You will learn about where the shader exists in the graphics pipeline, the basics of how the language works, and how to quickly iterate on writing your shader using livecoding tools. You will also be given a plethora of tools to build upon what you learn, so you can keep learning and practicing beyond this workshop.

About Technologies

In this workshop you will be introduced to GLSL, GLSL is the OpenGL Shading Language, a C-like programming language that allows you to code powerful graphics programs directly on your computer’s graphics card.

Instructor(s)

Char Stiles is an artist, educator and programmer based in Brooklyn, NY. She works creatively in the lower levels of computational systems to bring to light how computers work. Char works and collaborates across mediums such as interactive installation, video, performance and web. She is a part of the Livecode.nyc collective, where she organizes shows, and livecodes music and visuals. She has given talks and led workshops at Carnegie Mellon University, Duke University, University of Limerick, MIT and NYU. She is currently at an NEA-funded artist residency at the Frank-Ratchye STUDIO for Creative Inquiry at Carnegie Mellon University to develop an open-source GLSL editor tool for artists.