How to make my sketches react to beats?

aidinz

Hi,

For my performance, I created a couple sketches but I need them to visually react to music beats, how can I do that? I was after a general method to let me apply it to all my sketches like a screen space shader that would distort the whole image maybe.

I think the best way is to change each sketch but I rather not change my codes as they are fairly complex as of now and I don't have much time.

Thanks

Chrisir

look here:

http://code.compartmental.net/tools/minim/

aidinz

Thanks, I'm aware of Minim. I want to know how to find a generic way to change all my sketches based on detected beats.

kfrajer

I have seen post where a sketch changes based on the amplitude of music. To change base on beat, I guess you need to get some FFT and check for the amplitude at certain frequency? How would the beat translate to changes in your sketch?

Kf

aidinz

Yes, imagine I've done that, how to visualy change my sketch to reflect it, like applying some kind of noise or glitch on each beat.

jeremydouglass

I see -- you want to drop in a filter -- something that you can add to almost any visual sketch without changing much.

This is written away from Processing, so untested!

1. Write a separate .pde tab of code that implements the sound energy beatdetect described here:

   • http://code.compartmental.net/minim/beatdetect_class_beatdetect.html

2. In the tab add the libraries and global variables if your sketch isn't already using them for audio and divide the demo code from above into two functions:

      import ddf.minim.*;
      import ddf.minim.analysis.*;
      Minim minim;
      BeatDetect beat;
   
      void setupBeat(){ // call this from sketch setup
        minim = new Minim(this);
        // ADD: set up your sound input to minim
        // and start playing / streaing it here
        beat = new BeatDetect();
      }
      void drawBeat(){ // call this from top of draw
        // analysis
        beat.detect(song.mix);
        if (beat.isOnset()){
          // effects
          translate(random(10), random(10)); // shake!
          tint(0, 153, 204); // blue!
        }
      }
   

3. Fill out the sound info above, and customize the visual effect -- random shaking, tinting, slower or faster rotation or scale pulsing with easing (with current state stored in a global variable) -- whatever effect(s) you want. During a beat onset, the processing command will execute at the top of draw, affecting the entire sketch (assuming the sketch elements aren't all isolated onto PGraphics etc.)

4. For each sketch you want to use it with:

   4a. Copy the pde file into the sketch folder ...and that you can drop it in as a file (tab) into any existing sketch.

   4b. Add setupBeat() to setup(), and drawBeat() to the top of draw

That should do it.

jeremydouglass

Another additional option:

If, rather than changing the conditions of drawing (translate, tint, scale) you want to instead alter the final state of the screen, put drawBeat() at the end of draw.

Then you could, for example, copy pixels[] into a buffer, resize it, and draw four copies onto the screen -- so during no beat, there is one picture, and during a beat onset there are copies of (whatever that sketch does).