JAMJAM2017: A music visualization and creative coding seminar

Jam Jam 2017 - Making Visualizations

JAMJAM2017 was a team-building exercise we held here at the gskinner office. It was a time to learn about music visualization, have some fun, and build some demos!

JAM Genesis

Each Friday we have an event called gshow where team members present demo code. Imagine a bunch of people showing off codepen experiments in a boardroom with beers and laughs.

One thing that a few team members started to notice was that demos were always completely silent. Eventually, Sebastian called us all out and said: “Just Add Music!”

He was right.

To make it as easy as possible, Grant wrote a library called JustAddMusic (JAM). The purpose is to assist with music visualization by taking care of the music analysis for you. He wanted some demos for it and from there hatched the idea of the JustAddMusic demo party. A JAM JAM.

 

Getting Our JAM On

The JAMJAM started with a presentation on the many ways to visualize music. I wanted people to go into the task of building a music visualizer with an opinion and head full ideas.

Each team had two hours to create a visualizer which is not a lot of time to make something. To help manage the time constraint, I created a set of boilerplates for CreateJS and Three. I wanted people to dive right in and create.

The team soaked it all in over a Friday afternoon and here is what they came up with.

 

Team Space

Chris Caldwell, Patrick McGuckin, Blair Ludwig, and Sebastian De Rossi

Music Visualizer: Squares in space

Somewhere in the infinity of everything, space is made of squares.

Team Space hunkered down in a dark room and was out of contact for the entire two hours. All attempts to hedge in and check out what they were doing were met with hostility. It was as if I was walking in on some top secret alien autopsy. Luckily, I was able to escape the men in black and let them work.

It wasn’t a contest, but Team Space came up with the most visually cohesive entry.

Check out the live version in the gskinner lab.

 

Team Learn Three

Lanny McNie, Chris Kohanik, and Eddie Chu

Music Visualizer: Lots and lots of cubes.

Cubes within cubes. Cubeception.

3D can take a long time to learn. Three makes it easier, but even it can have a steep learning curve if you venture too far out. When things go wrong, stuff can disappear with no error message and debugging turns into trial and error. During their creation, they also discovered a few GPU driver-related glitches. These manifested as very different renderings across devices.

Frustration was high. The help they got wasn’t always the help they were looking for as they struggled to realize their ideas.

Team Learn Three dove in head first and had no idea what they were doing. They fought for what they wanted and ended up with something cool.

Check out the live version in the gskinner lab.

 

Team Bike / Motorcycle

Trevor Dunn, Wes Gorgichuk, Alex Garneau, and Yoon Lee

Music Visualizer: A motorcycle riding on a laser landscape in front of a planet.

Team Motorcycle. The motorcycle won. It shoots a beam. Press L to fire it!

Team Motorcycle went for it with an ambitious technical concept. The motorcycle/bike rides the waves of sound and you can jump between the various layers.

Technicalities weren’t their only troubles. They fought creatively over whether it should be a bike or a motorcycle… this created a crack which could have divided us all!  Luckily, a peaceful resolution was found and they went with the bicycle… or was it the motorcycle?

The TV would not recognize their device as a video source and refused to show anything. In a heroic dash, they were able to get their project to another computer to show on the TV.

They also chose the weirdest song.

Check out the live version in the gskinner lab.

 

Side Effects Include…

Music visualizations weren’t the only thing that got an upgrade during the JAM JAM. JustAddMusic itself had new features added as a result. As with any code library, once people start using it they find all sorts of things it doesn’t do for them.

JAM Enhanced

spectrum: Exposes the FFT analysis node with a twist. It offers only the number of bands you request and packs them into the audio range where all the action is. The goal isn’t to have the full spectrum but just the bins that are used for visualization.

loop and onEnded: Added to assist developers making games and playlists.

 

Getting Out of a JAM

JAMJAM2017 was a big success and we came away with some pretty cool demos and feature enhancements for JustAddMusic. The best part was that people took risks and tried things they hadn’t before. Working with a code library inevitably leads to bug fixes and new features.

Our team is always eager to flex its creative and technical muscle. People interested in music visualization now have a better understanding of how JAM works — I expect that we’ll see more visualizers in the future.

Avatar photo

Matthew Willox

Artist masquerading as a developer in a designers world.