ShapeMaker Training Series

ShapeMaker 01

Topics covered:
• Introduction
• What is VDMX, Who is VIDVOX, Who is Colin@movecraft, What is ISF, What will be covered in the series
• Creating an ISF with VDMX as the host environment
• ISF/GLSL Topics: the main() function, Comments, gl_FragColor, data types, vec4() color assignment, JSON dict

Notes/Addendums:
at 2:25, I show the names of the components of a vector denoted by a single letter. I misspoke and used the wrong labels with (s,t,u,v) — it’s actually (s,t,p,q) (it’s s,t,u,v in other environments), here’s the correct ones:

(x, y, z, w) Useful when accessing vectors that represent points or normals
(r, g, b, a) Useful when accessing vectors that represent colors
(s, t, p, q) Useful when accessing vectors that represent texture coordinates

Check out the GLSL Spec 5

at 7:10, I equate multi-threading and parallelism as the same thing, although they are related, they aren’t technically the same thing.

“How do cars and driving differ? Threading is the act of using threads, parallelism is when something runs in parallel. The most common way to make things run in parallel is to use threads. – jalf

more information:
threading concurrency vs parallelism 2
Stack Overflow 1

ShapeMaker 02

Topics covered:
• GLSL Topics: Variables, Types, Swizzle,
• Screen Coordinates, gl_FragCoord, RENDERSIZE
• color assignment using coordinates and basic arithmetic operators
• pythagorean theorem to derive length
• conditionals
• aspect ratios

Notes/Addendums:
at 9:15 I say “640/1280 is .5”. of course, I meant it the other way around.
at 17:00 I say “multiply from 1”, I meant to say “subtract from 1”.
at 20:00 I say “square sign”. Sigh. I meant to say “exponent”.
at 24:00 This is common not just for semantics but also for optimization. I won’t worry about optimization at all in this series for sake of clarity and understanding the concepts.

ShapeMaker 03

Topics covered:
• ISF/GLSL Topics: length(), isf_FragNormCoord,
• interactiveshaderformat​.com 12
• JSON Objects syntax
• Top Level Dict Keys
• Building an Input Key
• Using the input value in the main() function
• Changing the circle color and size

Notes/Addendums:
at 1:20 step() isn’t exactly the same as the if…else conditional statement we have here, because it always returns either 1.0 or 0.0.
at 9:39 Vidvox is currently working on ISF version 3, but everything is current as of this video.

ShapeMaker 04

Topics covered:
• The ISF Editor. Features, environment
• Building an ellipse() function.
• GLSL/ISF Topics: Functions, returns, side effects, scope, passing arguments

Notes/Addendums:
at :20 Info about ISF Editor can be found here: https://​www​.interactiveshaderformat​.com/​a​b​out 2
and the latest build can be found here: https://​github​.com/​m​r​R​a​y​/​V​V​I​S​F​-​G​L​/​r​e​l​e​a​s​e​s​?​f​b​c​l​i​d​=​I​w​A​R​3​L​O​l​g​D​P​1​s​s​d​W​X​d​b​F​u​m​c​S​R​l​w​-​G​X​E​S​F​j​9​l​m​J​a​J​r​J​q​_​Z​g​e​w​C​R​K​v​h​h​D​n​A​Z​htk 8
at 9:09 I’m using underscores and camelCase naming conventions to differentiate between user variables and functional variables to keep things simple and easy to see, but ISF does give the option to create names and labels in the JSON.

VidVox is currently beta testing a Windows build of ISF Editor! Contact them for more info.

ShapeMaker 05

Topics covered:
• Building a working prototype
• GLSL/ISF Topics: for() loops
• breaking components into variables
• iterator variables: iterations and index
• GLSL/ISF Topics: fract(), sin(), cos()
• sin and cosine waves, theory and practice
• GLSL/ISF Topics: TIME, defining globals with #define
• creating oscillators with sin(), TIME, and iterator variables
• Playback in VDMX
• driving time_in with an LFO
• controlling the rate with audio amplitude, demo with music

