yunzhous-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.

cespinoz-project-02

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_Project-02

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.

  

hannahk2-project-02

sketch

//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Project-02

var eyeHeight = 40;
var eyeWidth = 42;
var pupil = 5;
var mouthHeight = 10;
var mouthWidth= 20;
var tentacleHeight= 10

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

function draw() {
//colors
background(210, 134, 136);
var bodyColor = color(188, 81, 81);
var darkestColor= color(62, 25, 26);
var tentacleColor= color(81, 40, 40);
var white= color(254, 218, 233);
var black= color(16, 0, 1);
    
noStroke();

//body curve
fill(bodyColor);
beginShape();
curveVertex(270, 600);
curveVertex(259, 300);
curveVertex(240, 136);
curveVertex(263, 71);
curveVertex(352, 54);
curveVertex(397, 98);
curveVertex(398, 142);
curveVertex(378, 262);
curveVertex(374, 700);
endShape();

//left tentacles
fill(tentacleColor)
ellipse(158, 348, 10, tentacleHeight);
ellipse(161, 330, 10, tentacleHeight);
ellipse(171, 314, 10, tentacleHeight);
ellipse(187, 308, 10, tentacleHeight);
ellipse(197, 286, 10, tentacleHeight);
ellipse(209, 273, 10, tentacleHeight);
ellipse(228, 273, 10, tentacleHeight);

//right tentacles
fill(tentacleColor)
ellipse(407, 276, 10, tentacleHeight);
ellipse(429, 281, 10, tentacleHeight);
ellipse(435, 276, 10, tentacleHeight);
ellipse(447, 298, 10, tentacleHeight);
ellipse(465, 312, 10, tentacleHeight);
ellipse(477, 338, 10, tentacleHeight);
ellipse(479, 363, 10, tentacleHeight);

//front 2 legs
fill(bodyColor);
beginShape();
curveVertex(259, 300);
curveVertex(259, 300);
curveVertex(279, 415);
curveVertex(274, 400);
curveVertex(275, 381);
curveVertex(272, 358);
curveVertex(246, 315);
curveVertex(244, 281);
curveVertex(317, 239);
curveVertex(389, 265);
curveVertex(391, 319);
curveVertex(373, 345);
curveVertex(365, 377);
curveVertex(363, 405);
curveVertex(357, 419);
curveVertex(348, 362);
curveVertex(365, 311);
curveVertex(318, 277);
curveVertex(276, 296);
curveVertex(280, 325);
curveVertex(288, 370);
curveVertex(283, 410);
curveVertex(280, 418);
curveVertex(276, 417);
endShape();

//left leg
fill(bodyColor);
beginShape();
curveVertex(400, 234);
curveVertex(265, 232);
curveVertex(204, 232);
curveVertex(180, 256);
curveVertex(166, 288);
curveVertex(152, 299);
curveVertex(142, 329);
curveVertex(156, 380);
curveVertex(157, 378);
curveVertex(160, 333);
curveVertex(175, 314);
curveVertex(198, 287);
curveVertex(222, 270);
curveVertex(262, 273);
curveVertex(400, 275);
endShape();

//right leg
fill(bodyColor);
beginShape();
curveVertex(300, 240);
curveVertex(372, 245);
curveVertex(435, 230);
curveVertex(458, 244);
curveVertex(462, 274);
curveVertex(473, 290);
curveVertex(497, 322);
curveVertex(482, 383);
curveVertex(480, 379);
curveVertex(470, 316);
curveVertex(441, 289);
curveVertex(405, 275);
curveVertex(381, 270);
curveVertex(350, 275);
endShape();

//left eye white
fill(white);
ellipse(295, 195, eyeWidth, eyeHeight);

//left eye pupil
fill(black);
ellipse(295, 195, pupil, pupil);


//right eye white
fill(white);
ellipse(348, 194, eyeWidth, eyeHeight);

//right eye pupil
fill(black);
ellipse(348, 194, pupil, pupil);

//mouth
fill(darkestColor);
ellipse(320, 230, mouthWidth, mouthHeight);

//left brow
strokeWeight (3);
stroke(120);
line(270, 170, 286, 165);

//right brow
strokeWeight (3);
stroke(120);
line(351, 163, 365, 169);
}

