 # Adding color to a spectrogram and making it round

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. Does somebody know how?

Thanks!

``````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.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();
}

``````
1 Like

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.

3 Likes

making it round ?

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

see tutorials | trig: https://www.processing.org/tutorials/trig/

1 Like

Hello,

Related post:

I did this with the Processing sound library.

`:)`

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:

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

Output:

Keep at it!

`:)`

1 Like

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! 2 Likes

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() {
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
}
//

``````
1 Like

This may help:

``````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);
{
// 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);
}

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

`:)`

1 Like

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

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

Hello,

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.

`:)`