I started by trying to make the original face a more cartoonish version of my self-portrait from the first week. After that, I started to play around with different variables and changes that I could make with the drawing. My favorite part of the project is being able to color in the background when the user presses a key.
sketch//Nakshatra Menon
//Section C
var centerOfFaceX = 278;
var centerOfFaceY = 377;
var faceHeight = 470
var faceWidth = 374
var centerOfEyeLX = 220;
var centerOfEyeY = 347;
var centerOfEyeRX = 408;
var eyeWidth = 92;
var eyeHeight = 62;
var hair = 1;
var mouth = 1;
var value1 = 130;
var value2 = 15;
function setup() {
createCanvas(480, 640);
background(0);
}
function draw() {
if(// when the mouse is pressed --> realistic face
mouseIsPressed==true){
background(0)
noStroke();
fill(60, 20, 54); //purple1
beginShape();
vertex(207, 139);
vertex(323, 130);
vertex(344, 450);
vertex(323, 523);
vertex(280, 605);
vertex(186, 576);
vertex(126, 521);
vertex(104, 469);
vertex(89, 367);
endShape(CLOSE);
fill(76, 28, 90); //purple2
beginShape();
vertex(323, 130);
vertex(312, 370);
vertex(287, 329);
vertex(281, 336);
vertex(292, 356);
vertex(298, 348);
vertex(346, 461);
vertex(323, 531);
vertex(280, 605);
vertex(133, 504);
vertex(104, 310);
vertex(126, 377);
vertex(133, 356);
vertex(152, 351);
vertex(205, 365);
vertex(188, 328);
vertex(189, 309);
vertex(165, 292);
vertex(172, 255);
vertex(204, 212);
vertex(204, 183);
vertex(226, 146);
vertex(276, 146);
endShape(CLOSE);
fill(126, 53, 79); //purple3
beginShape();
vertex(325, 131);
vertex(226, 162);
vertex(187, 280);
vertex(207, 287);
vertex(202, 326);
vertex(226, 375);
vertex(159, 366);
vertex(131, 414);
vertex(195, 482);
vertex(197, 493);
vertex(178, 506);
vertex(207, 533);
vertex(226, 529);
vertex(212, 483);
vertex(234, 484);
vertex(255, 471);
vertex(276, 477);
vertex(269, 444);
vertex(288, 415);
vertex(305, 407);
vertex(305, 429);
vertex(283, 424);
vertex(279, 445);
vertex(302, 449);
vertex(315, 441);
vertex(336, 459);
vertex(325, 471);
vertex(288, 476);
vertex(297, 490);
vertex(284, 496);
vertex(306, 547);
vertex(254, 559);
vertex(266, 591);
vertex(299, 620);
vertex(356, 611);
vertex(425, 458);
vertex(304, 318);
vertex(309, 369);
vertex(291, 379);
vertex(278, 319);
vertex(303, 319);
endShape(CLOSE);
fill(78, 34, 6); //brown1
beginShape();
vertex(150, 315);
vertex(147, 296);
vertex(203, 285);
vertex(278, 303);
vertex(274, 312);
vertex(194, 309);
vertex(165, 319);
vertex(150, 315);
endShape(CLOSE);
beginShape();
vertex(358, 349);
vertex(374, 302);
vertex(444, 274);
vertex(444, 331);
vertex(440, 342);
vertex(450, 366);
vertex(448, 444);
vertex(427, 476);
vertex(417, 525);
vertex(380, 573);
vertex(221, 490);
vertex(253, 498);
vertex(389, 489);
endShape(CLOSE);
beginShape();
vertex(138, 538);
vertex(181, 573);
vertex(284, 606);
vertex(296, 618);
vertex(312, 618);
vertex(343, 742);
vertex(115, 742);
endShape(CLOSE);
fill(130, 69, 20); //brown2
beginShape();
vertex(207, 285);
vertex(222, 285);
vertex(292, 303);
vertex(303, 315);
vertex(257, 315);
vertex(255, 323);
vertex(280, 337);
vertex(276, 343);
vertex(249, 323);
vertex(227, 323);
vertex(222, 306);
vertex(276, 312);
vertex(278, 303);
endShape(CLOSE)
beginShape();
vertex(245, 326);
vertex(284, 351);
vertex(284, 358);
vertex(262, 341);
vertex(240, 330);
endShape(CLOSE);
beginShape();
vertex(236, 337);
vertex(248, 337);
vertex(264, 349);
vertex(262, 352);
vertex(235, 352);
vertex(239, 346);
endShape(CLOSE);
beginShape();
vertex(222, 360);
vertex(264, 355);
vertex(284, 360);
vertex(278, 369);
vertex(249, 377);
vertex(242, 364);
endShape(CLOSE);
beginShape();
vertex(373-30, 365-50);
vertex(415-30, 319-50);
vertex(473-30, 332-50);
vertex(470-30, 337-50);
vertex(438-30, 339-50);
vertex(408-30, 353-50);
vertex(460-30, 345-50);
vertex(474-30, 356-50);
vertex(461-30, 374-50);
endShape(CLOSE);
triangle(386-30, 374-50, 388-30, 400-50, 411-30, 372-50);
beginShape();
vertex(421-30, 373-50);
vertex(440-30, 373-50);
vertex(447-30, 379-50);
vertex(421-30, 378-50);
endShape(CLOSE);
beginShape();
vertex(422-30, 384-50);
vertex(421-30, 392-50);
vertex(424-30, 400-50);
vertex(412-30, 406-50);
vertex(413-30, 414-50);
vertex(404-30, 416-50);
vertex(399-30, 408-50);
vertex(392-30, 406-50);
vertex(404-30, 541-50);
vertex(420-30, 539-50);
vertex(403-30, 562-50);
vertex(392-30, 548-50);
vertex(356-30, 552-50);
vertex(361-30, 559-50);
vertex(351-30, 561-50);
vertex(344-30, 568-50);
vertex(312-30, 565-50);
vertex(312-30, 573-50);
vertex(324-30, 576-50);
vertex(342-30, 596-50);
vertex(355-30, 600-50);
vertex(356-30, 660-50);
vertex(321-30, 666-50);
vertex(327-30, 670-50);
vertex(384-30, 664-50);
vertex(402-30, 643-50);
vertex(421-30, 578-50);
vertex(440-30, 558-50);
vertex(452-30, 526-50);
vertex(473-30, 489-50);
vertex(478-30, 416-50);
vertex(442-30, 400-50);
vertex(447-30, 390-50);
vertex(439-30, 384-50);
endShape(CLOSE);
fill(183, 95, 53); //orange1
beginShape();
vertex(237-30, 324-50);
vertex(259-30, 225-50);
vertex(352-30, 189-50);
vertex(461-30, 259-50);
vertex(473-30, 289-50);
vertex(473-30, 327-50);
vertex(404-30, 349-50);
vertex(392-30, 359-50);
vertex(422-30, 359-50);
vertex(460-30, 349-50);
vertex(460-30, 369-50);
vertex(386-30, 380-50);
vertex(401-30, 422-50);
vertex(429-30, 417-50);
vertex(420-30, 410-50);
vertex(440-30, 406-50);
vertex(444-30, 415-50);
vertex(461-30, 413-50);
vertex(470-30, 424-50);
vertex(470-30, 485-50);
vertex(452-30, 513-50);
vertex(430-30, 506-50);
vertex(427-30, 523-50);
vertex(404-30, 547-50);
vertex(351-30, 552-50);
vertex(337-30, 544-50);
vertex(345-30, 529-50);
vertex(362-30, 526-50);
vertex(375-30, 513-50);
vertex(351-30, 493-50);
vertex(348-30, 469-50);
vertex(354-30, 456-50);
vertex(356-30, 435-50);
vertex(347-30, 414-50);
vertex(322-30, 353-50);
endShape(CLOSE);
beginShape();
vertex(339-30, 572-50);
vertex(389-30, 563-50);
vertex(391-30, 570-50);
vertex(376-30, 591-50);
vertex(359-30, 595-50);
vertex(341-30, 583-50);
endShape(CLOSE);
beginShape();
vertex(299-30, 625-50);
vertex(351-30, 613-50);
vertex(377-30, 595-50);
vertex(408-30, 556-50);
vertex(416-30, 551-50);
vertex(408-30, 617-50);
vertex(399-30, 645-50);
vertex(351-30, 661-50);
vertex(306-30, 643-50);
endShape(CLOSE);
beginShape();
vertex(197-30, 425-50);
vertex(299-30, 425-50);
vertex(314-30, 437-50);
vertex(288-30, 504-50);
vertex(254-30, 521-50);
vertex(215-30, 502-50);
vertex(200-30, 469-50);
endShape(CLOSE);
quad(259-30, 362-50, 275-30, 366-50, 275-30, 369-50, 259-30, 369-50);
fill(227, 122, 43);
beginShape();
vertex(284-30, 218-50);
vertex(328-30, 205-50);
vertex(361-30, 201-50);
vertex(462-30, 265-50);
vertex(470-30, 326-50);
vertex(392-30, 350-50);
vertex(374-30, 396-50);
vertex(392-30, 505-50);
vertex(374-30, 509-50);
vertex(358-30, 496-50);
vertex(351-30, 480-50);
vertex(361-30, 468-50);
vertex(361-30, 436-50);
vertex(352-30, 418-50);
vertex(335-30, 354-50);
vertex(252-30, 319-50);
vertex(264-30, 258-50);
endShape(CLOSE);
beginShape();
vertex(375-30, 399-50);
vertex(384-30, 399-50);
vertex(394-30, 418-50);
vertex(411-30, 426-50);
vertex(456-30, 419-50);
vertex(465-30, 431-50);
vertex(463-30, 486-50);
vertex(442-30, 503-50);
vertex(416-30, 496-50);
vertex(419-30, 517-50);
vertex(406-30, 544-50);
vertex(355-30, 551-50);
vertex(342-30, 540-50);
vertex(355-30, 532-50);
vertex(361-30, 546-50);
vertex(369-30, 523-50);
vertex(407-30, 504-50);
vertex(372-30, 409-50);
endShape(CLOSE);
circle(252-30, 472-50, 81);
beginShape()
vertex(401-30, 565-50);
vertex(411-30, 565-50);
vertex(404-30, 583-50);
vertex(406-30, 623-50);
vertex(390-30, 649-50);
vertex(335-30,649-50);
vertex(321-30, 628-50);
vertex(370-30, 617-50);
vertex(385-30, 602-50);
vertex(384-30, 592-50);
endShape(CLOSE);
beginShape()
vertex(422-30, 364-50);
vertex(435-30, 358-50);
vertex(437-30, 349-50);
vertex(455-30, 349-50);
vertex(461-30, 359-50);
vertex(446-30, 369-50);
endShape(CLOSE);
triangle(351-30, 581-50, 374-30, 565-50, 384-30, 576-50);
fill(251, 151, 55); //Orange2
beginShape();
vertex(306-30, 220-50);
vertex(364-30, 215-50);
vertex(443-30, 253-50);
vertex(463-30, 284-50);
vertex(466-30, 322-50);
vertex(406-30, 342-50);
vertex(377-30, 359-50);
vertex(374-30, 388-50);
vertex(373-30, 417-50);
vertex(399-30, 483-50);
vertex(392-30, 500-50);
vertex(382-30, 507-50);
vertex(361-30, 488-50);
vertex(369-30, 467-50);
vertex(364-30, 427-50);
vertex(351-30, 396-50);
vertex(346-30, 354-50);
vertex(290-30, 319-50);
vertex(306-30, 297-50);
vertex(295-30, 264-50);
endShape(CLOSE);
beginShape();
vertex(379-30, 415-50);
vertex(410-30, 430-50);
vertex(425-30, 430-50);
vertex(443-30, 419-50);
vertex(460-30, 426-50);
vertex(460-30, 475-50);
vertex(454-30, 492-50);
vertex(435-30, 494-50);
vertex(411-30, 476-50);
vertex(411-30, 516-50);
vertex(402-30, 532-50);
vertex(370-30, 545-50);
vertex(370-30, 527-50);
vertex(393-30, 509-50);
vertex(403-30, 487-50);
endShape(CLOSE);
beginShape();
vertex(331-30, 632-50);
vertex(382-30, 620-50);
vertex(392-30, 628-50);
vertex(386-30, 643-50);
vertex(356-30, 643-50);
endShape(CLOSE);
circle(256-30, 469-50, 60);
fill(254, 187, 79); //yellow
beginShape();
vertex(356-30, 373-50);
vertex(373-30, 379-50);
vertex(373-30, 414-50);
vertex(364-30, 414-50);
vertex(356-30, 396-50);
endShape(CLOSE);
beginShape();
vertex(374-30, 420-50);
vertex(425-30, 438-50);
vertex(450-30, 430-50);
vertex(457-30, 448-50);
vertex(453-30, 478-50);
vertex(443-30, 482-50);
vertex(411-30, 467-50);
vertex(392-30, 472-50);
endShape(CLOSE)
beginShape();
vertex(373-30, 433-50);
vertex(399-30, 491-50);
vertex(392-30, 500-50);
vertex(375-30, 487-50);
vertex(377-30, 476-50);
endShape(CLOSE);
beginShape();
vertex(272-30, 391-50);
vertex(287-30, 393-50);
vertex(287-30, 400-50);
vertex(270-30, 401-50);
endShape(CLOSE);
quad(424-30, 387-50, 440-30, 387-50, 440-30, 398-50, 424-30, 398-50);
ellipse(392-30, 284-50, 95, 105);
fill(21, 6, 1); //black hair
beginShape();
vertex(70, 144);
vertex(154, 95);
vertex(270, 54);
vertex(370, 100);
vertex(477, 204);
vertex(498, 742);
vertex(291, 742);
vertex(313, 618);
vertex(364, 614);
vertex(372, 593);
vertex(379, 573);
vertex(417, 525);
vertex(427, 476);
vertex(448, 444);
vertex(450, 366);
vertex(440, 342);
vertex(444, 331);
vertex(443, 239);
vertex(437, 212);
vertex(322, 139);
vertex(210, 165);
vertex(193, 200);
vertex(139, 269);
vertex(131, 296);
vertex(151, 338);
vertex(121, 302);
vertex(119, 375);
vertex(108, 331);
vertex(93, 360);
vertex(111, 485);
vertex(126, 521);
vertex(181, 570);
vertex(218, 742);
vertex(0, 742);
vertex(0, 405);
endShape(CLOSE);
fill(40, 20, 16); //brown1
beginShape();
vertex(251-30, 115-50);
vertex(314-30, 101-50);
vertex(361-30, 172-50);
vertex(355-30, 182-50);
vertex(327-30, 190-50);
vertex(290-30, 189-50);
vertex(310-30, 167-50);
vertex(252-30, 155-50);
vertex(285-30, 136-50);
endShape(CLOSE);
fill(56, 17, 4); //brown2
beginShape();
vertex(327-30, 180-50);
vertex(356-30, 171-50);
vertex(322-30, 114-50);
vertex(317-30, 137-50);
vertex(337-30, 159-50);
vertex(327-30, 180-50);
endShape(CLOSE);
} else { // cartoon face
if (//press on a key to color in the background
keyIsPressed == true){
stroke(mouseY, mouseX, value1);
strokeWeight(40);
point(mouseX, mouseY)
}
strokeWeight(1);
// hair
fill(44, 23, value2);
noStroke();
ellipse(244, 680, 630, 1290);
//face and neck
strokeWeight(1);
fill(235, 171, 127);
beginShape();
vertex(135, 511);
vertex(304, 605);
vertex(270, 742);
vertex(179, 742);
endShape(CLOSE);
stroke(174, 115, 75);
strokeWeight(3);
ellipse(centerOfFaceX, centerOfFaceY, faceWidth, faceHeight); //face
//left eye
stroke(44, 23, 17);
strokeWeight(10);
line(143, 311, 174, 295);
line(174, 295, 270, 295);
strokeWeight(2);
stroke(0);
fill("black"); // eyeliner
triangle(centerOfEyeLX, centerOfEyeY-25, 143, 329, centerOfEyeLX, centerOfEyeY+25);
fill("white"); //eye
ellipse(centerOfEyeLX, centerOfEyeY, eyeWidth, eyeHeight);
fill("black"); // left pupil
ellipse(constrain(mouseX, centerOfEyeLX-15, centerOfEyeLX+15), constrain(mouseY, centerOfEyeY-8, centerOfEyeY+8), eyeWidth/4);
// right eye
stroke(44, 23, 17);
strokeWeight(10);
line(365, 295, 441, 295);
line(441, 295, 450, 303);
strokeWeight(2);
stroke(0);
fill("black"); // eyeliner
triangle(centerOfEyeRX, centerOfEyeY-25, 463, 321, centerOfEyeRX, centerOfEyeY+25);
fill("white"); // eye
ellipse(centerOfEyeRX, centerOfEyeY, eyeWidth, eyeHeight);
fill("black"); //right pupil
ellipse(constrain(mouseX, centerOfEyeRX-15, centerOfEyeRX+15), constrain(mouseY, centerOfEyeY-8, centerOfEyeY+8), eyeWidth/4);
//Hair - bangs
if(hair <= 1){
fill(44, 23, value2);
stroke(44, 23, value2);
beginShape();
curveVertex(327, 124);
curveVertex(268, 145);
curveVertex(215,158);
curveVertex(191, 224);
curveVertex(127, 292);
curveVertex(137, 331);
curveVertex(78, 426);
curveVertex(99, 191);
endShape(CLOSE);
}
if(hair <=2 & hair>1){
fill(44, 23, value2);
stroke(74, 46, value2);
beginShape();
vertex(278, 136);
vertex(390, 155);
vertex(463, 282);
vertex(71, 292);
vertex(175, 150);
endShape(CLOSE);
}
if(hair <=3 & hair>2){
fill(44, 23, value2);
stroke(44, 23, value2);
beginShape();
curveVertex(327, 124);
curveVertex(268, 145);
curveVertex(215,158);
curveVertex(191, 224);
curveVertex(127, 292);
curveVertex(137, 331);
curveVertex(78, 426);
curveVertex(99, 191);
endShape(CLOSE);
beginShape();
curveVertex(298, 121);
curveVertex(298, 121);
curveVertex(340, 190);
curveVertex(412, 255);
curveVertex(455, 308);
curveVertex(458, 410);
curveVertex(466, 536);
curveVertex(486, 325);
curveVertex(399, 138);
endShape(CLOSE);
}
// mouth
if(mouth <=1){
fill(196, 99, 99);
stroke(137, 41, 41);
strokeWeight(10);
ellipse(centerOfFaceX+36, centerOfFaceY+133, mouseX/7, mouseY/7);
}
if(mouth <=2 & mouth>1){
if(mouseX2){
fill(196, 99, 99);
stroke(137, 41, 41);
strokeWeight(10);
triangle(centerOfFaceX+96, centerOfFaceY+123, centerOfFaceX+26, centerOfFaceY+123, centerOfFaceX+61, centerOfFaceY+123+mouseY/9)
}
// nose
strokeWeight(7);
stroke(189, 137, 102);
noFill();
beginShape();
vertex(348, 311);
vertex(337, 352);
vertex(337, 373);
vertex(365, 444);
vertex(342, 467);
vertex(319, 446);
endShape();
if(hair <= 1){//nose ring changes w/ hair (gold)
strokeWeight(4);
stroke(255, 215, 0);
noFill()
beginShape();
vertex(330, 443);
vertex(320, 462);
vertex(331, 472);
vertex(334, 460);
endShape();
}
if(hair <=2 & hair>1){// nose ring changes w/ hair (silver)
strokeWeight(4);
stroke(192, 192, 192);
noFill();
beginShape();
vertex(330, 443);
vertex(320, 462);
vertex(331, 472);
vertex(334, 460);
endShape();
}
if(hair <=3 & hair>2){// nose ring changes w/ hair (stud)
strokeWeight(7)
stroke(255, 215, 0)
point(330, 443)
}
}
}
function mousePressed(){
//when you click on the mouse the eye size, hair, haircolor, mouth, and background color changes
eyeWidth = random(60, 150);
eyeHeight = random(50, 100);
hair = random(0, 3);
mouth = random(0,3);
value1 = random(0, 255);
value2 = random(0, 100);
}
![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2023/09/stop-banner.png)