function mousePressed() {
    eyeHeight = random(30, 55);
    eyeWidth = random(20, 60);
    pupil = random(2, 10);
    eyeSize = random(10, 30);
    mouthHeight = random(4, 30);
    tentacleHeight = random(10, 20);
}

This project was pretty fun for me. Since it was my first time working with the curve function, it got frustrating at times, but I am pretty happy with how the curves and the changing shapes on the octopus turned out.

haewanp – Project 02 – Variable Face

Variable Face

//Hae Wan Park
//15104-A
//haewanp@andrew.cmu.edu
//Project-02-variable-Face

var eyeSize = 15;
var x = 10;
var y = 9;
var t = 5;
var faceY = 5;
var faceX = 3;
var color1 = 0;
var color2 = 150;
var color3 = 240;
var eyeX = 240;
var eyeY = 310;
var n = 10;
var v = 0;


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

function draw() {
    background(252);
    
    //hair
    noStroke();
    fill(255 - color1, 235, 70 + color1);
    beginShape();
    curveVertex(170, 220);
    curveVertex(width / 2 - (faceX+9)*x, 210);
    curveVertex(170, height / 2 - 3*y*faceY - 7*faceY); //
    curveVertex(230, height / 2 - 3*y*faceY - 7*faceY); //
    curveVertex(width / 2 + (faceX+5)*x, height / 2 - 3*y*faceY - 7*faceY);
    curveVertex(width / 2 + (faceX+6.5)*x, 195);
    curveVertex(305, 230);
    curveVertex(270, 215);
    curveVertex(265, height / 2 - 20*faceY);
    curveVertex(285, height / 2 - 14*faceY);
    curveVertex(240, height / 2 - 12*faceY);
    curveVertex(220, height / 2 - 18*faceY);
    curveVertex(210, 210);
    curveVertex(200, 230);
    curveVertex(180, 235);
    curveVertex(170, 220);
    curveVertex(width / 2 - (faceX+9)*x, 210);
    curveVertex(170, height / 2 - 3*y*faceY - 7*faceY);
    endShape();
    
    //cheek
    noStroke();
    fill(255 - color1/2, color2 - 50, 210 - color1);
    ellipse(width/2 + 70, 350, 8*x, 8*x);
    ellipse(width/2 - 80, 350, 8*x, 8*x);
    
    //face
    noFill();
    stroke(color1, color2 - 40, 255 - color1);
    strokeWeight(4.5);
    curveTightness(0);
    beginShape();
    curveVertex(width / 2 - (faceX+5)*x, height / 2 - (faceY+8)*y);
    curveVertex(width / 2 - (faceX+1)*x, height / 2 - 3.2*y*faceY); 
    curveVertex(width / 2 - (faceX-5)*x, height / 2 - 3.2*y*faceY); //
    curveVertex(width / 2 - (faceX-10.5)*x, height / 2 - 2.5*y*faceY);
    curveVertex(width / 2 + (faceX+7)*x, height / 2 - faceY*y);
    curveVertex(width / 2 + (faceX+5)*x, height / 2 + 9*y);
    curveVertex(width / 2 + (faceX-2)*x, height / 2 + 15*y);
    curveVertex(width / 2 - (faceX+4)*x, height / 2 + 12*y);
    curveVertex(width / 2 - (faceX+7)*x, height / 2 + faceY*y);
    curveVertex(width / 2 - (faceX+8)*x, height / 2 - faceY*y);
    curveVertex(width / 2 - (faceX+6)*x, height / 2 - (faceY+8)*y);
    curveVertex(width / 2 - (faceX+1)*x, height / 2 - 3.2*y*faceY);
    curveVertex(width / 2 - (faceX-5)*x, height / 2 - 3.2*y*faceY);
    endShape();
    
    //ear
    ellipse(width / 2 - (faceX+8.5)*x, height / 2 - (faceY-3)*y, 30, 40);
    ellipse(width / 2 + (faceX+7)*x, height / 2 - (faceY-3)*y, 30, 40);
    
    //eye
    ellipse(205 - faceY, eyeY - 35 + eyeSize/2, eyeSize, eyeSize);
    ellipse(275 + faceY, eyeY - 35 + eyeSize/2, eyeSize, eyeSize);

    stroke(255, color2 - 55, color2 - 40);
    
    curve(175 + faceY*(faceX/8), eyeY + 60 + 2*faceY, 
          175 + faceY*(faceX/8), eyeY - 40 + 2*faceY, 
          225 - faceY, eyeY - 40 + 2*faceY, 
          225 - faceY, eyeY + 60 + 2*faceY);
    curve(255 + faceY, eyeY + 60 + 2*faceY, 
          255 + faceY, eyeY - 40 + 2*faceY, 
          305 - faceY*(faceX/8), eyeY - 40 + 2*faceY, 
          305 - faceY*(faceX/8), eyeY + 60 + 2*faceY);
    
    //eyebrow
    line(width/2 - 55, eyeY - 70 + 7*v, width/2 - 25, eyeY - 60 + v);
    line(width/2 + 55, eyeY - 70 + 7*v, width/2 + 25, eyeY - 60 + v);
    
    
    //nose
    line(width / 2, 325, 240, 305);
    line(width / 2, 325, width / 2 - 2*n, 337);
    line(width / 2 - 2*n, 337, width / 2, 351);
    
    //mouth
    strokeJoin(ROUND);
    beginShape();
    vertex(width / 2 + 5*faceX, 390);
    vertex(width / 2 - 5*faceX - 6, 390);
    vertex(width / 2 - 3*faceX, 380);
    vertex(width / 2, 385);
    vertex(width / 2 + 10, 380);
    vertex(width / 2 + 5*faceX, 390);
    vertex(width / 2 - 3, 405);
    vertex(width / 2 - 5*faceX - 6, 390);
    endShape();
    
}

