Adding color to a spectrogram and making it round


for a schoolproject i want to create a round spectrogram, but I am still kinda new to processing. I created with my teacher this code and I actually want to add a color (or even more) to the spectrogram. It does not work with a simple fill. The next step i want to do is to make it a circular spectrogram like this -> Does somebody know how?


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

Minim minim;
AudioPlayer song;
FFT fft;
int colmax = 1000;
int rowmax = 500;
int[][] sgram = new int[rowmax][colmax];
int col;
int leftedge;

void setup()
  size(200, 300, P3D);

  minim = new Minim(this);
  song = minim.loadFile("sun_sonification.wav");;

  fft = new FFT(song.bufferSize(), song.sampleRate());


void draw()

  // perform a forward FFT on the samples in the input buffer

  for (int i = 0; i < rowmax /* fft.specSize() */; i++)
    // fill in the new column of spectral values
    sgram[i][col] = (int)Math.round(Math.max(0, 2*70*Math.log10(1000*fft.getBand(i))));

  col = col + 1; 

  if (col == colmax) { 
    col = 100;

  for (int i = 0; i < colmax-leftedge; i++) {
    for (int j = 0; j < rowmax; j++) {
      point((i*PI), height-j);
  //Draw the rest of the image as the beginning of the array (up to leftedge)
  for (int i = 0; i < leftedge; i++) {
    for (int j = 0; j < rowmax; j++) {
      point(i+colmax-leftedge, height-j*sin(height/2));

void stop()




It looks like it’s using the time on one axis, frequency on the other, and amplitude to determine to a brightness value.

I would try to make a 2D visual of it first, and then you can just texture that to an arc.


making it round ?

the time (or frequency) on one axis is your angle

the amplitude the radius

see tutorials | trig:



Related post:

I did this with the Processing sound library.



Your code did not display anything here.

Start simple and build on that.

I removed background() and did this just to get an output from first loop and removed other 2 loops:

    int f = int(30*fft.getBand(i));
    stroke(f, f, 0);
    point(i, col);


Keep at it!



Wow thanks! I do not really know what you mean by frequency (radius) vs time (angle). It looks very nice and yes that something I want to create. Hope you want to help me further! :slight_smile:


here is an example where you have data and angle and radius

No sound though…

PVector center;

int[] data = { 
  9, 5, 8, 2, 7, 6, 1, 5, 2, 8

void setup() {
  size(1100, 900);
  center = new PVector(width/2, height/2);

void draw() {
  ellipse(center.x, center.y, 9, 9);

  float angle = 0;
  stroke(255, 0, 0); 
  for (int i : data) {

    float x1= cos(radians(angle)) * i * 40 + center.x; 
    float y1= sin(radians(angle)) * i * 40 + center.y; 

    line (center.x, center.y, 
      x1, y1); 

    angle += (float) 360.0 /  (float) data.length;


This may help:

int time;
float angle;

void setup() 
  size(500, 500);
  //angle = TAU/360; // this is 1 deg
  angle = TAU/90; // this is 4 deg

void draw() 
  translate(width/2, height/2);
  rotate(time*angle); //Increase angle with each increment of time
  for(int rad = 0; rad<255; rad++) //Think of each step along radius as frequency
    // if each frequency has an amplitude in an array you can use that for color!
    //float col = 128;
    int col = int(128 + 128*cos(rad*TAU/255)); // This was just for fun!
    stroke(255 - col, 255-col, 0);
    point(rad, 0); 
  time++; //time increases with each frame
  if (time >= 90) noLoop();

I will leave the rest with you!
Lots of good resources here at the website!



Thanks!! I kinda have created something that I wanted so thank you for your help :slight_smile:


The above was not clear to me.

A spectrogram (from Wikipedia) is:

A common format is a graph with two geometric dimensions: one axis represents time, and the other axis represents frequency; a third dimension indicating the amplitude of a particular frequency at a particular time is represented by the intensity or color of each point in the image.

When doing a polar plot\sweep the radius is the frequency, the angle sweeps with the passage of time and the amplitude of a particular frequency can be represented with a color.


1 Like

Hi, can you share the code if you make it a circular spectrogram like this Musical spectrum analysis on Vimeo
pls share code so i can also have look thx


Welcome to the community!

I will not be sharing the code I wrote other than what is in the posted topics.

I wrote these from scratch each time I was asked about it by adding a few lines of code to the existing sound examples.

See this topic also:

Try doing it on your own… it is much more rewarding.

Please read the guidelines: