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.
Series outline and video notes:
• 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
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
• GLSL Topics: Variables, Types, Swizzle,
• Screen Coordinates, gl_FragCoord, RENDERSIZE
• color assignment using coordinates and basic arithmetic operators
• pythagorean theorem to derive length
• aspect ratios
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.
• ISF/GLSL Topics: length(), isf_FragNormCoord,
• 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
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.
• The ISF Editor. Features, environment
• Building an ellipse() function.
• GLSL/ISF Topics: Functions, returns, side effects, scope, passing arguments
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.
• 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
Much of the structure of this code comes from the “EMIT” Library from Authors/Rybotron
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”
• 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
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:
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…
• ISF/GLSL Topics: Version control with ISFVSN
• Integrating the rectangle() function
• ISF/GLSL Topics: Long Input Pop Up button
At 6:02 I say “VDMX” and meant to say “ISF”
• Refactoring the code: standardizing variable names and conventions
• Building a stroke on circles, theory and implementation
• Adding controls for stroke size and color
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!
• Building a stroke for rectangles
• Debugging and Error Correction
• Refactoring the shape functions to vec4()
• Returning an alpha channel: theory and implementation
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;