function mousePressed() {
    eyeSize = random(10, 25);
    eyeX = random (220, 250);
    eyeY = random (300, 320);
    x = random(8,12);
    y = random(7,10);
    t = random(7,20);
    faceY = random(5,7);
    faceX = random(3,5);
    color1 = random(0, 85);
    color2 = random(85, 170);
    color3 = random(170, 255);
    n = random(6,12);
    v = random(-2,4);
}

It is fun to watch the face keeps changing. It was not easy to make everything in right proportion. Also, I sketched on illustrator then tried to figure out how to draw with p5.js. It has to be simplified even though I thought my sketch was not so complicated. Maybe need more practice to control p5.js.

Variation of Faces
Original Sketch by Adobe Illustrator

 

 

dahyec-Project -02-Variable-Face

sketch


// Dahye Chung
// 15-104 Section E
// dahyec@andrew.cmu.edu
// Project-O2

var eyeWidth = 5;
var eyeHeight = 5;
var mouth = 30;
var faceWidth = 300;
var faceHeight = 300;
var skinR = 28;
var skinG = 142;
var skinB = 200;
var noseWidth = 30;
var noseHeight = 65;
var mouthWidth = 0;
var mouthHeight =5;
var eyebrows = 30;
var eyebrowStroke = 8;
var mouthCurve = 90;
var glasses = 60;

function setup() {
createCanvas(500, 560);
rectMode (CENTER);
}

function draw() {
background(236,220,189);

noStroke();
fill(skinR, skinG, skinB, 100);
ellipse(width/2, height/2, faceWidth, faceHeight); // head

fill(0,0,0,180);
ellipse(width/2-40, height/2, eyeWidth+3, eyeHeight+5); // left eye
ellipse(width/2+40, height/2, eyeWidth+3, eyeHeight+5); // right eye

fill(skinR, skinG, skinB, 210);
rect(width/2, height/2, noseWidth, noseHeight); // nose

drawMouth(mouthCurve);
strokeWeight(3);
stroke(0); 
fill (0,0,0,0);

ellipse(width/2-40, height/2, glasses+4, glasses+4); // glasses
ellipse(width/2+40, height/2, glasses+4, glasses+4);
line(width/2-40+((glasses+4)/2), height/2, width/2+40-((glasses+4)/2), height/2);

stroke(skinR-20, skinG-20, skinB-20); // eyebrows
strokeWeight(eyebrowStroke);
line(width/2-53, height/2-20-eyebrows, width/2-30, height/2-20-eyebrows); 
line(width/2+53, height/2-20-eyebrows, width/2+30, height/2-20-eyebrows); 

}

