cld (see-L-dee) makes games and graphics in Western New York.

Contact | RSS Feed | P2P Backup

Bit Crushed 5.0

June 11, 2019

I did the visuals for the latest Bit Crushed chiptune show, and I wrote a whole lotta words about how I did it.


Welp, Bit Crushed 5.0 has come and gone. It was definitely a good show, every act had a solid set, and I think I did a pretty good job with the visuals. I don’t have any sort of capture of the whole thing, but you can watch this highlights clip from the Bit Crushed YouTube channel to get a feel for what it was like.

PraxisLIVE

Screenshot of PraxisLIVE editor in action

In my earlier posts I talked a bit about how I didn’t want to use Unity this time around for creating visuals. Don’t get me wrong, Unity’s a great tool, but I had a couple reasons for wanting something else:

  • It’s not nearly as flexible and responsive to edits as I wanted for experimenting
  • I use Unity ALL THE TIME
    • (This is also why I’m learning C)

So I started the hunt for other live visual platforms, tinkered with Pd/GEM a bit, looked at Hydra, and settled on PraxisLIVE. PraxisLIVE is a creative coding platform designed for performers who want to create audio and/or visuals and use them in a live setting. While I don’t believe it was originally started as a platform for livecoding, one of the benefits of the way it was designed is it allows for livecoding. It uses a combination of programming patches in Processing and visual programming where you combine these patches to create your artwork.

It’s incredibly powerful and easy to get up and running in, runs on most all platforms, and is FOSS (GPL3). If you want to experiment with making this sort of stuff, I highly recommend it.

Danimal Cannon

For each act I wanted to create custom visuals of some sort. When I first started buckling down on more than just messing with Praxis I decided to go with Dan’s as I had the clearest idea of what I wanted to mess with on that one.

The Head

Dan's head

I can’t remember which one it was, but Stevie Boyar made a 3D model of Dan’s head for the visuals he did at one of the Bit Crushed shows. Thinking it was both hilarious and cool, I wanted to use it in his set at this show. Stevie was super generous in letting me use it.

I originally wanted to have it texture-mapped with video and other effects, but there’s a bug in the version of Praxis I was using that prevents you from applying custom textures (and colors) to imported 3D models. I tried regenerating it on the fly in Praxis so I could texture the quads individually, but I couldn’t get the verts right and the framerate plummeted.

Instead, I ended up doing a little bit of fun lighting to get the model to pop, and applied the video feedback node I created to it. This node simulates the effect you get when you point a camcorder at a monitor that’s showing what the camcorder sees, giving you all sorts of weird visual artifacts and scaling/rotation effects. The node does this by saving the last frame rendered to the output and displays it overtop the current one on a quad I can alter in terms of position and scale. I can also edit the blend mode of the quad, leading to some really weird coloring effects that wound up looking pretty sweet and chaotic towards the end of the set.

The one thing I should’ve added to the feedback node but didn’t was rotation. Spinning that late frame overlay, maybe on a sine wave pattern, would’ve been a nice addition.

Another node effect I created (visible in the screenshot above) is a horizontal offset thing. When triggered, it would randomly shift screen-wide chunks of pixels left and right, giving it a bad video signal effect. Combined with a bit of blur and that feedback effect resulted in a really solid aesthetic.

Scrolling Backdrop

Infinite Danimal Cannon

Another asset I used but didn’t create was the background texture. Wayne Kubiak made some super rad shirts for Dan a while back, and on the back of them there’s a really nice looking Danimal Cannon in a custom pixel art script font. Wayne kindly let me use it for the visuals, where I faked an embossed look by shifting a copy of the logo over itself and removing everything except the border pixels. With a bit of edge highlighting, it gave it a nice metal panel look when tiled.

To liven it up, I used the audio feed I got from the soundboard to control the colors of the sprite (three FFT channels mapped to H, S, and V). When the music got loud, the pattern got bright. Simple but effective.

The scroll was another simple touch. The pattern is offset on the quad I placed it on using a little oscillator node I wrote. Using a saw wave and different speeds for X and Y, I could easily simulate an infinite scroll of the background.

Crosshairs

Got you in my sights

I dunno why I went with crosshairs, haha. Probably because I was listening to a lot of 90’s industrial while I was working on it, and was just in a Tactical Neural Implant frame of mind. Anyway, I wanted something that would get triggered on the beat, or as near as possible, and this was it.

Using one of the FFT channels, if it ever went above a certain value I triggered a quick animation that would rotate the crosshair sprite (created in Inkscape) 90 degrees in about a second, maybe less. When stuff got really loud it just spun on and on, which was fine IMO. The rotation plus the video feedback effect worked out pretty well, especially when it overlapped in weird ways with the 3D head model.

Equalizer

Audio Video

This was the testing bed for the FFT analysis. I wasn’t sure exactly how it would work, as I had lifted the FFT patch from one of the Praxis sample projects. Fortunately, once I learned how to send messages from patch to patch it was pretty easy.

Making a little equalizer made the most sense as a way to test whether or not the signal was being sent and if it was being interpreted properly. I wrote a little node that uses a for loop to draw a set of rectangles on the screen, using the array of floats from the FFT node to set the height of each one.

