A hypnotic, music-reactive Techno visuals show designed for staring at at a party

Shallowed

Hi everyone,

Just sharing my work here. I coded this system for minimal techno visuals in Processing. It involves 3D graphics, beat detection and other techniques! Been working on it on and off for a long time. I have used it live at a clubnight once too!

Here it is reacting to an hour long techno mix I made. I hope you enjoy it. Any questions about any elements of the system, let me know and I'll help you out!

https://youtube.com/watch?v=bAqrLggemd0

Thanks for looking.

nabr

nice

Shallowed

Glad you enjoyed it

jeremydouglass

@Shallowed -- Nice. How did you determine the camera angles? There are moments where one pole of the sphere is perfectly situated on the top or bottom edge of the screen -- a very nice effect.

Shallowed

@jeremydouglass Thank you, I appreciate it. I honestly think it was chance/trial and error. Yes, I do also like the patterns the sphere makes at certain times — which is nice as I was able to get a lots of patterns out of quite a minimal effect (it's just one sphere after all!).

But yeah, the sphere's default state in this video is that it's spinning on the y axis. Then every so often, after a random number of beats (some multiple of 4), it will turn on the x axis also for a few beats. Then occasionally the shape will translate to come over the cam, this happens only when a build up is detected, and only occasionally then. There was a lot of random numbers used in this, so it kind of operates itself, which was a feature I wanted so that I wouldn't be standing behind my computer at a club night, I can just be on the dancefloor watching :) haha

Let me know if you have any more questions!

Dizotoff

@Shallowed good job! Could you describe more about beat detection?

Shallowed

@Dizotoff, thank you! Yes indeed I can.

I am using a library called Minim for this. At first, I was using Minim's built-in beat detection. It has a class for simple beat detection, here's the documentation.

It worked quite well, but this method proved less flexible than I would have liked — it would miss some beats, or detect a beat when there wasn't one sometimes, and there wasn't enough flexibility with the BeatDetect class (or so I thought, there is an isRange() method, where you are supposed to be able to choose a particular frequency band to react to (i.e. just the bass etc.) but I couldn't get that working well).

In the end, I used a FFT (Fast Fourier Transform) object (docs). This allows you to split the audio into a spectrum (multiple bouncing frequency bands, like you might see on a graphic equalizer).

Since my music has a pretty constant pulsing bassy beat, I simply access the value for the lowest band of the FFT (number 0), then set a threshold for what constitutes a beat on that band. I also have a sensitivity value that I can change on the fly, so that 2 beats aren't detected too close together. This works reasonably well, and is something I can quickly mess with at live shows if the beat detection goes wrong (I have threshold and sensitivity mapped to the arrow keys).

Here's some code for that last bit:

if (frameCount >= mostRecentBeatFrameCount + sensitivity) { if (selectedAverageBandLevel > chosenThreshold) { mostRecentBeatFrameCount = frameCount; } }

So yeah, pretty simple solution, works well for live situations with 4x4 bass heavy music. There's definitely, definitely better ways to approach it though. You can find scientific papers and other writings online about better beat detection methods, I would like to implement one one day!

Hope that helps, thanks for your question.

jeremydouglass

Thanks for sharing your custom beat detection solution, @Shallowed -- seems like it might be very helpful to some people with similar problems.

Shallowed

@jeremydouglass, no problem, happy to help

Dizotoff

@Shallowed
Thank you very much! Btw, great job with visualization as well, which library did you use for it? I'm building similar thing, but in web. Maybe you know appropriate webgl libraries where I could fly with camera like you did?

Shallowed

@Dizotoff no problem. Thank you, appreciate it lots. I actually didn't move the camera at all for this, just translated the sphere over the cam! Let me know when I can see your visuals, would be cool to check them out.