How to visualise the "timeline" of a song

p5.js Libraries
1

Hi, first post here, so I hop I won’t do anything wrong and if I do, please just tell me… (and english as a second language, so i try to explain what I have in mind…)

So, I’m trying to visualise sound in a grid, by changing the size of squares according to the bass, treble and mids levels. This works so far, but of course it always just shows me the current level in all fields of the grid.

but what i want to to, is basically divide the song in as many steps as I have fields in the grid and get the level for every of these steps. But I’m completely lost, I don’t even know what to search for and if anyone could point me in a direction I would be super glad.

This is the code I used to draw the fields:

function draw() {
    background(0);
    var spectrum = fft.analyze();
    var bass = fft.getEnergy("bass");
    var treble = fft.getEnergy("treble");
    var mid = fft.getEnergy("mid");

    for (var x = 0; x <= width; x += width/10) {
        for (var y = 0; y <= height; y += height/10) {

            //BASS
            var bassAmp = map(bass, 0, 512, 0, width/10);
            noFill();
            stroke(255);
            rect(x,y,bassAmp,bassAmp);

            //TREBLE
            var trebleAmp = map(treble, 0, 512, 0, width/10);
            noFill();
            stroke(255);
            rect(x,y,trebleAmp,trebleAmp);

            //MID
            var midAmp = map(mid, 0, 512, 0, width/10);
            noFill();
            stroke(255);
            rect(x,y,midAmp,midAmp);
        }
    }
2

Let say your window is 400x400 then your grid is 10x10 slots

you could read the entire song into 3 arrays bassAmpList etc. . In setup()

Let’s say you song is 200 seconds long

then one cell is 2 seconds long.

So in setup collect data for one cell (and take the average) until 2 seconds are gone.
Store 3 average values in 3 arrays.

Skip to next 2 seconds and so on.

(I am not familiar with how the lib works. I don’t think you can analyze the song faster than it would be when playing it. Probably you can display the grid while analyzing the song and display only the cells that already have data from the song)

Demo for bassAmpList

using random data


//

float [] bassAmpList  = new float [122];
// ---------------------------------------------------------------------------

void setup() {
  size(400, 400);

  for (int x = 0; x < 122; x++) {
    bassAmpList [x] = random (0, width/10);
  }
}

void draw() {
  //
  draw2();
}

// ---------------------------------------------------------------------------

void draw2() {
  background(0);

  int k=0;

  for (int x = 0; x <= width; x += width/10) {
    for (int y = 0; y <= height; y += height/10) {

      //BASS
      float bassAmp = bassAmpList [k]  ;  // = map(mouseX, 0, 512, 0, width/10);
      noFill();
      stroke(255);
      fill(0, 222, 220);
      rect(x, y, bassAmp, bassAmp);

      //TREBLE
      float trebleAmp = map(mouseY, 0, 512, 0, width/10);
      noFill();
      stroke(255);
      rect(x, y, trebleAmp, trebleAmp);

      //MID
      float midAmp = map(mouseX, 0, 512, 0, width/10);
      noFill();
      stroke(255);
      fill(0, 222, 0);
      rect(x, y, midAmp, midAmp);
      k++;
    }
  }

  println(k);
}
1 Like