Category: Project-02-Variable-Face

sketch

var faceD = 150;
var cheekW = 35;
var cheekH = 20;
var LeftEarW = 110;
var LeftEarH = 150;
var RightEarW = 70;
var RightEarH = 100;
var R = 252;
var G = 200;
var B = 200;
var BubbleD = 40; // diameter of bubble
var x = 425; //point position of nose
var y = 130; //point position of nose
var eyeW = 10;
var eyeH = 10;
var Px = 240; //point position of line

function setup() {
    createCanvas(640, 480);
    angleMode(DEGREES);
}

function mousePressed() {
    faceD = random(150, 170);
    LeftEarW = random(100, 180);
    LeftEarH = random(145, 185);
    RightEarW = random(60, 140);
    RightEarH = random(95, 135);
    R = random(200, 255);
    G = random(100, 220);
    B = random(100, 220);
    BubbleD = random(20, 60);
    x = random(415, 475);
    y = random(110, 170);
    Px = random(240, 280);
    eyeW = random(10, 20);
    eyeH = random(10, 20);

}

function draw() {
    background(255, 236, 236);
    
    //body
    noStroke()
    fill(210);
    beginShape();
    curveVertex(200,  250);
    curveVertex(220,  260);
    curveVertex(175,  330);
    curveVertex(165, 400);
    curveVertex(300, 400);
    curveVertex(330, 240);
    curveVertex(350, 240);
    endShape();

    //body division
    stroke(50, 32, 32);
    strokeWeight(2);
    curve(240, 300, 240, 350, 290, 330, 300, 330);
    line(260, 345, Px, 400)

    //right ear
    push();
    rotate(10);
    noStroke();
    fill(210);
    ellipse(270, 120, RightEarW, RightEarH);
    fill(252, 225, 225);
    ellipse(270, 120, RightEarW/1.5, RightEarH/1.5); //inner ear
    pop();

    //Left ear
    noStroke();
    fill(210);
    ellipse(220, 210, LeftEarW, LeftEarH);
    fill(252, 225, 225);
    ellipse(220, 210, LeftEarW/1.5, LeftEarH/1.5); //inner ear

    //face
    noStroke();
    fill(210);
    ellipse(300, 220, faceD, faceD);

    //eye
    fill(50, 32, 32);
    ellipse(345, 220, eyeW, eyeH);

    //cheek
    fill(R - 20, G - 20, B - 50);
    ellipse(330, 250, cheekW, cheekH);
   

    //nose
    fill(210);
    beginShape();
    curveVertex(350, 200);
    curveVertex(355, 190);
    curveVertex(375, 180);
    curveVertex(x, y);
    curveVertex(x - 5, y +15);
    curveVertex(x - 5, y + 45);
    curveVertex(400, 195);
    curveVertex(390, 220);
    curveVertex(365, 255);
    curveVertex(365, 260);
    endShape();

    //bubble
    fill(R, G, B);
    ellipse(x + 25, y + 20, BubbleD, BubbleD); //large bubble
    fill(255);
    ellipse(x + 25, y + 20, BubbleD*.7, BubbleD*.7); //white part
    fill(R, G, B)
    ellipse(x + 22, y + 17, BubbleD*.7, BubbleD*.7); //to cut white part
}

I wanted to make an elephant whose ear size, nose length and cheek color changes. In this project I tried out the curveVertex function. It was very confusing at first but I gradually learned how it works.

my-sketch.js

var cheekWidth = 125
var cheekHeight = 125 
var leftEyeX = 285
var rightEyeX = 365
var leftEyeY = 170
var rightEyeY = 170
var toothHeight = 40

