// Kathy Lee
//Section D

// Variable Setup
var faceHeight = 200;
var faceWidth = 200;
var shirt = 200;
var eye = 50;
var mouth = 50;

// Color Variables
var r = 50;
var g = 50;
var b = 50;

// mouthsize, hair length, eyesize

function setup() {
    createCanvas(640, 480);
    text("Smiling Alien", 10, 15);
}

function draw() {
    background (220);
    noStroke();

    // Shirt
    fill(200 - r, 200 - g, 200 - b);
    ellipse((width / 2), (height / 2) + 200, shirt + 100, shirt * 1.5);

    // Face
    fill(r + 50, g + 50, b + 50);
    ellipse(width / 2, (height / 2) + 50, faceWidth, faceHeight);

    // Eyes
    fill(r + 150, g + 150, b + 150);
    ellipse((width / 2.5) + 25, height / 2, faceWidth - 150, eye); // left eye
    fill(r + 150, g + 150, b + 150);
    ellipse((width / 2) + 40, height / 2, faceWidth - 150, eye); // right eye
    fill("black");
    ellipse((width / 2.5) + 20, height / 2, faceWidth - 200, eye - 30); // left pupil
    fill("black")
    ellipse((width / 2.5) + 110, height / 2, faceWidth - 200, eye - 30); // right pupil
    
    // Mouth
    fill(r + 175, g + 175, b + 175);
    ellipse(width / 2, (height / 2) + 75, mouth + 50, mouth / 2);
    fill(r + 50, g + 50, b + 50);
    ellipse(width / 2, (height / 2) + 70, mouth + 50, mouth / 2); // top ellipse to make smiling mouth

}

function mousePressed() {
    faceWidth = random(150, 300);
    faceHeight = random(150, 300);
    shirt = random(200, 300);
    eye = random(50, 60);
    mouth = random(50, 150);
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
}

The most challenging part of this project was figuring out which new components go on which coordinates (this part took quite a lot of trial and error).

// Kathy Lee, Section D

function setup() {
    createCanvas(500, 500);
    background(230);
    text("My Self Portrait", 10, 15);
}

function draw() {
    //my hair
    fill(0);
    ellipse(250, 245, 200, 270);
    fill(0);
    rect(152, 220, 75, 200);
    fill(0);
    rect(273, 220, 75, 200);
    
    //face
    fill(223, 172, 107);
    ellipse(275-25, 275-25, 150, 225);
    
    //neck
    fill(223, 172, 107);
    rect(200+12.5, 300, 75, 125);
    fill(223, 172, 107);
    ellipse()

    //my rectangular shirt
    noStroke()
    fill(255);
    rect(100, 400, 300, 300, 50);

    //front hair that flows down past the shirt
    fill(0);
    rect(151, 375, 62, 100);
    fill(0);
    rect(287, 375, 62, 100);

    //eyes
    fill(0);
    ellipse(223, 220, 30, 20); // left eye (full pupil)
    fill(0);
    ellipse(277, 220, 30, 20); // right eye (full pupil)
    fill(223, 172, 107);
    ellipse(223, 225, 30, 20); // left eye skin tone
    fill(223, 172, 107);
    ellipse(277, 225, 30, 20); // right eye skin tone 

    //nose
    fill(208, 161, 101);
    triangle(250, 250, 230, 280, 270, 280);

    //mouth
    fill(203, 117, 100);
    ellipse(250, 300, 50, 25); // pink lip color
    fill(223, 172, 107);
    ellipse(250, 290, 50, 20); // skin tone to highlight smiling mouth

    //ears
    fill(223, 172, 107);
    ellipse(180, 250, 40, 50); // left ear
    fill(15, 126, 47);
    ellipse(170, 275, 15, 15); // earring
    fill(223, 172, 107);
    ellipse(320, 250, 40, 50); // right ear
    fill(15, 126, 47);
    ellipse(330, 275, 15, 15); // earring


    //eyebrows
    fill(208, 161, 101);
    rect(210,190, 30, 7); // left eyebrow
    // I wanted to make the eyebrows with lines and change the strokeweight but then all the shapes get outlined? 
    // Not sure exactly what's going on so I will stick to rectangles for now
    fill(208, 161, 101);
    rect(260, 190, 30, 7); // right eyebrow

}