function drawMouth(mouthCurve) {
stroke(skinR-20, skinG-20, skinB-20); // eyebrows
fill(0,0,0,0);

p1 = {x: width/2-20, y: mouthCurve}, p2 = {x: width/2-40, y: height/2+90} // mouth
p3 = {x: width/2+40, y: height/2+90}, p4 = {x: width/2+20, y:mouthCurve}
curve (p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y)
}

function mousePressed() {
faceWidth = random(200, 400);
faceHeight = random(300, 450);
skinR = random(200, 100);
skinG = random(200, 100);
skinB = random(200, 100);
eyeWidth = random(-2, 10);
eyeHeight = random(-2, 5);
noseWidth = random(10,30);
noseHeight = random(40, 70);
eyebrows = random(20,40);
eyebrowStroke = random(5,16);
mouthCurve = random(0, (height/2+90)*2);
glasses = random(30,70);
}

I tried to show different emotions of people around me in my school life. I wanted to show variety range of people’s emotions in this project and wanted to study which factors of a face communicate different emotions to other people. Also, I tried to make every parts of the face and the glasses look different when the user clicks my project. I used soft colors and opacities to make my project look simple and minimal. 

project-02-variable-face

sketch

var faceWidth = 0.75;
var eyeColor1 = 100;
var eyeColor2 = 200;
var eyeColor3 = 100;
var eyebrowSlant = 0;
var mouthSlant = 0;

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

function draw()
{
  background(220);
  
  //Background of face
  strokeWeight(1);
  fill(255);
  ellipse(width/2, height/2, 300*faceWidth, 300);
  
  //Eye background
  ellipse((width/2)+(80*faceWidth), (height/2)-25, 50*faceWidth, 50*faceWidth);
  ellipse((width/2)-(80*faceWidth), (height/2)-25, 50*faceWidth, 50*faceWidth);

  //Eye irises
  strokeWeight(0);
  fill( eyeColor1, eyeColor2, eyeColor3 );
  ellipse((width/2)+(80*faceWidth), (height/2)-25, 20*faceWidth, 20*faceWidth);
  ellipse((width/2)-(80*faceWidth), (height/2)-25, 20*faceWidth, 20*faceWidth);

  //Eyebrows
  fill(0);
  triangle((width/2)+(80*faceWidth)+(25*faceWidth), (height/2)-35-(25*faceWidth),
           (width/2)+(80*faceWidth)+(25*faceWidth), (height/2)-45-(25*faceWidth),
           (width/2)+(80*faceWidth)-(25*faceWidth), (height/2)-40-(25*faceWidth)+eyebrowSlant);
  triangle((width/2)-(80*faceWidth)-(25*faceWidth), (height/2)-35-(25*faceWidth),
           (width/2)-(80*faceWidth)-(25*faceWidth), (height/2)-45-(25*faceWidth),
           (width/2)-(80*faceWidth)+(25*faceWidth), (height/2)-40-(25*faceWidth)+eyebrowSlant);

  //Mouth
  strokeWeight(3);
  noFill();
  if( mouthSlant == 0 )
  {
    line((width/2)+(80*faceWidth), (height/2)+60, (width/2)-(80*faceWidth), (height/2)+60);
  }
  else if( mouthSlant < 0 )
  {
    var posSlant = mouthSlant*-1;
    arc(width/2, (height/2)+60, 160*faceWidth, posSlant*2, PI, 0 );
  }
  else
  {
    arc(width/2, (height/2)+60, 160*faceWidth, mouthSlant*2, 0, PI ); 
  }
}

function mousePressed() 
{
  eyeColor1 = random(100,255);
  eyeColor2 = random(100,255);
  eyeColor3 = random(100,255);
  faceWidth= random(60,125) / 100;
  eyebrowSlant= random(-15,15);
  mouthSlant= eyebrowSlant * 3 * ((random(0,1)*2)-1);
}

I tried to make the variables interdependent to create a coherent face throughout variations. For example, the size of the eyes and mouth are dependent on the width of the face, and the eyebrows are always the same width as the eyes. The mouth can be upwards or downwards as can the eyebrows allowing for 5 expressions (neutral, smile, evil smile, angry, sad/afraid), however the intensity of the mouth slant will always correspond to the intensity of the eyebrow slant allowing for a coherent intensity of the expression.