I didn’t really intend to use it in the final scene, but it worked so well mirrored across the bottom of the display I kept it in.

Pulsing

Of the three acts playing, I knew the least about these guys. After listening to their Bandcamp collection, I decided to try to go for a Game Boy Camera influenced look.

The Video

For the last couple Bit Crushed events, I wanted to do something with video. I’d captured some source material, but never got around to using it. With this set it seemed like the perfect opportunity, so I started recording my commute with my GoPro strapped to the dashboard of my car, pointed at weird upward angles. Once I got about 30 or so clips, I threw them all in Handbrake and downscaled to something like 320x240 so I could have them all loaded at once without having to wait for any processing overhead.

I used a node that, on trigger, would select a random clip from the folder where I saved them and start playback. Connecting that trigger to the same FFT stuff I used to make the crosshairs in Dan’s sketch spin made clips change on the beat. Those clips were what made up the majority of the graphics, but I did a bit of additonal processing to them so it wasn’t just low-res videos playing randomly.

Pixellation

Going back to the Game Boy Camera influence, I wanted to make sure everything was really pixely. the GB Camera shot photos at 128x96, had only two bits of color depth (white, light grey, dark grey, and black), and updated the display at somewhere around ~15fps, probably less. I didn’t feel like I needed to exactly replicate the specs, but I wanted to kinda get it close.

The first step was the pixellation. There’s probably a much better way of doing this in shaders, but since I didn’t have the time or energy to learn GLSL I decided to do it all in Processing. I wrote a node that, on each frame, would iterate across the X and Y axis in set increments, sampling the color of the video frame. At the same time, I’d draw a square on the screen that was filled with the sampled color, and size it to fill the space between each step across each axis the loop made. This effectively gave me the low resolution look I wanted with sharp edged “pixels”.

After that, I ran the output through a posterize filter that cut it down to three colors. That got fed into another node that would only update the output frame when triggered, and attached it to a timer that fired off around 15 times a second. That gave me the basic color reduction, low frame rate, and low resolution effect. It worked pretty well. Messing with the hue of the output gave it a nice variety of color (which I also ended up randomizing on FFT triggering), and the abstract visual noise made for a nice lightshow effect.

The Cube

Cubes

I didn’t just want to have videos playing, so I messed around with overlaying some other stuff on the video. I ended up going simple and settling on a cube rendered in realtime that would jump in size and scale back down slowly, all triggered by the audio; This went got fed through the same effects as the video to keep the aesthetic consistent, but was blended with the video in various ways to make things a little more interesting.

SBThree

Out of all of the sets, I probably had the most fun making Stevie’s. His music is super fun and jazzy (probably something to do with the fact that he’s a fantastic jazz musician), so I kinda went all ham on creating the graphics for it.

Patterns

One of many patterns

I wanted to do more scrolling textures for his set, but it needed to be lively and fun, lots of color and shapes. I created 12 or so patterns using Aseprite, a really great pixel editing program to design them. With the help of it’s tiled mode editor and a drawing tablet I was able to quickly doodle out a bunch of different designs, tweaking as little as possible in an effort to keep things organic and freeform.

The other thing that helped was I limited myself to a three color palette, not including the transparency. I picked three colors about 30 degrees apart in hue and used the same three for all the patterns. (Actually, all the patterns were even in the same file; I put each one on a separate frame, so you could play the source file back for some insane visual noise.) Then, once I exported them as PNGs and brought them into Praxis, I could just shift the hue on them for wildly different colorschemes that still kept all the shapes on a given pattern matching nicely.

By the way, keep an eye on my Redbubble shop if you like the look of these. I plan on putting up a bunch of items using them soon-ish.

Double Scroll

Some scrolling patterns

Since I already had the scrolling background working in Dan’s sketch, it was trivial to get the same thing working on Stevie’s. But rather than just do the same thing, I duplicated it and created a secondary background that overlaid the basic, constant scroll. This secondary plane had some oscillators connected to not only the position but the rotation and scale as well. This resulted in a zany, lively animation of wiggly graphics that, when blended with the other graphics, made for a pretty wild visual.

More Cubes

Cubes again

I like cubes. They’re simple, they look neat spinning in all their 3D cubeyness, and they’re easy to texture. Putting one in this set was easy, and once I added the patterened textures to it it just fit the whole thing. Using the same style randomizer from Pulsing’s sketch on the textures kept things changing constantly on the cube as well as the background, resulting in the final visuals for the show.

The Controls

Custom GUI in PraxisLIVE

Tying most all of it together was the custom GUI features that Praxis offers. I was able to create sliders, some dropdowns, and some buttons as triggers and map it all seamlessly to the nodes I knew I needed some live direct control over. This was a lifesaver in the live setting, where I wasn’t sure how strong the audio feed was gonna be. Also, since I was running this on a laptop with a touchscreen, I could maniuplate all this stuff with my hands, which was nice.


So yeah, for the last time I plan on doing visuals (for a while, at least), it turned out pretty nice. If you’d like to pick my brain about how I did a particular thing for this show, or just visuals in general, feel free to shoot me a line via email.

◀ Previous Post | Next Post ▶