# Creating Circular Spectrogram

**URL:** <https://discourse.processing.org/t/creating-circular-spectrogram/6502>\
**Category:** Libraries\
**Created:** [December 11, 2018, 3:44am UTC](https://discourse.processing.org/t/creating-circular-spectrogram/6502 "2018-12-11T03:44:45Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![formm\_666](https://avatars.discourse-cdn.com/v4/letter/f/c4cdca/32.png) [@formm\_666](https://discourse.processing.org/u/formm_666)\
**Post date:** [December 11, 2018, 3:44am UTC](https://discourse.processing.org/t/creating-circular-spectrogram/6502/1 "2018-12-11T03:44:45Z")

</div>

can anyone help point me in a direction on how this can be done

Example: [https://vimeo.com/27135957](https://vimeo.com/27135957)

Thanks in advance

---

<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, 2018, 6:03am UTC](https://discourse.processing.org/t/creating-circular-spectrogram/6502/2 "2018-12-11T06:03:58Z")

</div>

Here’s how I’d do it.

First, get the music playing. This will probably mean opening up a Minim library example, copying the code from it, and them making sure it plays the music file I want it to play. As a bonus perk, the example will probably draw the line of loudness at various frequencies that we’ll need - it’s the line at the bottom.

Then we’ll need an off-screen `PGraphics` object that will be all black to start with, and will fill with brighter points from left to right over time. Basically, one column of pixels for every, say, second of music? The brightness of a pixel in the column will depend of the loudness of the frequency that row represents.

Then just use the image of that `PGraphics` as a texture on many polygons that make an ever-increasing arc.

Should take a few hours. But that’s me.

What have you tried? Do you have any code yet? Can we see it? What works? What doesn’t?

---

<div class="post-metadata">

**Author:** ![formm\_666](https://avatars.discourse-cdn.com/v4/letter/f/c4cdca/32.png) [@formm\_666](https://discourse.processing.org/u/formm_666)\
**Post date:** [December 11, 2018, 8:40pm UTC](https://discourse.processing.org/t/creating-circular-spectrogram/6502/3 "2018-12-11T20:40:31Z")

</div>

Here is the sketch thus far… you will need to ad an audio file of your own titles “test.mp3” to test it.

```auto
import ddf.minim.analysis.*;
import ddf.minim.*;
 
Minim minim;
AudioPlayer song;
FFT fft;
int colmax = 500;
int rowmax = 256;
int[][] sgram = new int[rowmax][colmax];
int col;
int leftedge;

void setup()
{
  size(512, 256, P3D);
  textMode(SCREEN);
 
  minim = new Minim(this);
   song = minim.loadFile("test.mp3");
  song.play();
 
  fft = new FFT(song.bufferSize(), song.sampleRate());
  fft.window(FFT.HAMMING);
}
 
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*20*Math.log10(1000*fft.getBand(i))));
  }

  col = col + 1; 
 
  if (col == colmax) { col = 0; }
  
 
  for (int i = 0; i < colmax-leftedge; i++) {
    for (int j = 0; j < rowmax; j++) {
      stroke(sgram[j][i+leftedge]);
      point(i,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);
    }
  }
 
  leftedge = leftedge + 1; 

  if (leftedge == colmax) { leftedge = 0; }
}
 
 
void stop()
{
  
  song.close();
  minim.stop();
 
  super.stop();
}

```

---

<div class="post-metadata">

**Author:** ![inzn](https://avatars.discourse-cdn.com/v4/letter/i/e19adc/32.png) [@inzn](https://discourse.processing.org/u/inzn)\
**Post date:** [June 4, 2020, 3:36pm UTC](https://discourse.processing.org/t/creating-circular-spectrogram/6502/5 "2020-06-04T15:36:15Z")

</div>

Hey, here’s my code so far. Having trouble with the “fill with brighter points from left to right over time”-part and then of course the texturing. Would appreciate help very much!

```auto
import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;
import ddf.minim.signals.*;
import ddf.minim.spi.*;
import ddf.minim.ugens.*;

Minim minim;
AudioPlayer song;
FFT fft;
PGraphics pg;
PShape arc;

float deg = 90;
float rad = radians(deg);

void setup()
{
  size(1000, 1000);

  minim = new Minim(this);
  song = minim.loadFile("Anthology.mp3");
  song.play();

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

  pg = createGraphics(width, height);
}

void draw()
{
  background(0);
  fft.forward(song.mix);

  for (int i = 0; i < fft.specSize(); i++)
  {
    stroke(255);
    line(i, height, i, height - fft.getBand(i)*0.5);

    //Map Amplitude to 0 → 255, fill with points and color them
    float brightness = map(song.left.level(), -1, 1, 0, 255);
    pg.beginDraw();
    pg.endDraw();

    fill(255, 255, 0);
    noStroke();
    float evolution = radians(map(song.position(), 0, song.length(), 90, 450));
  
    texture(pg);
    arc(height/2, height/2, height-100, height-100, rad, evolution, PIE);
  }
}

```

---

<div class="post-metadata">

**Author:** ![inzn](https://avatars.discourse-cdn.com/v4/letter/i/e19adc/32.png) [@inzn](https://discourse.processing.org/u/inzn)\
**Post date:** [June 4, 2020, 4:08pm UTC](https://discourse.processing.org/t/creating-circular-spectrogram/6502/6 "2020-06-04T16:08:19Z")

</div>

Did you ever manage to recreate it?

---

<div class="post-metadata">

**Author:** ![doodlewhale](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/doodlewhale/32/12471_2.png) [@doodlewhale](https://discourse.processing.org/u/doodlewhale)\
**Post date:** [March 24, 2021, 5:02pm UTC](https://discourse.processing.org/t/creating-circular-spectrogram/6502/7 "2021-03-24T17:02:03Z")

</div>

Did this ever get anywhere? I am looking to do the same but struggling to find examples to work with.

---

<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:** [March 24, 2021, 5:22pm UTC](https://discourse.processing.org/t/creating-circular-spectrogram/6502/8 "2021-03-24T17:22:49Z")

</div>

Hello,

I shared my insights in this topic:

> [@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):
>
> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147) Hi Everybody, is there any code to do what in the object of the discussion? Thanks Best regards Roberto

`:)`