Intro to Matchbox Shaders

Also for anyone interested these videos break down the process of scripting GLSL for matchbox shaders wonderfully

And this website is really fun! It has a gallery of prebuilt GLSL shaders that run in real time. If you click on any and hit ‘show code’ on the top left corner you can adjust some variables and immediately see how that math translate in the picture while it runs and adjust in the background.

https://glslsandbox.com/

23 Likes

Whoa! I had totally missed these videos. There’s a 7 part series from @joelosis and @julik… thank you so much for sharing!

6 Likes

I’d like to add Shader Toy to this thread:

This is where Ivar got several of his shaders!

Same idea as GLSL Sandbox - people upload shaders they’ve created, and you can tinker with the code as it runs live in your browser.

-Ted

4 Likes

@daniel_morris

If you’d rather read than watch videos:

This site has basic code examples that are interactive.

8 Likes

Nice one, thanks @KuleshovEffect!

Found another old tutorial that goes over the concept of creating matchboxes using code found online!

11 Likes

Just found this old video of legendary @ivar who I wish I had the honor of meeting
He mentioned how he got started with Flame’s matchbox creation. And he actually references the Fishbowl videos that we are sharing here!
“The easiest way to make a matchbox is to go to the Shadertoy website and look for a simple blur shader (gaussian blur, box blur). Most of the shaders you can download. And you only have to do an “A” “B” difference and see what you have to change to get what you want inside of Flame. That is what I did to get started” - Ivar Beer

17 Likes

Years ago I played a bit with this stuff, super fun way to learn more about functions in a visual way:

Shadershop is an interface for programming GPU shaders in the mode of a direct manipulation image editor like Photoshop. It is an experiment in leveraging the programmer’s spatial reasoning the way that coding today leverages the programmer’s symbolic reasoning.

http://tobyschachman.com/Shadershop/

4 Likes