How to make my sketches react to beats?

edited December 2017 in Library Questions


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, I'm aware of Minim. I want to know how to find a generic way to change all my sketches based on detected beats.

  • 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?


  • 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.

  • edited December 2017

    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:

    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
           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.

  • 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).

Sign In or Register to comment.