Xiaoying Meng -Final Project

sketch

//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 = [];

//load song
function preload(){
    soulmate = loadSound('https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2018/12/01-SoulMate-feat.-IU-online-audio-converter.com_.mp3');
}
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.