# Adding color to a spectrogram and making it round

**URL:** <https://discourse.processing.org/t/adding-color-to-a-spectrogram-and-making-it-round/26138>\
**Category:** Libraries\
**Tags:** homework\
**Created:** [December 11, 2020, 1:33pm UTC](https://discourse.processing.org/t/adding-color-to-a-spectrogram-and-making-it-round/26138 "2020-12-11T13:33:21Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![mkok](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@mkok](https://discourse.processing.org/u/mkok)\
**Post date:** [December 11, 2020, 1:33pm UTC](https://discourse.processing.org/t/adding-color-to-a-spectrogram-and-making-it-round/26138/1 "2020-12-11T13:33:21Z")

</div>

Hai,

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 -\> [https://vimeo.com/27135957](https://vimeo.com/27135957). Does somebody know how?

Thanks!

```auto
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");
  song.play();

  fft = new FFT(song.bufferSize(), song.sampleRate());
  fft.window(FFT.HAMMING);
  frameRate(40);

}

void draw()
{
  background(0);
  stroke(255);

  // perform a forward FFT on the samples in the input buffer
  fft.forward(song.mix);

  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++) {
      stroke(sgram[j][i+leftedge]);
      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++) {
      stroke(sgram[j][i]);
      point(i+colmax-leftedge, height-j*sin(height/2));
    }
  }
}

void stop()
{

  song.close();
  minim.stop();

  super.stop();
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [December 11, 2020, 11:26pm UTC](https://discourse.processing.org/t/adding-color-to-a-spectrogram-and-making-it-round/26138/2 "2020-12-11T23:26:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 11, 2020, 11:52pm UTC](https://discourse.processing.org/t/adding-color-to-a-spectrogram-and-making-it-round/26138/3 "2020-12-11T23:52:57Z")

</div>

making it round ?

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

the amplitude the radius

see tutorials | trig: [https://www.processing.org/tutorials/trig/](https://www.processing.org/tutorials/trig/)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 12, 2020, 4:52pm UTC](https://discourse.processing.org/t/adding-color-to-a-spectrogram-and-making-it-round/26138/4 "2020-12-12T16:52:15Z")

</div>

Hello,

Related post:

> [@Drawing a spectogram 2D (or 3D) from a recorded audio](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/20):
>
> Hello, 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…

I did this with the Processing sound library.

`:)`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 13, 2020, 12:11pm UTC](https://discourse.processing.org/t/adding-color-to-a-spectrogram-and-making-it-round/26138/5 "2020-12-13T12:11:18Z")

</div>

Hello,

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:

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

```

Output:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/05f952e88ee228b675727639fed50a4fa63a4f97.png)

Keep at it!

`:)`

---

<div class="post-metadata">

**Author:** ![mkok](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@mkok](https://discourse.processing.org/u/mkok)\
**Post date:** [December 13, 2020, 1:29pm UTC](https://discourse.processing.org/t/adding-color-to-a-spectrogram-and-making-it-round/26138/6 "2020-12-13T13:29:03Z")

</div>

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! 🙂

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 13, 2020, 3:09pm UTC](https://discourse.processing.org/t/adding-color-to-a-spectrogram-and-making-it-round/26138/7 "2020-12-13T15:09:15Z")

</div>

> [@mkok](#):
>
> what you mean by frequency (radius) vs time (angle)

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

No sound though…

```auto
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() {
  background(0);
  stroke(255); 
  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;
  }//for
}
//

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 13, 2020, 4:19pm UTC](https://discourse.processing.org/t/adding-color-to-a-spectrogram-and-making-it-round/26138/8 "2020-12-13T16:19:25Z")

</div>

> [@mkok](#):
>
> I do not really know what you mean by frequency (radius) vs time (angle).

This may help:

```auto
int time;
float angle;

void setup() 
  {
  size(500, 500);
  background(0);
  //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
  
  strokeWeight(3);
  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!
    
    //println(col);
    //stroke(col);   
    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 [processing.org](http://processing.org) website!

`:)`

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/25b09b57d7e2095e413b3f2d9e9542779ae323f8.png)

---

<div class="post-metadata">

**Author:** ![mkok](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@mkok](https://discourse.processing.org/u/mkok)\
**Post date:** [December 13, 2020, 5:42pm UTC](https://discourse.processing.org/t/adding-color-to-a-spectrogram-and-making-it-round/26138/9 "2020-12-13T17:42:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 16, 2020, 12:51am UTC](https://discourse.processing.org/t/adding-color-to-a-spectrogram-and-making-it-round/26138/10 "2020-12-16T00:51:39Z")

</div>

> [@Chrisir](#):
>
> making it round ?
> 
> the time (or frequency) on one axis is your angle
> 
> the amplitude the radius

The above was not clear to me.

A [spectrogram](https://en.wikipedia.org/wiki/Spectrogram) (from Wikipedia) is:

> A common format is a graph with two geometric dimensions: one axis represents [time](https://en.wikipedia.org/wiki/Time), and the other axis represents [frequency](https://en.wikipedia.org/wiki/Frequency); a third dimension indicating the [amplitude](https://en.wikipedia.org/wiki/Amplitude) of a particular frequency at a particular time is represented by the [intensity](https://en.wikipedia.org/wiki/Brightness) 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.

`:)`

---

<div class="post-metadata">

**Author:** ![nilog](https://avatars.discourse-cdn.com/v4/letter/n/a87d85/32.png) [@nilog](https://discourse.processing.org/u/nilog)\
**Post date:** [June 28, 2021, 11:15am UTC](https://discourse.processing.org/t/adding-color-to-a-spectrogram-and-making-it-round/26138/11 "2021-06-28T11:15:57Z")

</div>

Hi, can you share the code if you make it a circular spectrogram like this [Musical spectrum analysis on Vimeo](https://vimeo.com/27135957)  
pls share code so i can also have look thx

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 28, 2021, 12:59pm UTC](https://discourse.processing.org/t/adding-color-to-a-spectrogram-and-making-it-round/26138/12 "2021-06-28T12:59:40Z")

</div>

Hello,

Welcome to the community!

> [@nilog](#):
>
> pls share code so i can also have look thx

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:

> [@Drawing a spectogram 2D (or 3D) from a recorded audio](https://discourse.processing.org/t/drawing-a-spectogram-2d-or-3d-from-a-recorded-audio/25708/20):
>
> Hello, 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…

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

Please read the guidelines:

- [Processing FAQ - Frequently asked questions](https://discourse.processing.org/faq)
- [p5.js Community Statement](https://p5js.org/community/)
- [Guidelines - Asking Questions](https://discourse.processing.org/t/guidelines-asking-questions/2147/4)
- [Guidelines - Answering Questions](https://discourse.processing.org/t/guidelines-answering-questions/2145/1)

`:)`