# Xiaoying Meng -Final Project

``````//Xiaoying Meng
//Section B
//xiaoyinm@andrew.cmu.edu
//final project

var soulmate;//song
var fft;
var w;//width for fft visual
var play = false;
var amp;
var vol = [];

}
function setup() {
createCanvas(256,256);
fft = new p5.FFT(0,64);
w = width/64;//divide amp visual width
amp = new p5.Amplitude();
}

function draw(){
background(255,196,8);
noStroke();
//fft visual
var spectrum = fft.analyze();
for (var i=0; i < spectrum.length; i++){
var amp2 = spectrum[i];
var y = map(amp2,0,256,height,0);//map fft to canvas height
//draw rectangles for visual
fill(255,255,255,200);
rect(i*w,y-6,w-1,height - y);//rectangles showing different frequencies
ellipse(random(0,260),y,2,2);//randomly placed dots for filter effect
}

//amp visual
push();
var singlevol = amp. getLevel(); //add single volume to array
vol.push(singlevol);
stroke(255);
noFill();
for (var i=0; i < vol.length; i++){
var m = map(vol[i],0,1,height,0);// map volume to canvas
}
pop();
if(vol.length > width-50){
vol.splice(0,1);
}
//d circle degree
for(var d=0;d<=360; d+=2){

x1=200+m*cos(d);
y1=150+m*sin(d);
x2=200+(m+40)*cos(d+50);
y2=150+(m+40)*sin(d+50);
x3=200+(m+80)*cos(d+10);
y3=150+(m+80)*sin(d+10);
x4=200+(m+120)*cos(d+50);
y4=150+(m+120)*sin(d+50);

strokeWeight(0.3);
stroke(255);
//line between 1st and 2nd cimcle
line(x2,y2,x1,y1);
//line between 3rd and 1st, 2nd circle
line(x2,y2,x3,y3);
line(x1,y1,x3,y3);

//line between 4th circle and 1st, 2nd, 3rd circle
line(x3,y3,x4,y4);
line(x2,y2,x4,y4);
line(x1,y1,x4,y4);
}
//distinguish larger amplitude sounds with ellipse
if (singlevol>0.1){
ellipse(200,150,120,120);
noFill();
stroke(255);
strokeWeight(2);
ellipse(200,150,130,130);
}
drawButton(); //drawing button
}

function drawButton(){
//changing between rectangle and triangle
noStroke();
fill(255);
if (play === true){
rect(10,height-26,20,20);
}else{
triangle(10,height-26,30,height-16,10,height-6);
}
}

function mousePressed(){
//playing and pausing
if(mouseX>10 & mouseX <30 && mouseY > height-26 && mouseY < height-6 ){
if(play){
soulmate.pause();
}else{
soulmate.play();
}
play =! play;
}
}``````

I wanted to create sound visualization since we did not do much of this. My final project tries to connect music to visual and express a mood and atmosphere. I always feel cheerful when I listen to this song, Soulmate by Zico. Therefore I used yellow for the visuals. The visuals are created by analyzing the song’s frequency and amplitude. Simply click the play button to enjoy the music.