Assignment 01

Self Portrait

/* Samantha Ho
Section E 
sch1@andrew.cmu.edu
Assignment-01*/



function setup() {
    createCanvas(800, 600);
    background(220, 255, 254);


    /*hair shadow*/
    fill(81, 54, 54);
    noStroke();
    ellipse(380, 260, 190, 200);
    fill(81, 54, 54);
    noStroke();
    ellipse(366, 244, 190, 200);
    fill(81, 54, 54);
    noStroke();
    ellipse(398, 370, 190, 400);

    /*chest*/
    fill(245, 184, 161);
    noStroke();
    beginShape();
    vertex(200, 400);
    vertex(540, 400);
    vertex(430, 600);
    vertex(300, 600);
    endShape(CLOSE);

    fill(245, 184, 161);
    noStroke();
    beginShape();
    vertex(345, 300);
    vertex(408, 300);
    vertex(430, 600);
    vertex(300, 600);
    endShape(CLOSE);
    /*right shirt*/
    fill(220, 0, 0);
    noStroke();
    beginShape();
    vertex(420, 360);
    vertex(540, 400);
    vertex(430, 600);
    vertex(300, 600);
    endShape(CLOSE);
    /*left shirt*/
    fill(250, 0, 0);
    noStroke();
    beginShape();
    vertex(330, 360);
    vertex(200, 400);
    vertex(280, 600);
    vertex(400, 600);
    endShape(CLOSE);


    /*chin shadow*/
    fill(208, 131, 99);
    noStroke();
    ellipse(370, 300, 100, 160);

    /*head shadow*/
    fill(208, 131, 99);
    noStroke();
    ellipse(366, 260, 180, 200);

    /*head*/
    fill(247, 194, 171);
    noStroke();
    ellipse(366, 260, 160, 200);

    /*hair*/
    fill(81, 54, 54);
    noStroke();
    arc(366, 200, 160, 80, PI, PI + PI, OPEN);
    arc(386, 200, 140, 230, 0, QUARTER_PI);


    /*lips*/
    fill(234, 163, 169);
    ellipse(364, 330, 10, 10);
    ellipse(370, 330, 10, 10);
    /*right hand top*/
    fill(247, 194, 171);
    noStroke();
    beginShape();
    vertex(450, 244);
    vertex(460, 240);
    vertex(480, 280);
    vertex(460, 280);
    endShape(CLOSE);
    /*left hand top*/
    fill(247, 194, 171);
    noStroke();
    beginShape();
    vertex(280, 244);
    vertex(270, 240);
    vertex(250, 280);
    vertex(270, 280);
    endShape(CLOSE);
    /*right hand bottom*/
    fill(247, 194, 171);
    noStroke();
    beginShape();
    vertex(430, 344);
    vertex(466, 380);
    vertex(480, 280);
    vertex(460, 280);
    endShape(CLOSE);
    /*left hand bottom*/
    fill(247, 194, 171);
    noStroke();
    beginShape();
    vertex(316, 350);
    vertex(270, 350);
    vertex(250, 280);
    vertex(270, 280);
    endShape(CLOSE);


    /*right arm*/
    fill(250, 0, 0);
    noStroke();
    beginShape();
    vertex(430, 356);
    vertex(480, 340);
    vertex(540, 580);
    vertex(460, 580);
    endShape(CLOSE);
    /*left arm*/
    fill(220, 0, 0);
    noStroke();
    beginShape();
    vertex(320, 350);
    vertex(260, 340);
    vertex(220, 580);
    vertex(300, 580);
    endShape(CLOSE);

    /*right sunglasses*/
    fill(210, 252, 255);
    noStroke();
    beginShape();
    vertex(384, 290);
    vertex(380, 260);
    vertex(450, 250);
    vertex(440, 286);
    endShape(CLOSE);
    /* left sunglasses*/
    colorMode(RGB, 210, 252, 255, 4);
    noStroke();
    beginShape();
    vertex(354, 290);
    vertex(356, 260);
    vertex(280, 250);
    vertex(292, 286);
    endShape(CLOSE);
    /*glasses bridge*/
    fill(210, 252, 255);
    noStroke(0);
    rect(344, 266, 50, 2);



}

function draw() {

}

I had alot of fun with this assignment and enjoyed how satisfying it was to see each shape come together. I ended up using alot of quadrilaterals to make certain shapes and found it rather challenging to orient myself. Addditionally, I tried to add a css animation in the background for no reason other than me thinking it would look cool; However, after a significant amount of troubleshooting I had to relent. I couldn’t quite get the css to move behind the javascript so I’m excited to revisit this problem in the future.