Kai Zhang-Project-01-Face

kaiz1-project01

//Kai Zhang
//Section B
//kaiz1@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(600, 740);
    angleMode(DEGREES);
    background(80);
    text("Kai Zhang | Carnegie Mellon University", 10, 15);
}

function draw() {
    scale(0.75);
    fill(255);

    strokeWeight(5);
    stroke(180);
    point(20, 300); 
    point(40, 300);
    point(60, 300);
    point(80, 300);
    point(100, 300);
    point(120, 300);
    point(140, 300);
    point(160, 300);
    point(180, 300);
    point(200, 300);
    point(220, 300);
    point(240, 300);
    point(260, 300);
    point(280, 300);
    point(300, 300);


    strokeWeight(0);

    rect(0, 20, 800, 5);
    rect(0, 40, 800, 5);
    rect(0, 60, 800, 5);
    rect(0, 80, 800, 5);
    rect(0, 100, 800, 5);
    rect(0, 120, 800, 5);
    rect(0, 140, 800, 5);
    rect(0, 160, 800, 5);
    rect(0, 180, 800, 5);
    rect(0, 200, 800, 5);
    rect(0, 220, 800, 5);
    rect(0, 240, 800, 5);
    rect(0, 260, 800, 5);
    rect(0, 280, 800, 5);
    

    beginShape();
    curveVertex(800, 0);
    curveVertex(800, 0);
    curveVertex(350, 0);
    curveVertex(220, 50);
    curveVertex(193, 115);
    curveVertex(223, 177);
    curveVertex(272, 200);
    curveVertex(236, 259);
    curveVertex(223, 353);
    curveVertex(243, 436);
    //eyes

    curveVertex(183, 539);
    curveVertex(140, 606);
    curveVertex(197, 642);
    curveVertex(254, 652);
    //nose

    curveVertex(240, 717);
    curveVertex(287, 752);
    curveVertex(279, 780);
    curveVertex(285, 807);
    //mouse

    curveVertex(334, 825);
    curveVertex(359, 935);
    curveVertex(436, 950);
    curveVertex(640, 850);
    curveVertex(700, 830);
    curveVertex(740, 1000);
    curveVertex(800, 1000);
    curveVertex(800, 1000);
    //chin

    endShape();


    push()
    fill(78, 84, 205);
    stroke(78, 84, 205);
    translate(250, 460);
    rotate(-8);
    ellipse(0, 0, 60, 210);
    
    strokeWeight(10);
    line(0, 0, 500, 0);

    fill(255);
    strokeWeight(0);
    ellipse(500, 25, 100);

    
    translate(0, 40);
    fill(255);
    strokeWeight(2);
    stroke(160);
    arc(500, 150, 20, 20, 0, 270)
    fill(160);
    triangle(500, 150, 510,190, 490, 180);
    pop()


    noFill()
    stroke(0)
    strokeWeight(3)
    quad(20, 20, 780, 20, 780, 980, 20, 980)
    quad(30, 30, 740, 60, 700, 900, 60, 940)
    quad(40, 40, 700, 100, 620, 820, 100, 900)
}

When I tried to create the portrait of myself, instead of clustering a bunch of simple geometries for it, I was rather fascinated by the ability of Java Script that makes it possible to use curves as an visual representation. As the first step, I used the curve commend to outline the contour of my face from the side. Then I used several other primatives, including rectangles, quads, arc, dots, ellipses, triangles, words, etc., for the decoration of the imagery, so it looks even like a magazine.