Project 1 Jonathan Perez

sketch

function setup() {
    createCanvas(600, 600);
    background(164, 230, 239);

//background texture
    //corner squares
    stroke(255);
    fill(164, 230, 239);
    rect(0, 0, 120, 120);
    rect(width - 120, 0, 120, 120);
    rect(width - 120, height - 120, 120, 120);
    rect(0, height - 120, 120, 120);

    //grid around head
    rect(width/2 - 120, height/2 - 120, 240, 240);
    line(0, height/2 - 120, 600, height/2 - 120);
    line(0, height/2 + 120, 600, height/2 + 120);
    line(width/2 - 120, 0, width/2 - 120, 600);
    line(width/2 + 120, 0, width/2 + 120, 600);

    //Triangle strips
    beginShape(TRIANGLE_STRIP); //upper
    vertex(width/2 - 120, 0);
    vertex(width/2 - 100, height/2 - 120);
    vertex(width/2 - 80, 0);
    vertex(width/2 - 60, height/2 - 120);
    vertex(width/2 - 40, 0);
    vertex(width/2 - 20, height/2 - 120);
    vertex(width/2, 0);
    vertex(width/2 + 20, height/2 - 120);
    vertex(width/2 + 40, 0);
    vertex(width/2 + 60, height/2 - 120);
    vertex(width/2 + 80, 0);
    vertex(width/2 + 100, height/2 - 120);
    vertex(width/2 + 120, 0);
    endShape();

    beginShape(TRIANGLE_STRIP); //right
    vertex(600, height/2 - 120);
    vertex(width/2 + 120, height/2 - 100);
    vertex(600, height/2 - 80);
    vertex(width/2 + 120, height/2 - 60);
    vertex(600, height/2 - 40);
    vertex(width/2 + 120, height/2 - 20);
    vertex(600, height/2 - 0);
    vertex(width/2 + 120, height/2 + 20);
    vertex(600, height/2 + 40);
    vertex(width/2 + 120, height/2 + 60);
    vertex(600, height/2 + 80);
    vertex(width/2 + 120, height/2 + 100);
    vertex(600, height/2 + 120);
    endShape();

    //bottom
    beginShape(TRIANGLE_STRIP);
    vertex(width/2 - 120, 600);
    vertex(width/2 - 100, height/2 + 120);
    vertex(width/2 - 80, 600);
    vertex(width/2 - 60, height/2 + 120);
    vertex(width/2 - 40, 600);
    vertex(width/2 - 20, height/2 + 120);
    vertex(width/2, 600);
    vertex(width/2 + 20, height/2 + 120);
    vertex(width/2 + 40, 600);
    vertex(width/2 + 60, height/2 + 120);
    vertex(width/2 + 80, 600);
    vertex(width/2 + 100, height/2 + 120);
    vertex(width/2 + 120, 600);
    endShape();

    beginShape(TRIANGLE_STRIP); //left
    vertex(0, height/2 - 120);
    vertex(width/2 -120, height/2 - 100);
    vertex(0, height/2 - 80);
    vertex(width/2 -120, height/2 - 60);
    vertex(0, height/2 - 40);
    vertex(width/2 -120, height/2 - 20);
    vertex(0, height/2 - 0);
    vertex(width/2 -120, height/2 + 20);
    vertex(0, height/2 + 40);
    vertex(width/2 -120, height/2 + 60);
    vertex(0, height/2 + 80);
    vertex(width/2 -120, height/2 + 100);
    vertex(0, height/2 + 120);
    endShape();


    //triangles
    /*stroke(255);
    fill(164, 230, 239);
    beginShape(TRIANGLE_STRIP);
    vertex(0, 0);
    vertex(100, 100);
    vertex(200, 0);
    vertex(300, 300);
    vertex(400, 0);
    vertex(500, 500);
    vertex(600, 0);
    vertex(600, 600);
    endShape();*/

    //beginShape() // square around head
}

function draw() {
    
    //hair section (underneath head graphic)
    stroke(0)
    fill(210);
    quad(297, 280, 377, 280, 357, 350, 307, 385); // hair grey section
    fill(0);
    rect(232, 206, 10, 20);

    //head
    stroke(0)
    fill(255, 220, 200);
    ellipse(267, 310, 130, 200);

    //hair (over head graphic)
    noStroke();
     fill(210);
    rect(297, 290, 50, 20); // grey section
    triangle(297, 310, 307, 310, 297, 330); // sideburns
    fill(0);
    quad(237, 205, 367, 220, 417, 295, 287, 290); //top black section

    //face details
    fill(255, 220, 200);
    ellipse(327, 320, 32, 52); //ear
    stroke(0)
    arc(327, 320, 32, 52, 5*PI/4, PI/2); //partial ear outline
    strokeWeight(2);
    line(237, 360, 211, 360); //mouth horizontal
    arc(247, 360, 20, 20, 4*PI/6, 8*PI/6); // mouth side
    fill(0)
    ellipse(random(-3, 3) + 242, random(-3, 3) + 290, 20, 20); //crazy eye
    noStroke()
    fill(254, 118, 145);
    ellipse(267, 330, 30, 30); //cheek blush

//coffee mugs
    //top left
    stroke(0);
    fill(255);
    ellipse(75, 60, 40, 40); //handle
    fill(164, 230, 239);
    ellipse(75, 60, 30, 30); //cut-out handle
    fill(255);
    rect(30, 30, 50, 60, 8, 8, 5, 5); //mug 
    fill(0);   
    ellipse(55, 37, 40, 5); //coffee

    //top right
    stroke(0);
    fill(255);
    ellipse(width - 45, 60, 40, 40); //handle
    fill(164, 230, 239);
    ellipse(width - 45, 60, 30, 30); //cut-out handle
    fill(255);
    rect(width - 90, 30, 50, 60, 8, 8, 5, 5); //mug 
    fill(0);   
    ellipse(width - 65, 37, 40, 5); //coffee

    //bottom right
    stroke(0);
    fill(255);
    ellipse(width - 45, height - 60, 40, 40); //handle
    fill(164, 230, 239);
    ellipse(width - 45, height - 60, 30, 30); //cut-out handle
    fill(255);
    rect(width - 90, height - 90, 50, 60, 8, 8, 5, 5); //mug 
    fill(0);   
    ellipse(width - 65, height - 83, 40, 5); //coffee

    //bottom left
    stroke(0);
    fill(255);
    ellipse(75, height - 60, 40, 40); //handle
    fill(164, 230, 239);
    ellipse(75, height - 60, 30, 30); //cut-out handle
    fill(255);
    rect(30, height - 90, 50, 60, 8, 8, 5, 5); //mug 
    fill(0);   
    ellipse(55, height - 83, 40, 5); //coffee



}

I have to say, creating this self portrait was so much fun. With my limited knowledge of p5js, I was forced to experiment with a totally different art style than I am accustomed to. Despite this literally being constricting, I found it freeing.

I wanted to do something particular to coding – something I couldn’t do with normal pencil in paper – so I centered my piece around the vibrating eye. Coincidentally, the vibrating eye linked quite well to one of my life passions: coffee.

I think I’ll call this “Portrait of the Coffee as a Young Man”.