Introduction to Shaders for Programmers – Gray Area Festival Workshop
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.
This workshop is part of the Gray Area Festival 2022: Distant Early Warnings.
Now in its 8th year, this year’s Gray Area Festival partners with the McLuhan Institute to explore artistic practice as an important sensing agent in a world of rapidly evolving media and technology. Building off work by media theorist Marshall McLuhan, who in 1964 compared artists to Cold War–era distant early warning systems which were designed to raise alarms at signs of impending nuclear catastrophe, this festival stakes a role for arts and technology experimentation as a critical research & development department for society.
Course Logistics
Dates
Monday, September 26, 2022
Location
Gray Area
2665 Mission Street
San Francisco
Time
6PM – 9PM
Cost
$80 for a 3hr hands-on workshop (Limited to 16 students)
We also offer Diversity Scholarships, find out more and apply here.
Experience level: Intermediate
Course Requirements:
Programming experience is required. We will not cover topics like variables, if statements, and for loops.
- Bring a PC/Mac Laptop and charger.
- Make sure your browser can run this page, you should see text on a black background: https://shawnlawson.github.io/The_Force/
- 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
Course 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 off your shader creation(s)!
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!
Education 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.
