Audio visualising

Processing Libraries
1

Hello people,

Im fairly new to processing and Im hoping someone could help me with the next step of my project. Im trying to make an audio visualisation of the frequency range of a song, Im trying to make something that looks like this

My Concept is an arrangement mapping the amplitude of the frequency on the x axis and the frequency range from high at the top to low on the bottom of the y axis. This image would be made up of different instruments of a song but to start Im just using a bass noise.

The code I have here is analysing a simple bass noise with a filter opening and closing on the high frequencies over a period. and it makes with second image here. As you can see the frequency is mapping on the y axis but filling into the x axis too

I was hoping someone could tell me how I can change this to make it look something more like the third drawing I have here instead

wavvvvv
wavvvvv950×950 252 KB

Here’s my code

import ddf.minim.*; 
import java.util.Calendar; 
Minim minim; 
AudioPlayer song; 
AudioMetaData meta; 

int spacing = 105; 
int border = 20; 
int amplification = 400; 
int num = 50; 
int pos, counter;
float[] x = new float[num]; 
float[] y = new float[num]; 

void setup() {
  size(600, 600);
  minim = new Minim(this);
  song = minim.loadFile("bass2.aif"); 
  meta = song.getMetaData(); 
  song.play(); 
    background(255);
  noFill();
  strokeWeight(0.001);
  stroke(2);
}

void draw() {
  beginShape(); 
  x[0] = pos - border; 
  y[0] = border;
  curveVertex(x[0], y[0]);
  for (int i = 0; i < num; i++) { 
    x[i] = width / 2 + song.mix.get(i)*amplification; 
    y[i] = map( i, 0, num, border, height - border ); 
    curveVertex(x[i], y[i]); 
  }
  x[num-1] = height-border; 
  y[num-1] = height-border;
  curveVertex(x[num-1], y[num-1]);
  endShape();