function setup() {
    createCanvas(640,480);
}
function draw() {
    background(255,217,223);
    noStroke();
    fill(139,69,19) //squirrel tail
    rect(345,150,200,325,90,10,95,0)    
    fill(153,102,51); //face and body color
    ellipse(320,200,200,200) //top head
    ellipse(320,280,160,190) //CHIN
    ellipse(260,275,cheekWidth,cheekHeight) //left cheek
    ellipse(380,275,cheekWidth,cheekHeight) //right cheek
    triangle(240,80,240,140,280,120) // left ear
    triangle(400,80,400,140,360,120) // right ear
    rect(250,335,140,225,10,10) //body
    fill(145,95,50) //color for feet
    ellipse(250,475,100,75) //left foot
    ellipse(385,475,100,75) //right foot
    ellipse(250,375,60,60) //left hand
    ellipse(385,375,60,60) //right hand

    fill(97,65,38) //acorn
    triangle(260,375,375,375,320,420)
    rect(310,355,20,20,5,5)
    fill(112,84,59)
    rect(260,365,115,15,10,10)

    //squirrel face
    fill(256);
    ellipse(280,180,65,65)
    ellipse(360,180,65,65) //white eyes
    fill(0);
    ellipse(285,180,55,60) //left color eye
    ellipse(365,180,55,60) //right color eye
    fill(256);
    ellipse(leftEyeX,leftEyeY,30,30) //left pupil
    ellipse(rightEyeX,rightEyeY,30,30) //right pupil
    fill(0) //nose
    ellipse(320,250,75,25) //round nose
    rect(315,250,10,40,5,5) //nose vertical line
    ellipse(320,290,125,5) //mouth
    fill(256) //teeth
    rect(290,292,29,toothHeight,5,5) //left tooth
    rect(320,292,29,toothHeight,5,5) //right tooth

}

function mousePressed() {
   
    cheekHeight = random(100,150);
    cheekWidth = random(100,150); //cheeks change
    leftEyeX = random(275,295) //now eyes change
    rightEyeX = random (355,375) 
    leftEyeY = random(170,190)
    rightEyeY = random(165,190)
    toothHeight =random(30,50)


}

I decided to use a squirrel for my variable-changing face project. To begin, I sketched out an idea of the main head and face onto notebook paper as shown here:

As I started coding, I got more confident with the axes and began to do a fast guess and check as my program got more detailed. I then chose to have the variables of the teeth, pupils, and cheeks change.

danakim_Project02

//Dana Kim
//danakim@andrew.cmu.edu
//Section D
//Project-02

//Background Colors
var b1= "#E87B3D";
var b2= "#F37C90";
var b3= 265;
var colors= [b1, b2, b3];

//Face colors
var fc1= "#AA723F";
var fc2= "#3A3A3A";
var facecolors= [fc1, fc2];

//eyes
var eyecolor1= "#A91E22";
var eyecolor2= "#2C1A0E";
var eyecolor3= "#FFFFFF";
var eyecolors= [eyecolor1, eyecolor2, eyecolor3];
var eyes= 1;
var eyetype= [1,2];

//ears; iec= interior ear color
var iec1= 0;
var iec2= "#FF8DB0";
var iec3= "#4C330F";
var intearcolors= [iec1, iec2, iec3];

//piercings
var pierce= 1;
var plocation= [1,2];

//Nose
var n1= "#1E1D1D";
var n2= "#70411B";
var nosecolor= [n1, n2];


function setup() {
    createCanvas(640, 480);
}

