Adding color to a spectrogram and making it round

Processing Libraries
1

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 = 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();
}
2 Likes
2

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.

5 Likes
3

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/

3 Likes
4

Hello,

Related post:

I did this with the Processing sound library.

:)

5

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:

image
image502Ă—527 95.5 KB

Keep at it!

:)

2 Likes
6

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:

2 Likes
7

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
}
//
3 Likes
8

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

:)

image
image502Ă—527 109 KB

2 Likes
9

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

3 Likes
10

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
11

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

12

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.

Please read the guidelines:

:)