ISF "ShapeMaker" Tutorial Series

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

Check out the GLSL Spec

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

16 Likes

Wow great. looking forward to it.

1 Like

Thanks! Show us what you make with ISF! This week is a simple color generator, but we start making circles next week.

Thank you for this first video
It’s really cool because you start from scratch and taking time to explain everything.

1 Like

Okay, part 2 is up! Learn all about making a circle using simple math.

3 Likes

Part 3 is ready! Make an interface for your circle, let’s make our first useful generator.

3 Likes

Okay, part 4 is up. Time to move to the ISF Editor.

3 Likes

And, part 5 is up! This is the fifth video in the series, which caps out the unit (videos 1-5). After completion of this unit, you will be able to make your own visual generator/synthesizer with lots of possibilities for expansion and audio/visuals. There are four units in this training series (18 videos total).

What’s coming up? Unit 02 (Videos 06-11) Will expand features of this prototype more shape types, strokes, alpha, and blend modes!

4 Likes

Part 6 kicks off Unit 02. In this video, we expand our shape library to include rectangles and rounded rectangles.

3 Likes

Part 7 is here. This is a quick video showing how you can build conditionals and dropdown inputs into your code to easily change between shape types.

3 Likes

Part 8 is ready to go! We will refactor a bit and build a simple stroke

3 Likes

Part 9 is up! Time to make alphas.

2 Likes

Part 10, time to use our new alpha channels to build “over” blend mode!

1 Like

Check out Part 02! A new thread for the next 9 Videos.

1 Like

New video over on the part 02 thread! We finish up blend modes with “multiply”

1 Like