function draw() {
    //determines background color
    background(b3);

    //Head
    noStroke();
    fill(fc2);
    ellipse(315, 232, 278, 232);

    beginShape();
    curveVertex(401, 208);
    curveVertex(439, 225);
    curveVertex(458, 246);
    curveVertex(465, 267);
    curveVertex(466, 283);
    curveVertex(464, 304);
    curveVertex(457, 318);
    curveVertex(446, 334);
    curveVertex(440, 343);
    curveVertex(433, 352);
    curveVertex(423, 369);
    curveVertex(418, 381);
    curveVertex(410, 402);
    curveVertex(397, 419);
    curveVertex(377, 432);
    curveVertex(359, 438);
    curveVertex(327, 443);
    curveVertex(311, 442);
    curveVertex(288, 441);
    curveVertex(264, 435);
    curveVertex(241, 423);
    curveVertex(223, 401);
    curveVertex(217, 386);
    curveVertex(211, 371);
    curveVertex(196, 347);
    curveVertex(180, 329);
    curveVertex(172, 317);
    curveVertex(167, 295);
    curveVertex(167, 277);
    curveVertex(180, 244);
    curveVertex(207, 223);
    endShape(CLOSE);

    //Nose
    fill(n1);
    beginShape();
    curveVertex(318, 327);
    curveVertex(322, 327);
    curveVertex(330, 327);
    curveVertex(333, 327);
    curveVertex(337, 328);
    curveVertex(340, 329);
    curveVertex(344, 329);
    curveVertex(348, 331);
    curveVertex(354, 333);
    curveVertex(357, 335);
    curveVertex(360, 337);
    curveVertex(363, 338);
    curveVertex(367, 341);
    curveVertex(371, 344);
    curveVertex(374, 347);
    curveVertex(376, 350);
    curveVertex(383, 358);
    curveVertex(389, 364);
    curveVertex(392, 369);
    curveVertex(393, 371);
    curveVertex(396, 377);
    curveVertex(399, 383);
    curveVertex(401, 388);
    curveVertex(402, 392);
    curveVertex(403, 394);
    curveVertex(403, 401);
    curveVertex(404, 406);
    curveVertex(404, 409);
    curveVertex(402, 415);
    curveVertex(400, 418);
    curveVertex(395, 425);
    curveVertex(387, 431);
    curveVertex(380, 435);
    curveVertex(371, 438);
    curveVertex(359, 440);
    curveVertex(348, 441);
    curveVertex(335, 442);
    curveVertex(327, 442);
    curveVertex(316, 442);
    curveVertex(299, 441);
    curveVertex(285, 440);
    curveVertex(273, 439);
    curveVertex(264, 437);
    curveVertex(261, 435);
    curveVertex(255, 433);
    curveVertex(249, 430);
    curveVertex(243, 426);
    curveVertex(239, 423);
    curveVertex(233, 416);
    curveVertex(229, 409);
    curveVertex(227, 403);
    curveVertex(227, 395);
    curveVertex(228, 388);
    curveVertex(230, 379);
    curveVertex(235, 369);
    curveVertex(238, 364);
    curveVertex(243, 358);
    curveVertex(251, 351);
    curveVertex(261, 343);
    curveVertex(270, 339);
    curveVertex(383, 334);
    curveVertex(294, 331);
    curveVertex(301, 329);
    curveVertex(310, 327);
    endShape(CLOSE);

    //nostrils
    fill(0);
    //left nostril
    beginShape();
    curveVertex(302, 378);
    curveVertex(299, 381);
    curveVertex(290, 385);
    curveVertex(283, 386);
    curveVertex(276, 386);
    curveVertex(268, 384);
    curveVertex(263, 381);
    curveVertex(258, 375);
    curveVertex(256, 368);
    curveVertex(260, 360);
    curveVertex(267, 356);
    curveVertex(274, 359);
    curveVertex(278, 362);
    curveVertex(283, 367);
    curveVertex(288, 373);
    curveVertex(295, 376);
    endShape(CLOSE);
    //right nostril
    beginShape();
    curveVertex(336, 378);
    curveVertex(337, 377);
    curveVertex(340, 377);
    curveVertex(343, 376);
    curveVertex(346, 375);
    curveVertex(348, 374);
    curveVertex(350, 373);
    curveVertex(352, 371);
    curveVertex(354, 369);
    curveVertex(356, 366);
    curveVertex(357, 364);
    curveVertex(361, 361);
    curveVertex(364, 358);
    curveVertex(366, 357);
    curveVertex(367, 356);
    curveVertex(369, 356);
    curveVertex(371, 356);
    curveVertex(374, 357);
    curveVertex(375, 358);
    curveVertex(377, 359);
    curveVertex(378, 361);
    curveVertex(379, 362);
    curveVertex(381, 365);
    curveVertex(381, 366);
    curveVertex(381, 370);
    curveVertex(381, 373);
    curveVertex(380, 375);
    curveVertex(378, 377);
    curveVertex(376, 380);
    curveVertex(374, 381);
    curveVertex(372, 383);
    curveVertex(370, 384);
    curveVertex(366, 384);
    curveVertex(362, 386);
    curveVertex(358, 386);
    curveVertex(354, 386);
    curveVertex(349, 384);
    curveVertex(345, 384);
    curveVertex(342, 383);
    curveVertex(339, 381);
    endShape(CLOSE);

    //eyes
    fill(eyecolor1);
    //eyes1
    if(eyes == 1){
      //right eye
      ellipse(402, 296, 45, 45);
      //left eye
      ellipse(227, 297, 45, 45);
      //"eyebrows"
      stroke(eyecolor1);
      strokeWeight(6);
      line(374, 283, 432, 264);
      strokeWeight(6);
      line(256, 284, 198, 266);
    }
    //eyes2
    if(eyes == 2){
      //Left eye
      beginShape();
      curveVertex(261, 299);
      curveVertex(254, 297);
      curveVertex(247, 297);
      curveVertex(237, 301);
      curveVertex(229, 302);
      curveVertex(222, 300);
      curveVertex(217, 296);
      curveVertex(214, 290);
      curveVertex(213, 283);
      curveVertex(215, 277);
      curveVertex(219, 271);
      curveVertex(224, 267);
      curveVertex(231, 265);
      curveVertex(237, 264);
      curveVertex(243, 266);
      curveVertex(249, 270);
      curveVertex(254, 276);
      curveVertex(259, 286);
      curveVertex(261, 295);
      endShape(CLOSE);
      //right eye
      beginShape();
      curveVertex(370, 299);
      curveVertex(369, 294);
      curveVertex(372, 286);
      curveVertex(374, 280);
      curveVertex(376, 276);
      curveVertex(382, 270);
      curveVertex(388, 266);
      curveVertex(394, 265);
      curveVertex(399, 265);
      curveVertex(406, 267);
      curveVertex(412, 271);
      curveVertex(416, 276);
      curveVertex(418, 283);
      curveVertex(417, 290);
      curveVertex(413, 296);
      curveVertex(408, 300);
      curveVertex(402, 302);
      curveVertex(393, 301);
      curveVertex(384, 297);
      curveVertex(377, 297);
      endShape(CLOSE);
    }

      //horns
      fill(265);
      stroke(0);
      strokeWeight(5);
      //right horn
      beginShape();
      curveVertex(524, 29);
      curveVertex(532, 47);
      curveVertex(536, 70);
      curveVertex(535, 97);
      curveVertex(529, 117);
      curveVertex(519, 135);
      curveVertex(505, 150);
      curveVertex(475, 166);
      curveVertex(429, 184);
      curveVertex(420,185);
      curveVertex(412, 182);
      curveVertex(397, 169);
      curveVertex(384, 144);
      curveVertex(384, 130);
      curveVertex(391, 124);
      curveVertex(434, 125);
      curveVertex(464, 122);
      curveVertex(490, 115);
      curveVertex(506, 106);
      curveVertex(513, 98);
      curveVertex(517, 91);
      curveVertex(522, 67);
      curveVertex(522, 41);
      endShape(CLOSE);
      //left horn
      beginShape();
      curveVertex(104, 33);
      curveVertex(106, 47);
      curveVertex(107, 76);
      curveVertex(115, 101);
      curveVertex(127, 113);
      curveVertex(142, 120);
      curveVertex(165, 125);
      curveVertex(196, 128);
      curveVertex(232, 187);
      curveVertex(240, 128);
      curveVertex(244, 133);
      curveVertex(244, 145);
      curveVertex(237, 162);
      curveVertex(226, 177);
      curveVertex(216, 185);
      curveVertex(206, 188);
      curveVertex(169, 176);
      curveVertex(153, 169);
      curveVertex(122, 152);
      curveVertex(109, 138);
      curveVertex(99, 119);
      curveVertex(93, 100);
      curveVertex(92, 73);
      curveVertex(97, 46);
      endShape(CLOSE);

    //ears
    noStroke();
    fill(fc2);
    beginShape();
    //exterior right ear
    curveVertex(566, 194);
    curveVertex(562, 211);
    curveVertex(550, 225);
    curveVertex(533, 239);
    curveVertex(510, 251);
    curveVertex(490, 257);
    curveVertex(472, 259);
    curveVertex(454, 257);
    curveVertex(441, 249);
    curveVertex(428, 234);
    curveVertex(422, 218);
    curveVertex(423, 206);
    curveVertex(429, 195);
    curveVertex(446, 186);
    curveVertex(471, 179);
    curveVertex(496, 176);
    curveVertex(514, 177);
    curveVertex(546, 184);
    curveVertex(560, 189);
    endShape(CLOSE);
    //exterior left ear
    beginShape();
    curveVertex(67, 202);
    curveVertex(75, 216);
    curveVertex(88, 229);
    curveVertex(101, 239);
    curveVertex(114, 247);
    curveVertex(140, 256);
    curveVertex(162, 259);
    curveVertex(176, 258);
    curveVertex(193, 249);
    curveVertex(205, 236);
    curveVertex(212, 218);
    curveVertex(211, 206);
    curveVertex(206, 198);
    curveVertex(195, 189);
    curveVertex(162, 179);
    curveVertex(143, 176);
    curveVertex(126, 176);
    curveVertex(88, 184);
    curveVertex(75, 188);
    curveVertex(67, 194);
    endShape(CLOSE);
    //interior right ear
    fill(iec1);
    beginShape();
    curveVertex(457, 249);
    curveVertex(453, 235);
    curveVertex(456, 220);
    curveVertex(465, 209);
    curveVertex(473, 204);
    curveVertex(487, 200);
    curveVertex(510, 199);
    curveVertex(527, 198);
    curveVertex(546, 195);
    curveVertex(562, 194);
    curveVertex(567, 196);
    curveVertex(565, 206);
    curveVertex(562, 211);
    curveVertex(555, 221);
    curveVertex(530, 241);
    curveVertex(508, 251);
    curveVertex(490, 257);
    curveVertex(476, 260);
    curveVertex(466, 259);
    endShape(CLOSE);
    //interior left ear
    beginShape();
    curveVertex(66, 196);
    curveVertex(72, 194);
    curveVertex(89, 196);
    curveVertex(123, 199);
    curveVertex(146, 200);
    curveVertex(152, 201);
    curveVertex(162, 205);
    curveVertex(171, 212);
    curveVertex(177, 220);
    curveVertex(179, 228);
    curveVertex(180, 236);
    curveVertex(178, 245);
    curveVertex(173, 254);
    curveVertex(167, 259);
    curveVertex(159, 260);
    curveVertex(144, 257);
    curveVertex(115, 247);
    curveVertex(94, 235);
    curveVertex(79, 221);
    curveVertex(71, 211);
    curveVertex(66, 202);
    endShape(CLOSE);

    //piercings
    fill(239, 202, 44);
    //piercing1
    if(pierce == 1){
      strokeWeight(6);
      strokeCap(SQUARE);
      stroke(239, 202, 44);
      noFill();
      arc(317, 403, 69, 69, QUARTER_PI, PI+QUARTER_PI);
    }

    //piercing2
    if(pierce == 2){
      triangle(531, 216, 511, 250, 551, 250);
      ellipse(531, 216, 20, 20);
    }


}

function mousePressed() {
    // when the user clicks the mouse, these variables are reassigned
    // to preset values at random.
    b3= random(colors);
    fc2= random (facecolors);
    eyecolor1= random(eyecolors);
    eyes= random(eyetype);
    n1= random(nosecolor);
    iec1= random(intearcolors);
    pierce= random(plocation);

}

The process took a bit of time because I used curveTexture() to create a lot of the shapes I needed. It was a very inefficient process and I’m sure that there is a more efficient and concise way that I could have executed the script. Overall, the project itself was really fun. I wasn’t able to execute all the features I wanted to put into it but I’m still pleased with the overall outcome. Below are the reference drawings that I had made before starting the script.