Project 1 – Self Portrait

This is me. 100% real-to-life, unedited, me.

my-true-portrait
/* Lance Yarlott
   Section D */

function setup() {
    createCanvas(600, 600);
    background(0);
    text("p5.js vers 0.9.0 test.", 10, 15);

    licenseAgreement = false;
    lightsOn = false;
    eyeLocXL = (width / 2) - 90;
    eyeLocXR = (width / 2) + 90;
    eyeLocY = (height / 2) - 90;
}

// big sorry for magic numbers lol

function draw() {
    if (licenseAgreement === false) {
        background(0);
        textAlign(CENTER);
        fill(255);
        textSize(20);
        text("Do you agree to the EULA? Press any key to continue.", 300, 300);
        if (keyIsPressed === true) licenseAgreement = true;
    } else {
        if (mouseIsPressed) {
            if (mouseButton === LEFT) lightsOn = true;
            if (mouseButton === CENTER) lightsOn = false;
        }

        /* I tried to bound mX and mY with the circumference of the eye and 
        failed miserably because p5 calculates the angles in a weird way? */ 
        
        mX = mouseX + 1 < 600 ? mouseX + 1 : 600;
        mY = mouseY + 1 < 600 ? mouseY + 1 : 600;
        
        mX = ((mX / 600) * 36) - 18;
        mY = ((mY / 600) * 36) - 18;

        if (lightsOn) {
            background(255, 244, 176); // light yellow

            strokeWeight(2);
            stroke(0);

            fill(0, 255, 0); // green
            triangle(width / 2, height / 3 + 140, 0, 600, 600, 600);
            fill(0);
            text("i am trgl", width / 2, 500);

            fill(245, 205, 149); // sort of a tan-ish color
            ellipse(width / 2, height / 3, 360, 360); // head shape

            fill(255); // eye whites
            arc(eyeLocXL, eyeLocY, 80, 80, 
                0, PI + QUARTER_PI, CHORD); // taken from p5 ref site
            arc(eyeLocXR, eyeLocY, 80, 80, 
                -QUARTER_PI, PI, CHORD);

            fill(77, 54, 21); // irises
            ellipse(eyeLocXL + mX, eyeLocY + mY, 40, 40);
            ellipse(eyeLocXR + mX, eyeLocY + mY, 40, 40);

            fill(0); // pupils
            ellipse(eyeLocXL + mX, eyeLocY + mY, 20, 20);
            ellipse(eyeLocXR + mX, eyeLocY + mY, 20, 20);

            strokeWeight(40);
            stroke(245, 205, 149);
            noFill();
            ellipse(eyeLocXL, eyeLocY, 120, 120);
            ellipse(eyeLocXR, eyeLocY, 120, 120);
            strokeWeight(2);

            fill(245, 205, 149); // lids
            noStroke();
            arc(eyeLocXL, eyeLocY, 82, 82, 
                PI + QUARTER_PI, 0, CHORD);
            arc(eyeLocXR, eyeLocY, 82, 82, 
                PI, -QUARTER_PI, CHORD);

            fill(77, 54, 21);
            arc(width / 2, height / 3, 360, 360, -PI + QUARTER_PI, -QUARTER_PI);

            fill(0);
            triangle(width / 2, eyeLocY + 30, width / 2 - 25, eyeLocY + 80, 
                     width / 2 + 25, eyeLocY + 80);

            stroke(0);
            strokeWeight(10);
            line(eyeLocXL, height / 3 + 120, eyeLocXR, height / 3 + 120);
            strokeWeight(2);

        } else {
            background(0);
            textAlign(CENTER);
        fill(255);
        textSize(20);
        text("Click, friend.", 300, 300);

            fill(255); // eye whites
            ellipse(eyeLocXL, eyeLocY, 80, 80); 
            ellipse(eyeLocXR, eyeLocY, 80, 80);

            fill(0); // irises
            ellipse(eyeLocXL + mX, eyeLocY + mY, 40, 40);
            ellipse(eyeLocXR + mX, eyeLocY + mY, 40, 40);

            strokeWeight(40);
            stroke(0);
            noFill();
            ellipse(eyeLocXL, eyeLocY, 120, 120);
            ellipse(eyeLocXR, eyeLocY, 120, 120);
            strokeWeight(2);
        }
    }
}

One difficulty was trying to get the eye tracking working. JS calculates angles in an odd way, so moving in a circular motion was mostly impossible to get right for the time being.

Leave a Reply