keuchuka-project2-variablefaces

project2

// Fon Euchukanonchai
// section A
// keuchuka@andrew.cmu.edu
// Project 2

//face coordinates
var faceX = 158;
var faceY = 103;
var faceW = 200;
var faceH = 320;
var faceRotate = -5;

var colorR = 249;
var colorG = 201;
var colorB = 216;


//facial features coordinates
var featureA = 130;
var featureB = 180;
var featureC = 150;
var featureD = 160;
var featureE = 220;
var featureE = 190;


function setup() {
    createCanvas(480, 640);
    background(255);
    noStroke(0);

   }
 
 function draw() {

    //face
    push();
    fill(colorR, colorG, colorB);
    noStroke();
    angleMode(DEGREES);
    rotate(faceRotate);
    rect(faceX, faceY, faceW, faceH, 20);
    pop();

    //top left eyes

    rotate(faceRotate-5);
    noFill();
    strokeWeight(2);
    stroke(0);
    beginShape();
    curveVertex(featureA, featureB);
    curveVertex(featureA, featureB);
    curveVertex(featureC, featureD); 
    curveVertex(featureE, featureE);
    curveVertex(featureE, featureE);
    endShape();

    //top right eyes
    noFill();
    strokeWeight(2);
    stroke(0);
    beginShape();
    curveVertex(featureA*2, featureB);
    curveVertex(featureA*2, featureB);
    curveVertex(featureC+230, featureD); 
    curveVertex(featureE*2, featureE);
    curveVertex(featureE*2, featureE);
    endShape();

    //bottom left eyes
    noFill();
    strokeWeight(3);
    stroke(0);
    beginShape();
    curveVertex(featureA+20, featureB+40);
    curveVertex(featureA+20, featureB+40);
    curveVertex(featureC+20, featureD+70); 
    curveVertex(featureE, featureE+40);
    curveVertex(featureE, featureE+40);
    endShape();

    //bottom right eyes
    noFill();
    strokeWeight(3);
    stroke(0);
    beginShape();
    curveVertex(featureA*2, featureB+50);
    curveVertex(featureA*2, featureB+50);
    curveVertex(featureC+200, featureD+90); 
    curveVertex(featureE+180, featureE+50);
    curveVertex(featureE+180, featureE+50);
    endShape();

    //nose
    noFill();
    strokeWeight(2);
    stroke(0);
    beginShape();
    curveVertex(featureA*2, featureA*2);
    curveVertex(featureA*2, featureA*2);
    quadraticVertex(featureA+110, featureC*2, featureA*2, featureD*2);
    quadraticVertex(featureA*2, featureB*2, featureA*2, featureD*2);
    curveVertex(featureA*2, featureE*2);
    curveVertex(featureA*2, featureE*2);
    endShape();

    //mouth
    noFill();
    strokeWeight(1);
    stroke(0);
    beginShape();
    curveVertex(featureB, featureC*3);
    curveVertex(featureB, featureC*3);
    quadraticVertex(featureA*2, featureC*3, featureA*2, featureD*3);
    quadraticVertex(featureD*2, featureD*3, featureC*2, featureD*3);
    curveVertex(featureB*2, featureD*3);
    curveVertex(featureB*2, featureD*3);
    endShape();

    //moustache
    fill(0);
    arc(featureA*2-10, featureC*3-10, 30, 15, -180, 0)
    rotate(20);
    arc(featureA*3+30, featureC*2+25, 30, 15, -180, 0)

    //mole
    fill(0);
    stroke(0);
    strokeWeight(1);
    ellipse(featureC, featureD-140, 20, 20);

}

//when mouse clicks, face and facial features dance

function mousePressed() {

    background(255);
    faceX = random(70, 200);
    faceY = random(50, 150);
    faceW = random(150, 300);
    faceH = random(250, 350);
    faceRotate = random(-15, 15);

    colorR = random(150, 300);
    colorG = random(150, 300);
    colorB = random(150, 300);

    featureA = random(120, 140);
    featureB = random(170, 190);
    featureC = random(140, 160);
    featureD = random(150, 170);
    featureE = random(210, 230);
    featureE = random (180, 200);

}