Notes/Addendums:
Much of the structure of this code comes from the “EMIT” Library from Authors/Rybotron
https://​authorsprojects​.com/​o​p​e​n​-​s​o​u​r​ce/ 3
at 6:54 I said “count” and meant “position”
at 15:33 I said “Multiply by a modulus” which is incorrect, you would “test against the results” of a modulus operation. More on Modulus : https://​en​.wikipedia​.org/​w​i​k​i​/​M​o​d​u​l​a​r​_​a​r​i​t​h​m​e​tic
at 18:06 I said relationship between “angles” and should be relationship between “sides”
at 23:00 I say “global” which is correct, GLSL calls these “uniforms”

ShapeMaker 06

Topics covered:
• Building a band() function with abs()
• Building a rect() function with band()
• Reference: www​.bookofshaders​.com 2, www​.thndl​.com 3
• Building a rounded rectangle with shaping functions
• using www​.desmos​.com 4 and graphing calculators
• implementing the thndl​.com 1 algorithm for rounded rectangles

Notes/Addendums:
at 3:19 a more technical explanation of absolute value : https://​en​.wikipedia​.org/​w​i​k​i​/​A​b​s​o​l​u​t​e​_​v​a​lue 1
at 7:20 Here’s all the links I mentioned:
https://​thebookofshaders​.com/​e​x​a​m​p​l​es/ 2
https://​thebookofshaders​.com/​e​d​i​t​.​p​h​p​?​l​o​g​=​1​6​0​4​1​4​0​4​1​142
http://​www​.kynd​.info 1
http://​thndl​.com/​s​q​u​a​r​e​-​s​h​a​p​e​d​-​s​h​a​d​e​r​s​.​h​tml 3
https://​www​.desmos​.com
at 20:26 I say “1.0” and meant to say “0.1”.
at 21:51 The simpler rectangle function will be more performative, because it excises the square root calculation in length() needed for the rounded rectangle. You probably won’t notice with just one shape, but you certainly will with 1000!
at 28:31 I change the value in step(0.0,rect), which is correct.
There are a few small errors I edit out — I try to leave some debugging in the video, which I think is fairly instructional of how things really work…

ShapeMaker 07

Topics covered:
• ISF/GLSL Topics: Version control with ISFVSN
• Integrating the rectangle() function
• ISF/GLSL Topics: Long Input Pop Up button

Notes/Addendums:
At 6:02 I say “VDMX” and meant to say “ISF”

ShapeMaker 08

Topics covered:
• Refactoring the code: standardizing variable names and conventions
• Building a stroke on circles, theory and implementation
• Adding controls for stroke size and color

Notes/Addendums:
at :24 Stroking shapes is actually kind of a tough problem. Check out https://​www​.slideshare​.net/​M​a​r​k​_​K​i​l​g​a​r​d​/​2​2​p​a​t​h​r​e​n​der 2 for more info. Our stroke implementation will be a very simple one, but the stroking you get for “free” in most 2D rendering environments (like Processing, Canvas, or Illustrator) have a lot of algorithms and conditionals underneath the surface.
at 4:00 I’m flipping these arguments to step from “out to in” instead of “in to out”
at 6:39 This is the dog-sunglasses “I have no idea what I’m doing” gif part of the tutorial
At 14:54 This might be a bug with this particular build of the ISF Editor I’m using.
At 15:27 Important point I don’t mention here: I’ve been using the Label names and property names as the same thing up to this point, but the label name that gets displayed in the UI and the variable name that you use in the code can be different!

ShapeMaker 09

Topics covered:
• Building a stroke for rectangles
• Debugging and Error Correction
• Refactoring the shape functions to vec4()
• Returning an alpha channel: theory and implementation

Notes/Addendums:
At 2:00 I make a couple of errors here. I’m leaving them in the video as I go through and squash the bugs and challenge my bad assumptions. I left one in that I’ll fix in the next video: The rect stroke is multiplying against the fill color instead of the stroke color.