GeneratingImagesWithShaders

A GLSL Shader Programming Workshop at InterAccess
November 17 & 19, 2020

Outline

• Shader components: inputs, outputs, main() function
• RGB color & HSB color
• Common functions, custom functions
• 2D shapes
• Animation
• Randomness & Noise
• Grids & Patterns

Shaders

• Shaders are tiny programs that run on your computer’s GPU
• Used extensively in gaming to create color, lighting, materials, special effects.
• Some shaders can also create geometry and compute massive amounts of information
• Shaders commonly read/write pixels (rgb values) but can process different data types.
• Shaders are notoriously hard to learn and difficult to debug.
• Writing shaders in the Book of Shaders Editor
• Writing shaders in c-like language called GLSL (OpenGL Shading Language)

Artists Working with Shaders

• Natalia Stuyk https://www.instagram.com/nataliastuyk/
• Kynd https://www.instagram.com/kyndinfo/
• Andrew Benson https://pixlpa.com/
• Char Stiles https://www.instagram.com/charstiles/
• Sean Zellmer https://www.instagram.com/lejeunerenard/
• IQ https://www.shadertoy.com/view/wlsfRn

Pipeline

Platform

All of these shaders will run in the Book of Shaders Editor. Just copy & paste!

Day I: Tuesday

• Hello World
• Mouse Interaction
• Mixing Colors: RGB Gradients I
• HSB Color Space
• Functions & Curves I
• Functions & Curves II
• Exercise I: Create a gradient using 3 different functions/curves. Play with frequency, amplitude & phase. If you're done, switch to a HSV gradient. Then, try additing time (u_time) into the mix.
• Writing Custom Functions
• Gradients II (Multi-Color)
• Synthesis I: Additive Synth
• Synthesis II: FM Synthesis
• Shaping: Square & Circle
• Exercise II: experiment with creating different foreground & background colors for your shapes. Hint: use mix().

Day II: Thursday

• Review and/or questions
• Exercise III: use shaping functions to modulate the canvas (st) and manipulate your circle or square.
• Animation
• Exercise IV: Try animating the color of the shapes (i.e. lerp between or mix 2 colors)
• Random Square I (RGB)
• Random Square II (Animated)
• Random Colors
• Noise I (RGB)
• Noise II (Modulated Circle)
• Grids I & Grids II (HSB)

Advanced Examples

• Noise I
• Shaded Blobs
• Layering Shapes
• Polygon Grid

Helpers

• Helpers

Resources

• Book of Shaders by Patricio Gonzales Vivo & Jen Lowe
• IQ's 2D distance functions
• Shadershop by Toby Schachman
• GLSL Easing Functions (tweens)
• Shaders in Processing, Three.js, openFrameworks

Some Other Programming Tools/Environments

• The Force
• GlslViewer
• kodelife ($)
• GLSL Sandbox
• ShaderToy