Hello all! Welcome to the Livecode Shaders Workshop page!
Taught by: Char Stiles (contact@charstiles.com) @charstiles
In this workshop, you will learn how to livecode shaders, how to create a visual composition with code, and a little bit of math. 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 (called shaders) directly on your computer’s graphics card. In this workshop, you’ll learn how to livecode GLSL shaders using an online software. 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 real time graphics (music visualizers) for audiovisual performances, or any interactive abstract graphics of the sort. I will go over how to use the shader in Unity, p5 & touch designer. There will be a workshopping time where you are given materials to explore while I am around to answer any questions.
Schedule
4:00 – 4:30 EST, 1:00 – 1:30 PST (30 min) Introduction, short artist talk.
4:30 – 5:15 EST, 1:30 – 2:15 PST (45 min) We will go through the checkpoints for part 1 together (see below).
5:15 – 5:30 EST, 2:15 – 2:30 PST (15 min) Break
5:30 – 5:45 EST, 2:30 – 2:45 PST (15 min) We will go through the checkpoints for part 2 together (see below).
5:45 – 6:00 EST, 2:45 – 3:00 PST (15 min) I will take questions and present my 4 tips and some steps going forward to learn more about shader coding.
6:00 – 7:00 EST, 3:00 – 4:00 PST (60 min) I will go over how to use the project in Unity, p5 and Touch designer.
7:00 – onward EST, 4:00 – onward PST Start homework, or play around in shader.place. I will hang out to answer any questions.
Links
👋 The Force by Shawn Lawson the editor we are using: https://shawnlawson.github.io/The_Force/
🎞 Link to my presentation slides: https://docs.google.com/presentation/d/1M5lDJ0x1iCOLQTn8EGdI8vIGpGSqvAfsxmJ0s7jngVQ/edit?usp=sharing
Tools
🧰 Here you can find the glsl sticker sheet: https://gist.github.com/CharStiles/555469d9c1c4e0ca9ffb1a6436af88b5
👯♂️👯♀️ Shader place is a collaborative shader editing tool, good for sharing creations online. The main difference is that time is passed in as u_time. https://www.shader.place/
🎨here is Inigo Quilez’s page for 2D SDF: https://www.iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm
🧮 Here is an online graphing calculator, very helpful when writing shaders: https://www.desmos.com/calculator
Code
Checkpoint 0: Fundamental
Here we will learn polar coordinate, color channel, scale, sin, cos and time.
https://gist.github.com/CharStiles/c49fd09c26d6c0c22cc79dd440c7df3d
Checkpoint 1: Beat
Here is the first checkpoint, here we learn about making it respond to music (its okay if we just get up to here): https://gist.github.com/CharStiles/dc961bc2af0c0aefa7e1420cff1fca79
Checkpoint 2: Final
This is the last checkpoint. here we learn using palette and combining colors to explore a bit: https://gist.github.com/CharStiles/5a74e98dfb644786e3d0a614f09741f5
Part 2
Here is the first checkpoint (its okay if we just get up to here): https://gist.github.com/CharStiles/c90432f65f56819be25afd7a1d5551aa
Here is the second checkpoint: https://gist.github.com/CharStiles/a80a060136aad4aff27cbed6c472e4c2
Here is the final checkpoint: https://gist.github.com/CharStiles/39ac653485e137a76292e1d14ca2a2ee
Part 3
Touch designer
- Folder with frag file and toe using the frag. Basically all the toe project is, is a GLSL TOP pointed at the frag file here with added time (absTime.seconds) as a value: https://drive.google.com/drive/folders/1u2_IrBhG5SM6gyy4VYdy73VvFQxejT9Y?usp=sharing
Unity
- Create a new material and create a custom shader called swirl for it and copy paste whatever checkpoint you want into it. (Checkpoints are the same up there where the first one is basic and the last one is the final output) This also moves the vertices in the vertex shader.
- Checkpoint 0: https://gist.github.com/CharStiles/2d8e47d3a61c45b0ac785155e438f06e
- Checkpoint 1: https://gist.github.com/CharStiles/f07be896021eb109d1b84c564a9a4261
- Checkpoint 2: https://gist.github.com/CharStiles/5ebc0fddd938e601da7323ea357d0fdc
P5
Homework!
Create an object in Unity or any other environment of your choosing and color it using shaders in a way that “makes sense”
“Makes sense” can be interpreted broadly. Some options:
- Make a lava lamp where the inside blobs are driven by a shader.
- Make some bubbling soup or a cauldron.
- Make washing machine where the window part is a shader.
Think about something that can’t be created easily without a shader. Think about a shader’s strengths and weaknesses.
This homework is most of all meant to be a prompt to encourage exploration, which is why its left to broad interpretation.
Next Steps
These are some specific suggestions from me if you want to continue learning but don’t know how to start.
💜Join a community!
Shader.Zone is a a safe and inclusive discord to talk about shaders, tools, generative art, and more! Started by my friends Conner Bell and Patricio Gonzalez Vivo: https://shader.zone/
💙Watch the Twitch stream Curiously Minded!
It was started by two former students of mine who met at a workshop that was just like this one!: https://www.curiouslyminded.xyz/ This is their stream: https://www.twitch.tv/curiouslyminded/
💚Learn the maths from The Book of Shaders
If you haven’t looked at this already, look through it! Its wonderfully paced and has a lot of versatile useful information: https://thebookofshaders.com/
🔢More online math
http://immersivemath.com/ila/index.html
🌟Learn more about GLSL shader functions:
https://www.shaderific.com/glsl-functions
📽Learn more math that is relevant from an awesome YouTube channel
https://www.youtube.com/channel/UCYO_jab_esuFRV4b17AJtAw
📈Some easing functions if sin & cos get boring 🙂
