Introduction:
Hello!
My name is Colin Sebestyen, and I’ve worked with Vidvox to author a beginner friendly, human understandable introduction to the powerful ISF format. Every Wednesday, I’ll be adding to this post a new video in a 18-part series that shows you how to make simple shapes and move them around with code in a method that would feel very familiar to someone using Processing or other simple creative coding environments. No prior code knowledge is necessary, we will go slowly and methodically! I had a lot of fun hooking my “ShapeMaker” ISF generator to my MIDI piano, but I’m eager to see what you all will make.
Download the source files for this series
Part 2:
Part 3:
Part 4:
Part 5:
Part 6:
Part 7:
Part 8:
Part 9:
Series outline and video notes:
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
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
Stack Overflow
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
• 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/about
and the latest build can be found here: https://github.com/mrRay/VVISF-GL/releases?fbclid=IwAR3LOlgDP1ssdWXdbFumcSRlw-GXESFj9lmJaJrJq_ZgewCRKvhhDnAZhtk
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/open-source/
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/wiki/Modular_arithmetic
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, www.thndl.com
• Building a rounded rectangle with shaping functions
• using www.desmos.com and graphing calculators
• implementing the thndl.com algorithm for rounded rectangles
Notes/Addendums:
at 3:19 a more technical explanation of absolute value : https://en.wikipedia.org/wiki/Absolute_value
at 7:20 Here’s all the links I mentioned:
https://thebookofshaders.com/examples/
https://thebookofshaders.com/edit.php?log=160414041142
http://www.kynd.info
http://thndl.com/square-shaped-shaders.html
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/Mark_Kilgard/22pathrender 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;
Cheers!
Colin