Lauren Park – Final Project

sketch

//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.