We are about to switch to a new forum software. Until then we have removed the registration on this forum.
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();
}
Answers
TFGuy44, you're a scholar and a gentleman. Thank You!