Music Visualizer

Hello all! Welcome to the Shader Music Visualizer Workshop page!

Taught by: Char Stiles (contact@charstiles.com) @charstiles

Teaching Assistant Sol Sarratea: (https://solquemal.com/) @solquemal

Brought to you by: CODAME (http://codame.com/) @codame

Take the first steps to wielding the power of shader code by creating a simple real-time music visualizer. The shader language we are using is GLSL is the OpenGL Shading Language, a C-like programming language that allows you to to code powerful graphics programs 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 realtime graphics (music visualizers) for audiovisual performances.

No programming experience required, but recommended.
Please bring your own laptop.

 

Schedule

11:00 – 11:15 PDT, 2:00 – 2:15 EDT (15 min) Introduction to livecoding music visualizers.

11:15 – 12:00 PDT, 2:45 – 3:00 EDT (45 min) We will go through the check points together (see below)

12:00 – 12:30 PDT, 3:00 – 3:30 EDT (30 min) break off into groups for workshopping time.

12:30 – 12:45 PDT, 3:30 – 3:45 EDT (15 min) Those who wish can show their music visualizer.

12:45 – 1:00 PDT, 3:45 – 4:00 EDT (15 min)  I will take questions and present my 4 tips and some steps going forward to learn more about shader coding.

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

🌈 CODAME Slides for the exact code we wrote in one nice page that also has link to the form to upload your shader and the feedback form: https://docs.google.com/presentation/d/1BSxE8vugE8V2Y_MPry9Yon12TBawbLFPNxannDPz67s/edit#slide=id.g1fd4179d34_1_114

🖼 UPLOAD your shader for the gallery (it’s also in the CODAME slides up there but I thought I’d link it here again 🙂 https://forms.gle/U4GTxYciMVbvtUaa6

Tools

🧰 Here you can find the glsl sticker sheethttps://gist.github.com/CharStiles/555469d9c1c4e0ca9ffb1a6436af88b5

🧮 Here is an online graphing calculator, very helpful when writing shaders: https://www.desmos.com/calculator

🎨 Here is the bpm function graphed out: https://www.desmos.com/calculator/rx86e6ymw7

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

Next Steps

These are some specific suggestions from me if you want to continue learning but don’t know how to start.

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/features

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 🙂

*** https://easings.net/en