Christopher Reyes – Project-01 – Self-Portrait (Face)

Christopher Reyes Project-01

/*
Christopher Reyes
creyes1@andrew.cmu.edu
Section D
Project-01
*/

function setup() {

    createCanvas(600, 600); //Sets canvas size
    background(240); //Sets background color to light grey
    angleMode(DEGREES);
    strokeWeight(15);

}

function draw() {

    noStroke();

    //Draws a blue ellipse
    fill(121, 178, 178);
    ellipse(418, 192, 277, 269);

    //Draws a tan circle
    fill(206, 167, 133);
    ellipse(218, 340, 381, 381);

    //Draws a brown ellipse and rotates it 10 degrees
    fill(68, 49, 38);
    push();
    translate(320, 400);
    rotate(10);
    ellipse(0, 0, 280, 112);
    pop();

    //Draws several black shapes
    fill(0);
    ellipse(251, 295, 79, 84);
    ellipse(430, 295, 79, 84);
    rect(303, 401, 50, 31, 4, 4, 25, 25);

    stroke(0);
    strokeCap(ROUND);
    noFill();

    //Black ellipse "ear," no fill, rotated 344 degrees
    push();
    translate(142, 306);
    rotate(344);
    ellipse(0, 0, 60, 116);
    pop();

    //Draws a black arc, hairline
    arc(248, 254, 560, 102, 270, 0);

    //Black arcs for head shape, with rotations
    push();
    translate(420, 200);
    rotate(-11);
    arc(0, 0, 564, 242, -180, 270)
    pop();

    push();
    translate(421, 209);
    rotate(-11);
    arc(0, 0, 300, 260, 270, 0);
    pop();

    push();
    translate(461, 351.5);
    rotate(-343);
    arc(0, 0, 50, 250, 270, 80);
    pop();

    push();
    translate(208, 380);
    rotate(15);
    arc(0, 0, 500, 100, 0, 90);
    pop();

    push();
    translate(198, 394);
    rotate(9);
    arc(0, 0, 50, 68, 90, 180);
    pop();

    //Draws a pair of green glasses
    stroke(28, 91, 40);
    rect(172, 284, 160, 100, 12, 12, 37, 37);
    rect(377, 284, 160, 100, 12, 12, 37, 37);
    arc(360, 305, 90, 10, 190, 340);

}

For the sake of planning, I created a mock-up of what the image would look like using Adobe Illustrator, referencing that image in order to recreate it in JavaScript. However, I was not expecting the standard rotate(); command to rotate an object around the origin rather than the object’s center. To work around this, I utilized push(); and pop();, essentially rotating the canvas itself for a particular object to get it to appear in the desired orientation.