I wanted to create a line portrait that had simple parts, all of its parts moving, and constantly generating something new from random values. The result is an interesting one as the features constantly change but the attitude remains the same.

Jonathan Perez Project 2

sketch

var faceWidth = 250
var faceHeight = 300
var cheekWidth = 13*faceWidth/12
var smile = 10
var smileWidth = 7*faceWidth/12
var smileHeight = 2*faceHeight/32
var blushWidth = 20
var blushHeight = 20
var blushDepth = 0
var dimple = 1
var eyeLX = 240 - faceWidth/4
var eyeRX = 240 + faceWidth/4
var eyeLY = 320 //height/2
var eyeRY = 320
var sunglasses = 0
var glassR = 0
var glassG = 0
var glassB = 0
var hairWidth = 100
var hairHeight = 400

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

function draw() {
    background(164, 230, 239);

    //hair
    fill(0);
    ellipse(width/2, height/2 - hairHeight/4, hairWidth, hairHeight);

    //head
    noStroke();
    fill(255, 220, 200);
    ellipse(width/2, height/2 + faceHeight/4, cheekWidth, faceHeight/2);//cheeks
    ellipse(width/2, height/2, faceWidth, faceHeight); //face

    //mouth
    var mouthHeight = height/2 + faceHeight/4
    noFill()
    stroke(0);
    strokeWeight(2);
    if(smile > 20) {
        arc(width/2, height/2 + faceHeight/4, smileWidth, smileHeight, 0, PI); //smile
    }
    else if(smile < 10) {
        arc(width/2, height/2 + faceHeight/4, smileWidth, smileHeight, PI, 0); //frown
    }
    else {
        line(width/2 - smileWidth/2, mouthHeight, width/2 + smileWidth/2, height/2 + faceHeight/4); //straight mouth
    }

     //dimples
    noFill()
    stroke(0);
    strokeWeight(2);
    if(dimple > .5) {
        arc(width/2 - (smileWidth/2 + 12.5), mouthHeight, 25, 30, 3*PI/2, PI/2); //left dimple
        arc(width/2 + (smileWidth/2 + 12.5), mouthHeight, 25, 30, PI/2, 3*PI/2); //right dimple
    }

    //blush
    noStroke();
    fill(254 + blushDepth, 118 + blushDepth, 145 + blushDepth);
    ellipse(width/2 - 7*faceWidth/16, height/2 + 5*faceHeight/32, blushWidth, blushHeight) //left blush
    ellipse(width/2 + 7*faceWidth/16, height/2 + 5*faceHeight/32, blushWidth, blushHeight) //right blush

    //eyes
    if(sunglasses > .5) {
    stroke(0);
    strokeWeight(2);
    fill(glassR, glassG, glassB);
    ellipse(width/2 - 50, height/2, 70, 70); //left frame
    ellipse(width/2 + 50, height/2, 70, 70); //right frame
    noFill();
    arc(width/2, height/2, 30, 30, PI, 0); //nose bridge frame
    line(width/2 - 85, height/2 - 5, width/2 - faceWidth/2, height/2 - 20); //left ear frame
    line(width/2 + 85, height/2 - 5, width/2 + faceWidth/2, height/2 - 20); //right ear frame
    }
    else {
    noStroke();
    fill(0);
    ellipse(eyeLX, eyeLY, 20, 20); //left eye
    ellipse(eyeRX, eyeRY, 20, 20); //right eye
    }
}


function mouseClicked() {
        faceWidth = random(200, 300);
        faceHeight = random(260, 300);
        cheekWidth = random(2*faceWidth/3, 13*faceWidth/12);
        smile = random(30);
        smileWidth = random(faceWidth/4, 7*faceWidth/12);
        smileHeight = random(faceHeight/16, faceHeight/4);
        blushDepth = random(-40, 50);
        blushWidth = random(20, 40);
        blushHeight = random(20, 40);
        dimple = random(1)
        eyeLX = random(240 - 3*faceWidth/8, 240 - faceWidth/8); //width not declared yet, so used numerical value 240 instead
        eyeRX = random(240 + faceWidth/8, 240 + 3*faceWidth/8);
        eyeLY = random(320 - 2.5, 320 + 2.5); //height not declared yet, so used numerical value 320 instead
        eyeRY = random(320 - 2.5, 320 + 2.5);
        sunglasses = random(1)
        glassR = random(255);
        glassG = random(255);
        glassB = random(255);
        hairWidth = random(100, 400);
        hairHeight = random(200, 400);


}

