Download the Pixel Spirit shaders as ISF and example VDMX projects or check out the original Pixel Spirit Deck on GitHub
A few weeks ago Patricio Gonzalez Vivo (creator of the infamous Book of Shaders, one of the best online resources for learning GLSL) released a new project known as the Pixel Spirit Deck, a set of tarot cards where each image includes includes code that can be used to draw the shape.
From the Pixel Spirit website:
An example Pixel Spirit card
“ Each Pixel Spirit card presents a visual element together with the GLSL shader code that generates it. Ultimately, these elements can be reused and combined to compose an infinite visual language. This deck is a tool for learning, a library, and an oracle.
The cards are ordered as an unfolding continuum that goes from simplicity to complexity, from darkness to light, so they can be learned and memorized easily. Through this progression, the cards present new functions, creating a library of functions that can be reused and combined like a portable book of spells. Within the 50 cards of this deck you will find the 22 major arcana, the ancestral archetypes of the traditional Tarot deck: the wisdom of these powerful cards will guide you. “
The Pixel Spirit Deck is a really great learning resource, starting with just a few lines of code that take you through to making simple signed distance functions that you can use as-is or as starting points for your own creations. The code snippits are also available on the Pixel Spirit Deck GitHub repository.
Needless to say we figured it was only a matter of time before someone would use these code examples to create interactive versions of the shaders that could be used in VDMX and sure enough Colin Evoy Sebestyen showed up in our timeline doing just that.
From there it was a quick jump to the next stage of having fun with shaders...
“This was begging to be brought to VDMX. I took it upon myself to make a project where I could do an audio reactive, interactive ‘tarot reading’. I decided to build an interactive table for creating Pixel Spirit visuals and readings.”
Best of all, Colin was awesome enough to give us a behind the scenes explanation of this setup and share the project files with the rest of the community.
Who are you?
I’m Colin Evoy Sebestyen, a gentleman who resides in San Francisco. I’ve done a lot of digital interactive art and design around these parts. This includes motion graphics, VJing, interactive media, animation, commercial design, and a bit of fine art. Like probably anyone reading this blog, I love to think about the possibilities of synesthesia style audio visuals.
I’ve created visual work over the years for artists as varied as Snoop Dogg, Bjork, Nightmares on Wax, Edison, Nonagon, and Aesop Rock. You can see some of these graphics under my visuals collaboration project CSTNG-SHDWS and check out my personal site movecraft. An audio/visual collaboration with Nonagon for the Soundwave ((7)) Biennial is a recent highlight. I’m currently the Motion Graphics Lead at the Academy of Art University, San Francisco. I instruct in the Web Design + New Media department, so I’ve got some background in web technology but not a ton of professional coding experience. This is my first project with GLSL.
How did you use VDMX and ISF?
VDMX is super powerful. We all know this. My friend and collaborator in CSTNG-SHDWS, Justin Metros, first introduced it to me about 10 years ago with bugged eyes. “This will replace everything!” I’ve been a long time user and have all kinds of fond memories of various projects. From last minute generative visuals, event and awards show programming, VJing, …heck, once I even built a game show! It feels like a framework for my ideas rather than a restrictive performance paradigm.
A few years back Vidvox created the ISF file format. This lets you trigger GLSL code in VDMX the way you might a video clip. Many interface elements can be created to let you control the code with variables. For Pixel Spirit table, using the ISF Editor to type everything in and test the code from the cards was made breezily easy.
Writing GLSL code in the ISF Editor
Pixel Spirit shaders loaded into a VDMX media bin
The Pixel Spirit VDMX setup is fairly simple. It lets you trigger all of the various cards/ISF files in a media bin. There are six layers meant to represent the six cards of a Tarot Cross. You can load in six ISF assets at a time, and use the sliders to reveal the cards. Great care was taken in the setup to completely eliminate any semi-transparent values, so the layers are set on difference blend mode, and the layers are revealed with a combination of layer FX (Hight Field from masks and Levels) that create a threshold-style reveal. Additionally, there are master FX on the Canvas/Main Output layer that can be controlled with the FX knobs. Again, great care was taken to design effects that worked with the aesthetics of the Pixel Spirit graphics. Finally, I customized the VDMX interface colors and fonts to match the look of the graphics. The VDMX interface itself is part of the experience. I used my (sadly discontinued) OHM controller made by Livid Instruments to drive the setup. By coincidence, I customized my hardware controller to a black and white color scheme configuration, so this really completed the look! I used some music by the amazing musician Edison for the reading in the video documentation.
While I could have just typed in the code from the back of the pixel spirit cards straight in, I really wanted to have the various graphics animate. Sometimes this was as simple as choosing a hard coded float value and simply creating a slider for it, but sometimes I had to reconfigure the code or add some of my own functions to get the animation I wanted (for example, the blinking of the eye in “Vision”).
I had to learn at least a functional amount of GLSL to accomplish this.
Nice, do you have any resources for everyone to learn this stuff?
Fortunately for us, the same author of the Pixel Spirit Deck also has a free online book, The Book of Shaders. He walks through, in plain English, the type of techniques he used to create the simple graphics found in the Pixel Spirit deck. Also, Vidvox has published a full walkthrough of ISF - what it can do, how to create your own ISF files, and even how to port amazing examples from places like Shadertoy and InteractiveShaderFormat.com. ISF is also an open format and can be used in places other than VDMX.
So, if you’re ready to play around with the source files, check them out on my website! You can download the Pixel Spirit Deck source files, which include the ISF files, the VDMX file, and even the .vdmxcolors preset I created so you can have your own high contrast goth-y interface in VDMX. I used the great font input, which is also a free download for personal use.
Hey, like free downloads and source files? A few years ago, I open sourced my whole demo reel with lots and lots and lots and lots of motion graphics for you to pick apart, remix, and learn from however you like. It’s a stew of project files - After Effects, MAXON Cinema 4D, VDMX, and other media files. You can find that at my website, too.