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

Thanks! I just need to draw the picture in attach from a recorded voice file but I can’t…


Yes, show your entire code/attempt


It was simple enough to adapt this:

To a plot of frequency vs time (updated each frame):

The possibilities are endless!




I stated above:
“frequency vs time (updated each frame)”

I was actually plotting:
“amplitudes (for each frequency) vs time (updated each frame)”

See below for an update.


Not sure if this what youre looking for

One downside to my sketch is that it cannot produce an image without playing the audio, and the resolution of the image is inversly proportional to playback speed meaning playing the audio at original speed is required for the best resolution. Im unsure weather this is a limitation of the sound library or processing itself.

1 Like

thanks! but what about the different colours that indicates the different level of dBels? In your exemple, it seems that only frequencies and time are represented…

Best regards

P.S. In the code you quoted there seems not to be the possibility to import a voice recorded file, isn’t it? Thanks

I took the basic examples and wrote the code to do this.

You will have to write code for this.
I do not have a “canned” solution for you and wrote the code from scratch using the existing library.

There are examples that use a sound file in the Sound Tutorial and in the examples that come with Processing.


Hey @humus,

I was recently on a similar quest and found this useful sketch on github:

It works for me on v3.5.4, though it noted that it seems to display only one graph at a time.

Thanks! Which of the four codes have to be used?

It works for me too.

I have a question, is anyone know a way to get pixels of the spectrogram and convert again in audio using Processing?

May be you need to do an “inverse discrete Fourier transform

as an experiment I would try to read each pixel color in a vertical line in the region, that’s the frequencies and their strength at a given moment.

Combine a number (Region’s height gives you the number of bands) of Sine Wave Oscillator at each given frequency with an amplitude depending on the color if the point

1 Like

that’s really interesting. Jay, might you give an example code to do this?

I don’t have any example, and on second thoughts I would use minim to explore this

See this example
there is an empty window at start, horizontal axis is a frequency bucket of the FFT and the Vertical axis would be the value of that frequency

So if you click on one point in there and it will be like a FFT on a pure sine wave as you have only one specific frequency at a given level.

of course if you set multiple points (hit ‘c’ to clear) you are drawing the FFT of a signal that would be the sum of sine waves and you can hear this from the audio of your computer.

Now this single representation is equivalent to one vertical line in your color FFT chart where the height of the bar has been color coded. So if you read one vertical line and transform the colors into height, you have the equivalent of the diagram from that app, at a given point in time.

going through your FFT color representation along the X axis is like moving through time, so if you move at the FFT window sampling rate and calculate the inverse FFT and play it, you would get something (likely / possibly ?) that sounds somewhat like your original audio (only way worse :slight_smile: )

1 Like


I was able to add a few lines of code to the Processing sound library examples and do this:

Upper left is the FFT plot of amplitude (y) vs frequency (x) with color added to amplitudes for each frequency.

Lower left is time (y) vs frequency (x) with color added to amplitudes for each frequency.

Right side is frequency (radius) vs time (angle) with a rotating sweep of the same data from lower left plot.

Time was updated each frame.

I am posting this to demonstrate that this is achievable.


1 Like


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.




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.



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


Please format your code:



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);

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);
  //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   
  translate(width/2, height/2);
  for (int x2 = 0; x2<bands; x2++)
    stroke(0, fft[x2]*255, 0);  
    point(x2, y2);
  angle += TAU/(256*4);  
  if (y1 >= height) 
    y1 = 0;
    angle = -TAU/4;

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


1 Like