This project made me skeptical at first… When I first heard that we would be using variables to “randomly” generate faces, I thought that the faces would be just that. Random. Impersonal. Throughout the process — and certainly at the end — I found this not to be true though. Even though when I click the mouse, yes, a bunch of variables are randomly assigned values, I found that every generated face still represented me as the artist and programmer. The style of the artist is evident, and that is something that I did not expect. Each of these faces reflect a bit of my comedic and goofy nature (especially with the colored, circular sunglasses).

 

heeseoc-Project-02-Variable-Face

heeseoc-variation

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-02

var faceW = 200;
var faceH = faceW - 20;

var eyeW = 60;
var eyeH = 40;
var eyeY = 315;

var pupilW = 15;

var noseW = 50;
var noseH = noseW - 10;
var noseY = 355;

var colorR = 165;
var colorG = 180;
var colorB = 180;

var colorR1 = 255;
var colorG1 = 241;
var colorB1 = 108;
 
function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(250);
    noStroke();

    //ears//
    fill(colorR, colorG, colorB);
    triangle(width/2 - faceW/2, height/2, 330 - faceW, 220, width/2 - 20, height/2 - faceH/2 + 10);
    triangle(width/2 + faceW/2, height/2, 150 + faceW, 220, width/2 + 20, height/2 - faceH/2 + 10);

    fill(colorR+40, colorG+40, colorB+40);
    triangle(width/2 - faceW/2 + 20, height/2 + 20, 340 - faceW, 240, width/2 + 10, height/2 - faceH/2 + 30);
    triangle(width/2 + faceW/2 - 20, height/2 - 10, 140 + faceW, 240, width/2 - 10, height/2 - faceH/2 + 30);
    
    //face//
    fill(colorR, colorG, colorB);
    ellipse(width / 2, height / 2, faceW, faceH);

    //eyes//
    fill(colorR1,colorG1,colorB1);
    var eyeLX = width / 2 - faceW * 0.25;
	var eyeRX = width / 2 + faceW * 0.25;
    ellipse(eyeLX, eyeY, eyeW, eyeH);
    ellipse(eyeRX, eyeY, eyeW, eyeH);

    //pupils//
    fill(50);
    ellipse(eyeLX, eyeY, pupilW, eyeH-10);
    ellipse(eyeRX, eyeY, pupilW, eyeH-10);

    //nose //
    fill(colorR+40, colorG+40, colorB+40);
    var noseLX = width / 2 - faceW * 0.09;
    var noseRX = width / 2 + faceW * 0.09;
    ellipse(noseRX, noseY, noseW, noseH);
    ellipse(noseLX, noseY, noseW, noseH);

    fill(0);
    triangle(noseRX, noseY - noseH/2, noseLX, noseY - noseH/2, width/2, noseY-10);

}
 
function mousePressed() {
    faceW = random(150, 200);
    faceH = random(130, 180);

    eyeW = random(40, 70);
    eyeH = random(30, 50);
    eyeY = random (310, 325);

    pupilW = random (5,25);

    noswW = random (40,60);
    noseH = random (30,50);
    noseY = random (350,360);

    colorR = random (165, 240);
    colorG = random (165, 240);
    colorB = random (165, 240);

    colorR1 = random (192, 245);
    colorG1 = random (241, 243);
    colorB1 = random (192, 245);

}

I tried to show how the cats’ pupil dilate depending on the brightness of the light their eyes are capturing. I took a close look at how cats’ eyes are in real life, and noticed how their pupils are vertical. So I kept the height of my cat’s pupil proportional to the height of the eyes, leaving the width change randomly. I also wanted to give changes to the background colors depending on the size of the pupil, but even after many tries, wasn’t able to figure out if the numbers for pixel units that are used for the width of the pupils are also applicable for the color coding for the background.