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.
]]>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.
]]>//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.
//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.
]]>//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.
]]>
// 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.
]]>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.
]]>// 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.
]]>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).
]]>
//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.
]]>