Livecoding workshop

Hello all! Welcome to the Livecode Shader Workshop page!

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

Teaching Assistant: Olivia McKayla Ross (oliviamckaylaross@gmail.com) @cyber.doula

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

GLSL is the OpenGL Shading Language, a C-like programming language that allows you to 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 realtime graphics (music visualizers) for audiovisual performances.

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

 

Schedule

11:30 – 11:45 PDT, 2:30 – 2:45 EDT (15 min) Introduction to livecoding.

11:45 – 12:30 PDT, 2:45 – 3:30 EDT (45 min) We will write a shader together.

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

1:00 – 1:15 PDT, 4:00 – 4:15 EDT (15 min) Those who wish can show their music visualizer or scene. I will take questions and present steps going forward to learn more about shader coding.

onwards  (??min) Algorave! (& leave if you need/want to go)

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/1qfO0vzABYi3XZIh1V7cerD14xBGORz082wnB5E4y428/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/e6fec016967c6c8fd648aa4b6c0055cc

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

🎨 Here is the cosPalette function graphed out: https://www.desmos.com/calculator/rz7abjujdj

Code

Checkpoint 0

https://gist.github.com/CharStiles/e2c31bf39f441cea7fe277aaa109d2e5

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

Here is some code to use the webcam and backbuffer: https://gist.github.com/CharStiles/c08fec80e5a5c625b20900946d19299d

Next Steps

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

1. 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

2. Get into 3D!

** on May 30th I’m teaching another workshop on 3D shader coding we will go through this code here:https://gist.github.com/CharStiles/e6d15533cfc955fa657cbe556d661c64 you can buy tickets here: http://codame.com/events/workshop-shaders

** If you can’t make that or if this format doesn’t work for you, this tutorial here: https://github.com/ajweeks/RaymarchingWorkshop is super thorough and really useful!

3. Get involved Online

You can see some amazing shaders online at shadertoy.com