GeneratingImagesWithShaders
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
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