//Lauren Park
//ljpark@andrew.cmu.edu
//Section D
//Final Project
//initialize sound variables
var love;
//load sound file
function preload(){
love = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jasmine.wav");
}
function setup() {
createCanvas(500, 400);
love.loop();
beat = new p5.Amplitude();
beat.setInput(love);
}
function draw() {
//abstract curves
frameRate(1.65);
background(50, 155, random(255), 140);
//create the vertices curves
var numCurvePoints = 10;
beginShape();
for (var i = 0; i < numCurvePoints; i++) {
curveVertex(random(30, width - 20), random(100, height - 10));
}
endShape();
stroke(random(215));
strokeWeight(0);
fill(254, 193, 255, 140);
var numCurvePoints = 12;
beginShape();
for (var i = 0; i < numCurvePoints; i++) {
curveVertex(random(30, width - 20), random(95, height - 20));
}
endShape();
//background lines
for (var row = 0; row <= width; row = row + 70) {
for (var col = 0; col <= height; col = col + 60) {
fill(80);
rect(random(row), random(col), 5, 45);
fill(200);
rect(random(row), random(col), 4, 30);
}
}
//hoodie fill colors
fill('#4BA680');
ellipse(231, 300, 90, 200);
ellipse(300, 305, 90, 200);
ellipse(270, 390, 195, 180);
ellipse(280, 265, 90, 100);
//back hair
fill('#8A4B21');
ellipse(223, 147, 30, 30);
ellipse(218, 160, 20, 30);
ellipse(220, 205, 25, 30);
ellipse(209, 227, 30, 31);
ellipse(210, 221, 20, 30);
strokeWeight(2);
stroke('#4D2A12');
fill('#8A4B21');
curve(230, 100, 210, 137, 209, 170, 230, 150);
curve(230, 100, 213, 190, 187, 270, 300, 400);
//hoodie collar
strokeWeight(3);
stroke('#316E55');
fill('#4BA680');
beginShape();
curveVertex(230, 215);
curveVertex(256, 222);
curveVertex(225, 209);
curveVertex(245, 231);
curveVertex(258, 191);
endShape();
//rightcollar
beginShape();
curveVertex(258, 171);
curveVertex(252, 221);
curveVertex(300, 205);
curveVertex(371, 215);
endShape();
//hoodie left arm
beginShape();
curveVertex(271, 215);
curveVertex(230, 218);
curveVertex(193, 250);
curveVertex(170, 400);
curveVertex(193, 250);
endShape();
//right arm
strokeWeight(3);
stroke('#316E55');
fill('#4BA680');
beginShape();
curveVertex(313, 223);
curveVertex(300, 230);
curveVertex(340, 250);
curveVertex(370, 400);
curveVertex(340, 250);
endShape();
//hood
beginShape();
curveVertex(205, 230);
curveVertex(300, 205);
curveVertex(333, 213);
curveVertex(335, 241);
curveVertex(300, 210);
endShape();
//inner arms shadow
curve(230, 280, 215, 275, 205, 400, 150, 540);
curve(320, 250, 310, 280, 325, 400, 280, 200);
//face
fill('#DAA67B');
strokeWeight(1.5);
stroke('#AD8361');
ellipse(250, 175, 80, 88);
//outer hair
noStroke();
fill('#8A4B21');
ellipse(285, 200, 30, 175);
ellipse(265, 167, 20, 40);
ellipse(270, 190, 20, 60);
ellipse(282, 280, 10, 30);
strokeWeight(2);
stroke('#4D2A12');
fill('#8A4B21');
beginShape();
curveVertex(250, 463);
curveVertex(290, 163);
curveVertex(305, 270);
curveVertex(280, 300);
curveVertex(303, 300);
endShape();
beginShape();
curveVertex(280, 300);
curveVertex(280, 300);
curveVertex(250, 146);
curveVertex(200, 346);
endShape();
//hat
fill(70);
stroke(0);
beginShape();
curveVertex(210, 137);
curveVertex(295, 163);
curveVertex(210, 137);
curveVertex(215, 125);
curveVertex(295, 163);
curveVertex(290, 147);
curveVertex(215, 125);
curveVertex(290, 147);
endShape();
beginShape();
curveVertex(220, 214);
curveVertex(215, 124);
curveVertex(290, 110);
curveVertex(296, 150);
curveVertex(296, 150);
endShape();
//heart beat to song
mood = beat.getLevel();
fill(0);
ellipse(260,300,25+mood*100, 30+mood*100);
ellipse(280,300,25+mood*100, 30+mood*100);
triangle(251, 309, 289, 309, 270, 330);
ellipse(255, 317+mood*100, 3, 15);
ellipse(277, 323+mood*100, 2, 12);
ellipse(263, 337+mood*100, 2, 12);
ellipse(281, 340+mood*100, 2, 14);
ellipse(269, 353+mood*100, 2, 17);
ellipse(261, 371+mood*100, 2, 17);
ellipse(278, 390+mood*100, 2, 20);
//ear
stroke('#AD8361');
fill('#DAA67B');
curve(230, 197, 275, 170, 277, 182, 210, 230);
curve(260, 197, 275, 170, 277, 182, 300, 250);
//earring
stroke(210);
curve(250, 87, 278, 178, 280, 179, 250, 230);
//hood string
noStroke();
fill(255);
ellipse(245, 254, 3, 40);
ellipse(247, 265, 4, 20);
stroke(200);
fill(255);
ellipse(247, 235, 4.5, 4.5);
curve(300, 180, 245, 235, 245, 275, 240, 300);
curve(200, 300, 245, 275, 250, 275, 250, 250);
curve(300, 180, 249.5, 235, 249.5, 275, 240, 300);
}
For this project, I really wanted to use a song file and have different elements and shapes move or change in rhythm to the song. I wanted to focus on the visuals and concept that also sync not only in beat but also in theme to the song. By incorporating this moody love song, I tried to capture the vibe of the music by creating a character and abstract forms in the background and by creating the dripping or bleeding black heart that beats to this song. For the color scheme and moving elements in the background, it is inspired by actual albums of the artists who sang this song. Overall, it was very challenging to properly load the sound and play around with the amplitude so that the heart beats, but it was a very fun piece that showcases some of my interests.