Project 1: My Self Portrait

var g = 15;
var b = 255;

function setup() {
  createCanvas(600, 700);
}

function draw() {
  // background
  g = map (mouseX, 0, 600, 0, 255);
  b = map (mouseX, 0, 600, 255, 0);
  background(0, g, b);
  
  //Hat
  noStroke();
  fill(100, 200, 230);
  circle(280, 200, 280);
    
  
  //Body
  strokeWeight(6);
  stroke(255, 255, 255);
  line(550, 300, 500, 300);
  line(500, 300, 460, 470);
  stroke(240, 224, 64);
  circle(550, 300, 20)
  
  stroke(255, 255, 255);
  strokeWeight(10);
  line(275, 424, 200, 600);
  line(200, 600, 155, 650);
  line(155, 650, 100, 700);
  line(100, 700, 460, 700);
  line(460, 700, 400, 550);
  line(400, 550, 510, 550);
  line(460, 470, 410, 470);
  line(410, 470, 350, 418);
  strokeWeight(12);
  line(510, 550, 460, 470);

  
  //Head
  stroke(255, 255, 255);
  strokeWeight(2);
  fill(255,242,230);
  circle(300, 300, 250);

  
  //Hair
  noFill();
  stroke(255, 255, 255);
  strokeWeight(10);
  fill(0, 0, 0);
  bezier(280, 170, 50, 200, 150, 50, 90, 600 );
  bezier (280, 170, 460, 330, 500, 200, 400, 100);
  strokeWeight(5);
  triangle(280, 170, 200, 350, 320, 200);
  
  
  //Eyebrow
  noFill();
  stroke(82, 71, 71);
  strokeWeight(3);
  bezier(350, 280, 360, 260, 400, 250, 415, 280)
  
  
  //Eye
  noStroke();
  fill(82, 71, 71);
  circle(383, 295, 50);
  fill(255, 255, 255);
  circle(380, 285, 20);
  circle(390, 305, 10);
  stroke(0, 0, 0);
  strokeWeight(1);
  bezier(361, 287, 350, 278, 347, 288, 340, 280);
  
  
  //Mouth
  noFill();
  stroke(0, 0, 0);
  strokeWeight(3);
  bezier(353, 350, 355, 360, 385, 365, 400, 353);
  noFill();
  stroke(245, 0, 0);
  //bezier(360, 353, 355, 355, 385, 360, 390, 355);
  
  
  //Face detail
  noStroke();
  fill(255, 204, 204);
  circle(300, 330, 55);
  stroke(94, 62, 34);
  strokeWeight(2);
  line(300, 330, 298, 335);
  line(310, 330, 307, 335);
  
  //Ear
  noFill();
  stroke(0, 0, 0);
  strokeWeight(4);
  bezier(240, 310, 170, 370, 245, 380, 230, 400);
  strokeWeight(2);
  bezier(240, 320, 230, 340, 220, 330, 240, 360);
  //Earring
  fill(240, 224, 64);
  strokeWeight(1);
  triangle(230, 400, 200, 430, 250, 430);
  fill(255, 255, 255);
  circle(230, 400, 20);
  
  //Dress
  stroke(0, 0, 0);
  rect(305, 600, 30, 40);
  rect(305, 530, 30, 40);
  rect(305, 460, 30, 40);
  fill(255, 0, 0);
  rect(313, 607, 15, 20);
  rect(313, 537, 15, 20);
  rect(313, 467, 15, 20);

  //Name
  stroke(240, 224, 64);
  strokeWeight(3);
  line (540, 645, 570, 645);
  stroke(255, 255, 255)
  strokeWeight(3)
  line (510, 700, 510, 660);
  line (510, 660, 490, 630);
  line (510, 660, 530, 630);
  line (540, 700, 540, 630);
  line (540, 630, 570, 630);
  line (540, 660, 570, 660);
  

}