Drawing a spectogram 2D (or 3D) from a recorded audio

Hello,

How color is generated in a spectrogram?
I can observe in your image that green is higher amplitude, yellow middle and red low. It is an arbitrary decision or there is some standard formula for the color encoding.

Thanks,

Mar

Hello,

I just threw this together quickly as a proof of concept and had fun going from the basic FFT example to the x, y and then the polar sweep.

I used HSB color mode and changed the hue for the colors proportional to amplitude; there is also saturation and brightness to have fun with!

My first effort was just shades of gray with stroke() from 0 to 255 in RGB mode.

I did set a threshold so it was black if under a certain amplitude otherwise the background was red in my example.

References:

:)

Hi,
I’m also learning how to manage with a spectrogram on processing, is it possible to ask you for the code?
It would be so useful!

1 Like

Have you tried my sketch, you should be able to alter it to produce a circular profile

Hello,

Please format your code:
https://discourse.processing.org/faq#format-your-code

:)

Hello,

This is a simple example to show how to plot points from data in an array and add color to the data.

These are the same concepts I used with my other examples in this topic using the FFT example that comes with the Processing Sound Library (not Minim library).

Example Click Here to Open!
// FFT Gradients
// v1.0.0
// GLV 2021-05-11

int bands = 256;
float [] fft = new float [bands];

void setup() 
	{
  size(512, 512);
  background(0);
	}

int x1, y1;
int x2, y2;
float angle = -TAU/4;

void draw() 
	{
  //Some *fixed* sample data. This will be changing with each cycle of draw() in FFT example in Sound library.
  for (int i = 0; i<bands; i++)
    {
    float amp = 0.5;
    fft[i] = amp + amp*sin(i*TAU/256);
    println(fft[i]);
    }  
  
  //XY Plot using fft[] value to add a gradient
  for (int x1 = 0; x1<bands; x1++)
    {
    stroke(fft[x1]*255, 0, 0);  
    point(x1, y1);
    }
    
  //Rotating Plot fft[] value to add a gradient   
  push();
  translate(width/2, height/2);
  rotate(angle);
  for (int x2 = 0; x2<bands; x2++)
    {
    strokeWeight(2);
    stroke(0, fft[x2]*255, 0);  
    point(x2, y2);
    }    
  pop();    
  
  angle += TAU/(256*4);  
  
  y1++;
  if (y1 >= height) 
    {
    background(0);
    y1 = 0;
    angle = -TAU/4;
    }
	}

I used HSB colorMode() and hue() for the gradients in this example:

:)

1 Like