Lingfan Jiang – Project 01 – Face – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

sketch
//Lingfan Jiang
//Section B
//lingfanj@andrew.cmu.edu
//Project-01


function setup() {
    createCanvas(600, 600);
    
}

function draw() {
    scale(0.6);
    background(35);


    fill(255);
    beginShape();
    vertex(433,43.9);
    vertex(423,80.9);
    vertex(411,121);
    vertex(409,167);
    vertex(449,201);
    vertex(443,216);
    vertex(401,244);
    vertex(417,288);
    vertex(392,321);
    vertex(434,344);
    vertex(416,362);
    vertex(387,358);
    vertex(367,355);
    vertex(348,394);
    vertex(367,396);
    vertex(337,441);
    vertex(322,497);
    vertex(302,552);
    vertex(320,590);
    vertex(344,604);
    vertex(368,616);
    vertex(407,626);
    vertex(445,629);
    vertex(436,637);
    vertex(408,647);
    vertex(362,629);
    vertex(331,610);
    vertex(312,613);
    vertex(286,628);
    vertex(297,599);
    vertex(258,587);
    vertex(239,617);
    vertex(248,642);
    vertex(204,658);
    vertex(178,698);
    vertex(204,733);
    vertex(236,756);
    vertex(283,773);
    vertex(313,793);
    vertex(353,789);
    vertex(398,788);
    vertex(425,764);
    vertex(451,739);
    vertex(458,718);
    vertex(484,684);
    vertex(499,666);
    vertex(507,642);
    vertex(525,617);
    vertex(514,625);
    vertex(526,606);
    vertex(534,591);
    vertex(540,634);
    vertex(530,683);
    vertex(518,724);
    vertex(488,768);
    vertex(469,792);
    vertex(436,815);
    vertex(431,850);
    vertex(419,866);
    vertex(387,910);
    vertex(368,914);
    vertex(364,910);
    vertex(325,930);
    vertex(268,941);
    vertex(217,926);
    vertex(161,912);
    vertex(114,883);
    vertex(82.4,851);
    vertex(48,804);
    vertex(20.3,764);
    vertex(1.22,726);
    vertex(0.476,695);
    vertex(2.12,647);
    vertex(8.55,603);
    vertex(23.4,572);
    vertex(37,544);
    vertex(51.7,503);
    vertex(81.7,458);
    vertex(73.5,435);
    vertex(70.4,383);
    vertex(94.4,330);
    vertex(133,286);
    vertex(182,290);
    vertex(215,241);
    vertex(239,190);
    vertex(236,137);
    vertex(183,115);
    vertex(135,82.8);
    vertex(86.8,49.9);
    vertex(36.5,20.8);
    vertex(20.1,1.46);
    vertex(78.3,1.46);
    vertex(137,1.46);
    vertex(195,1.46);
    vertex(254,1.46);
    vertex(312,2.74);
    vertex(371,2.53);
    vertex(429,1.46);
    vertex(488,1.46);
    vertex(483,32.9);
    vertex(433,43.9);
    endShape(); //main head

    beginShape();
    vertex(441,567);
    vertex(459,572);
    vertex(442,584);
    vertex(421,588);
    vertex(402,590);
    vertex(394,603);
    vertex(383,587);
    vertex(369,571);
    vertex(349,565);
    vertex(351,546);
    vertex(362,561);
    vertex(362,548);
    vertex(364,530);
    vertex(382,521);
    vertex(391,523);
    vertex(411,529);
    vertex(399,541);
    vertex(417,551);
    vertex(420,558);
    vertex(426,577);
    vertex(441,567);
    endShape(); //left eye

    beginShape();
    vertex(667,1.46);
    vertex(713,1.46);
    vertex(747,14.6);
    vertex(753,57.8);
    vertex(758,97.7);
    vertex(762,112);
    vertex(774,109);
    vertex(773,71.6);
    vertex(780,31.5);
    vertex(778,4.74);
    vertex(809,2.63);
    vertex(856,2.43);
    vertex(901,9.2);
    vertex(915,5.3);
    vertex(948,9.72);
    vertex(923,30.5);
    vertex(915,35.8);
    vertex(889,55.6);
    vertex(930,33.1);
    vertex(958,6.15);
    vertex(987,2.46);
    vertex(966,21.8);
    vertex(924,43.7);
    vertex(882,64.7);
    vertex(839,84.2);
    vertex(798,106);
    vertex(758,130);
    vertex(750,129);
    vertex(748,86.5);
    vertex(735,66.2);
    vertex(741,87);
    vertex(747,112);
    vertex(731,148);
    vertex(717,148);
    vertex(686,169);
    vertex(640,177);
    vertex(681,157);
    vertex(714,125);
    vertex(704,81.6);
    vertex(691,36.4);
    vertex(667,1.46);
    endShape(); //clothing detail

    beginShape();
    vertex(566,469);
    vertex(574,469);
    vertex(582,481);
    vertex(593,491);
    vertex(591,507);
    vertex(581,519);
    vertex(566,522);
    vertex(558,514);
    vertex(566,500);
    vertex(570,485);
    vertex(566,469);
    endShape(); //ear detail

    beginShape();
    vertex(380,437);
    vertex(373,435);
    vertex(366,431);
    vertex(361,426);
    vertex(368,422);
    vertex(376,419);
    vertex(383,421);
    vertex(391,423);
    vertex(394,429);
    vertex(388,435);
    vertex(380,437);
    endShape(); //nose detail

    var c = color(99, 99, 99); 
    fill(c); 
    noStroke();
    beginShape();
    vertex(165,477);
    vertex(148,468);
    vertex(152,489);
    vertex(165,505);
    vertex(178,519);
    vertex(176,535);
    vertex(195,530);
    vertex(216,526);
    vertex(235,535);
    vertex(246,520);
    vertex(228,524);
    vertex(236,514);
    vertex(246,499);
    vertex(239,481);
    vertex(231,476);
    vertex(212,468);
    vertex(214,485);
    vertex(193,480);
    vertex(186,483);
    vertex(169,494);
    vertex(165,477);
    endShape(); // right eye

    //details
    var c = color(255, 204, 0); 
    fill(c); 
    noStroke();
    triangle(375,560,380,555,380,548);

    var c = color(255, 150, 0); 
    fill(c); 
    noStroke();
    triangle(385,560,380,555,380,548);

    noFill();
    stroke(255, 108, 0);
    arc(385, 557, 10, 10, 0, PI);

    fill(255, 255, 255);
    noStroke();
    quad(200,510,205,516,210,510,205,504);

    stroke(0,0,0);
    strokeWeight(2);
    line(875,35,800,75);

    point(825,42);

    fill(255, 255, 255);
    noStroke();
    ellipse(220,500,5,5);

    fill(0, 0, 0);
    noStroke();
    rect(810,25,3,3);

    noLoop();
    

}
In this project, I decided to incorporate my knowledge from some architecture software. It is quite satisfying to see it worked in the end. However, the only problem is that different from Mathematica axis, the Y axis goes in different directions in Java script. In the end, my face is upside-down, but I guess it makes it special too. Overall, it is very interesting to finish this project cross-discipline!
Leave a Reply Cancel reply
