Sound display on a wall

hi guys i’m approaching with processing and i’m thinking about a project (to project the sound display on the wall in my bedroom)
this is the idea


how can i do it?
thanks

what does the graph represent (X axis? Y axis?)

it’s a frequency spectrum, this is the example https://p5js.org/examples/sound-frequency-spectrum.html but i don’t know how to modify it.

Do you understand the code you linked and what a FFT delivers?
In the draw function you have a for loop for (i = 0; i < spectrum.length; i++) { going though the FFT bands, so look at some graphic examples, and for each band you just need to draw a number (depending on spectrum[i] of stacked rectangles and filled with a given color depending on the band (so may be have an array of colors too) against a specific background color

that’s not p5.js but processing


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

import ddf.minim.*;
import ddf.minim.analysis.*;

Minim minim;
AudioPlayer song;
FFT fft;

void setup() {
  size(1612, 700);

  // always start Minim first!
  minim = new Minim(this);

  frameRate(1000); 

  // specify 512 for the length of the sample buffers
  // the default buffer size is 1024
  song = minim.loadFile("groove.mp3", 512);
  song.play();

  // an FFT needs to know how
  // long the audio buffers it will be analyzing are
  // and also needs to know
  // the sample rate of the audio it is analyzing
  fft = new FFT(song.bufferSize(), song.sampleRate());
}

void draw() {
  background(0);
  // first perform a forward fft on one of song’s buffers
  // I’m using the mix buffer
  // but you can use any one you like
  fft.forward(song.mix);

  stroke(255, 0, 0, 128);
  // draw the spectrum as a series of vertical lines
  // I multiple the value of getBand by 9
  // so that we can see the lines better
  for (int i = 0; i < fft.specSize(); i++) { 
    rect(i*8, height - fft.getBand(i)*9, 
      8, fft.getBand(i)*9);
  }//for 

  // ------------------------------------
}
//