#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Drawing a shape around a central point

edited August 2016

Hello all!

I'm currently trying to create a visualization for music using the p5.js example code for analyzing a frequency spectrum. The issue I'm running into is that I'd like to "bend" the frequency spectrum around a point in the center of my canvas, such that instead of a jagged line I instead have a jagged circle. I'm not quite sure where to begin to broach that subject. Here's what I have so far:

``````var fft;
var amplitude;
var song;

function preload(){
song = loadSound('../assets/PeopleWhoDied.mp3');
}

function setup() {

var myCanvas = createCanvas(1000,500);
myCanvas.parent('pleaseKillMeSketch');
background(200);

song.play();
fft = new p5.FFT();
fft.setInput(song);

amplitude = new p5.Amplitude();
amplitude.setInput(song);

}

function draw() {
fill(200, 20);
rect(0,0,width,height);
var spectrum = fft.analyze();
var volume = amplitude.getLevel();

beginShape();
for (i = 0; i<spectrum.length; i++) {
vertex(i, map(spectrum[i], 0, 255, 250, 0) );
translate(0,volume);
}
endShape();
}
``````
Tagged:

## Answers

• Answer ✓
``````float[] values = new float[360];

void setup(){
size(400,400);
for(int i=0;i<values.length;i++){
values[i] = random(-1,1);//map(i,0,360,-1,1);
}
}

void draw(){
background(0);
translate(width/2,height/2);
stroke(255);
for(int i=0;i<values.length;i++){
point(cos(radians(i))*(160+20*values[i]),sin(radians(i))*(160+20*values[i]));
}
}
``````
• TFGuy44, you're a scholar and a gentleman. Thank You!

Sign In or Register to comment.