For my project, I chose to make very cartoonish but expression filled “blumans”. These little characters are portraits that change face shape, expression, and proportions based on the code below.
//Cole Savitz-Vogel
//Section A
//Variability includes, Face Hight and Width, Eye Size, Eye Seperation, Eyebrow Position, Pupil Proportions, Mouth Size, Mouth Position, Smile Ratio, Skin Tone
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 100;
var eyeWidth = .25
var mouthSize = 50;
var mouthDrop = 0;
var smile = 5;
var inBrow = 0;
var outBrow = 0;
var skinR = 200;
var skinG = 200;
var skinB = 250;
function setup() {
createCanvas(640, 480);
}
function draw() {
background(255);
fill(skinR,skinG,skinB)
strokeWeight(0);
ellipse(width / 2, height / 2, faceWidth, faceHeight);
fill(0);
var mouth = width / 2 + faceWidth;
arc(width / 2, (height / 2)+mouthDrop, mouthSize, mouthSize, 0, PI, OPEN);
fill(skinR,skinG,skinB)
arc(width / 2, (height / 2) + mouthDrop - 1, mouthSize - 1, mouthSize - smile, 0, PI, OPEN);
var eyeLX = width / 2 - faceWidth * eyeWidth;
var eyeRX = width / 2 + faceWidth * eyeWidth;
fill(250);
ellipse(eyeLX, height / 2, eyeSize + 4);
ellipse(eyeRX, height / 2, eyeSize + 4);
fill(0);
ellipse(eyeLX, height / 2, eyeSize - 2);
ellipse(eyeRX, height / 2, eyeSize - 2);
strokeWeight(10);
line(eyeLX - inBrow, (height / 2) - 20, eyeLX + 20,(height / 2)- outBrow);
line(eyeRX + inBrow, (height / 2) - 20, eyeRX - 20,(height / 2)- outBrow);
}
function mousePressed() {
faceWidth = random(100, 150);
faceHeight = random(100, 160);
eyeSize = random(10, 30);
eyeWidth = random(.2,.6);
mouthSize = random(30,70);
mouthDrop = random(0,40);
smile = random(.1,50);
inBrow = random(10,25);
outBrow = random(10,25);
skinR = random(100, 200);
skinG = random(100, 200);
skinB = random(200, 250);
}// Emily Franco
// efranco
// Section C
//color only randomized when page is loaded
var x = 0;
//-----SLIDER VARS-----
//stores latest mouseX position for slider
var xPos;
//stores past x positions
var pastXPos=0;
//bar height
var barH = 20;
//bar height
var barWidth = 10;
//tracks if mouse has been pressed
var pressed = 0;
//-----DEFAULT FACE VARS----
var eyeWidth = 16;
var eyeHeight = 24;
function setup() {
createCanvas(640, 480);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
//reference for position of face elements
var y_ref_pos = width/2.5;
strokeWeight(0);
background (138,176,162);
//header
fill(0);
textSize (20);
text ('Slide the arrow to pick a face for me.',10,barH+barWidth+20);
//----EMOTION METER----
//meter sliderer mark
fill("black");
triangle (((width/5)*2)+(width/10),barH-2,((width/5)*2)+(width/10)-3,barH-7,((width/5)*2)+(width/10)+3,barH-7);
if (mouseIsPressed){
//draw over 1st triangle background
background (138,176,162);
triangle (xPos=mouseX,barH-2,mouseX-3,barH-7,mouseX+3,barH-7);
pressed = 1;
}else if (pressed==1){
//draw over 1st triangle background
background (138,176,162);
triangle (xPos,barH-2,xPos-3,barH-7,xPos+3,barH-7);
}
//meter
fill (85,180,220); //blue
//very happy
rect(0,barH,(width/5),barWidth);
//happy
fill(193,230,90); //green
rect(width/5,barH,(width/5),barWidth);
//meh...
fill(225,181,37); //yellow
rect((width/5)*2,barH,(width/5),barWidth);
//shock
fill(252,65,18); //red
rect((width/5)*3,barH,(width/5),barWidth);
//angry
fill(137,5,5); //dark red
rect((width/5)*4,barH,(width/5),barWidth);
//--------HAIR-------
//back hair
fill (104, 66, 17); //dark brown
ellipse (width/2, y_ref_pos+28,260,400);
//--------CLOTHES-------
fill (220, 96, 46); //orange
arc((width/2)-32+44,y_ref_pos+158,280,70,Math.PI,0);
//shirt
rect((width/2)-87,y_ref_pos+140,181,180);
//------DEFALUT FACE-----
strokeWeight (.25);
//base ears
fill (238, 217, 197); //beige
ellipse ((width/2)-106,y_ref_pos,32,60);
ellipse ((width/2)+106,y_ref_pos,32,60);
//neck
fill (238, 217, 197);//beige
ellipse((width/2)+1, y_ref_pos+130,90,60);
strokeWeight (0);
rect((width/2)-44, y_ref_pos+90,90,40);
//base face
stroke("black");
strokeWeight (.5);
ellipse (width/2,y_ref_pos,200,232);
if (pressed == 1){
//nose
strokeWeight (0);
fill (229, 155, 99); //orange
triangle (width/2,y_ref_pos-20,(width/2)-20,y_ref_pos+40, width/2,y_ref_pos+38);
}
//-----EXPRESSIONS----
//mouse position over emotion meter changes face expression
//VERY HAPPY
if (xPos<width/5){
//outter eye
strokeWeight (0.25);
fill (242,239,234); //white
stroke (58,37,22); //dark brown
circle ((width/2)-46,y_ref_pos-20,eyeWidth+40);
circle ((width/2)+46,y_ref_pos-20,eyeWidth+40);
//eye pupil
fill (58,37,22); //dark brown
circle ((width/2)-46,y_ref_pos-20,eyeWidth+30);
circle ((width/2)+46,y_ref_pos-20,eyeWidth+30);
//eye highlight
fill (242,239,234); //white
circle ((width/2)-46,y_ref_pos-20,eyeWidth);
circle ((width/2)+46,y_ref_pos-20,eyeWidth);
//eye small highlights
fill (242,239,234); //white
ellipse ((width/2)-56,y_ref_pos-30,eyeWidth-10);
ellipse ((width/2)+56,y_ref_pos-30,eyeWidth-10);
//mouth
strokeWeight (1);
stroke("black");
fill (233, 161, 135); //pink
arc((width/2)-2,y_ref_pos+55,80,50,0,3.15);
line ((width/2)+38,y_ref_pos+55,(width/2)-42,y_ref_pos+55);
//cheeks
fill (233, 161, 135); //pink
strokeWeight (0);
circle((width/2)+54,y_ref_pos+30,40);
circle((width/2)-60,y_ref_pos+30,40);
}
//HAPPY
else if (xPos<(width/5)*2 & xPos>=width/5){
//eyes
fill (58,37,22); //dark brown
ellipse ((width/2)-44,y_ref_pos-20,eyeWidth,eyeHeight);
ellipse ((width/2)+44,y_ref_pos-20,eyeWidth,eyeHeight);
//mouth
strokeWeight (1);
stroke("black");
noFill();
arc((width/2)-2,y_ref_pos+70,20,14,0,3);
//cheeks
fill (233, 161, 135); //pink
strokeWeight (0);
circle((width/2)+44,y_ref_pos+30,40);
circle((width/2)-50,y_ref_pos+30,40);
}
//MEH
else if (xPos<(width/5)*3 & xPos>=(width/5)*2){
//mouth
strokeWeight (1);
stroke("black");
line ((width/2)+40,y_ref_pos+65,(width/2)-40,y_ref_pos+65);
//cheeks
fill (233, 161, 135); //pink
strokeWeight (0);
circle((width/2)+44,y_ref_pos+30,40);
circle((width/2)-50,y_ref_pos+30,40);
//outter eye
fill (58,37,22); //dark brown
circle ((width/2)-46,y_ref_pos-20,eyeWidth);
circle ((width/2)+46,y_ref_pos-20,eyeWidth);
}
//SHOCK
else if (xPos<(width/5)*4 & xPos>=(width/5)*3){
//eyes
fill (58,37,22); //dark brown
ellipse ((width/2)-44,y_ref_pos-30,eyeWidth+6,eyeHeight*2);
ellipse ((width/2)+44,y_ref_pos-30,eyeWidth+6,eyeHeight*2);
//mouth
strokeWeight (1);
stroke("black");
fill (233, 161, 135); //pink
arc((width/2)-2,y_ref_pos+95,40,90,3.15,0);
line((width/2)+18,y_ref_pos+95,(width/2)-22,y_ref_pos+95);
//cheeks
fill (233, 161, 135); //pink
strokeWeight (0);
circle((width/2)+60,y_ref_pos+30,40);
circle((width/2)-60,y_ref_pos+30,40);
}
//ANGRY
else if (xPos>(width/5)*4){
//eyes
fill (58,37,22); //dark brown
arc((width/2)-50,y_ref_pos-20,50,25,0,3.15);
arc((width/2)+50,y_ref_pos-20,50,25,0,3.15);
//eyebrows
strokeWeight (3);
stroke(58,37,22); //dark brown
line ((width/2)-75,y_ref_pos-35,(width/2)-25,y_ref_pos-25);
line ((width/2)+75,y_ref_pos-35,(width/2)+25,y_ref_pos-25);
//mouth
strokeWeight (2);
stroke("black");
noFill();
arc((width/2)-2,y_ref_pos+80,30,40,3.1,0);
}
//------BODY-----
//shoulders
strokeWeight (0);
fill (238, 217, 197); //beige
circle((width/2)-120, y_ref_pos+182,80);
circle((width/2)+126, y_ref_pos+180,80);
//arms
rect((width/2)-160,y_ref_pos+180,80,140);
rect((width/2)+86,y_ref_pos+180,80,140);
//-----DETAILS----
//earings
fill (111, 115, 210); //purple
square ((width/2)-114,y_ref_pos+30,16);
square ((width/2)+100,y_ref_pos+30,16);
//bangs
push();
strokeWeight(0);
fill (104, 66, 17); //brown
rotate (-0.9);
ellipse (width/2-230, y_ref_pos+140,40,150);
rotate (1.7);
ellipse (width/2-5, y_ref_pos-330,40,150);
pop();
//hairclip
//random color generated in first loop and only changes when page is reloaded
x=x+30;
if (x==30) {
stroke(r=random(200),g=random (200),b=random(200));
}else{
stroke(r,g,b);
}
strokeWeight(4);
line(width/2+50,y_ref_pos-60,(width/2)+80,y_ref_pos-80);
//shirt details
strokeWeight(8);
stroke(r,g,b);
point(width/2, y_ref_pos+200);
}
/*
eliana fleischer
efleisch
section e
*/
//Global variables to be used across different functions
//these are all the variables that will be used to make the initial face before randomization.
var eyewidth = 20;
var eyeheight = 20;
var faceshape = 1;
var facewidth = 200;
var faceheight = 200;
var eyecolorR = (15);
var eyecolorG = (255);
var eyecolorB = (100);
var noseheight = 5;
var nosewidth = 5;
var iris = 10;
var skinR = 100;
var skinG = 100;
var skinB = 100;
var x = 320;
var y = 240;
function setup() {
createCanvas(640, 480);
background(220);
}
function draw() {
background(eyecolorR, eyecolorG, eyecolorB); // sets background to the random variables for the eye color
//faces
push();
fill(skinR,skinG, skinB);
noStroke()
if (faceshape == 1){
face1 = ellipse(x,y, facewidth, faceheight); //draws ellipse face
} else {
face2 = rect(x - facewidth /2 , y - faceheight /2 , facewidth , faceheight); //draws square face
}
//nose
fill(255, 204, 255)
nose = ellipse(x, y, noseheight, nosewidth); //draws nose at the center of the face
pop();
//eyes
fill(255); //white fill for irises
strokeWeight(2); // outline for eyes
Leye = arc(x - facewidth / 5, y - faceheight / 5, eyewidth, eyeheight, 0, PI + QUARTER_PI, OPEN); //draws left eye
Reye = arc(x + facewidth / 5, y - faceheight / 5, eyewidth, eyeheight,100, PI + QUARTER_PI, OPEN); //draws right eye
//iris
fill(eyecolorR, eyecolorG, eyecolorB); // fills in the irises with the random eye color
Riris = ellipse(x + facewidth / 5, y - faceheight / 5, iris, iris)
Liris = ellipse(x - facewidth / 5, y - faceheight / 5, iris, iris);
//mouth
strokeWeight(1);
mouth = line(x - facewidth / 5, y + faceheight / 5, x + facewidth / 5, y + faceheight / 5 );
}
function mousePressed() {
// when the user clicks, these variables are reassigned
facewidth = random(100, 200);
faceheight = random(100, 200);
eyewidth = random(15, 45);
eyeheight = random(10, 45);
nosewidth = random(5,15);
noseheight = random(5,15);
iris = random(1, 7);
eyecolorR = random(0,255);
eyecolorG = random(0,255);
eyecolorB = random(0,255);
faceshape = int(random(1,3));
skinR = random(100,200);
skinG = random(100,200);
skinB = random(100,200);
}The most difficult part of this project for me was figuring out a creative solution to increase variability and actually make unique and distinct images through randomization.
]]>/* atayao
lab section E
project 2
*/
// random reassignment (RR)
var eyeSize = 20;
var eyeDistance = 0.20;
var faceWidth = 115;
var faceHeight = 105;
// pick a card, any card (PAC)
var mouth = 0;
var skin = 0;
// variables from canvas dimensions
var x = 320;
var y = 240;
function setup() {
createCanvas(640, 480);
}
function draw() {
background(255);
strokeWeight(2.5);
/* if-else statements test for the current value of
PAC variables to fill in skin color, mouth, & any facial marks.*/
// SKIN COLORS
if (skin == 0) {
// bright blue skin
fill(33, 118, 255);
ellipse(width/2, height/2, faceWidth, faceHeight);
} else if (skin == 1) {
// pink skin
fill(255, 79, 170);
ellipse(width/2, height/2, faceWidth, faceHeight);
} else if (skin == 2) {
// green skin
fill(136, 212, 38);
ellipse(width/2, height/2, faceWidth, faceHeight);
} else if (skin == 3) {
// orange skin
fill(255, 117, 43);
ellipse(width/2, height/2, faceWidth, faceHeight);
} else if (skin == 4) {
// turquoise skin
fill(2, 206, 217);
ellipse(width/2, height/2, faceWidth, faceHeight);
} else {
// yellow skin
fill(255, 228, 56);
ellipse(width/2, height/2, faceWidth, faceHeight);
}
// MOUTH SHAPES
if (mouth == 0) {
// open mouth
fill(0);
circle(width/2, (height/2 + (faceHeight/3)), faceWidth/6);
} else if (mouth == 1) {
// neutral mouth
line((x - faceWidth/5), (y + faceHeight/4), (x + faceWidth/5), (y + faceHeight/4));
} else if (mouth == 2) {
// smiling mouth
fill(255);
triangle((x - faceWidth/5), (y + faceHeight/4), (x + faceWidth/5), (y + faceHeight/4), x, (y + faceHeight/3));
} else {
// dot mouth
fill(0);
circle(width/2, (height/2 + (faceHeight/3)), faceWidth/25);
}
// EYES
var eyeLX = width / 2 - faceWidth * eyeDistance; // x-coordinate for left eye
var eyeRX = width / 2 + faceWidth * eyeDistance; // x-coordinate for right eye
fill(255);
ellipse(eyeLX, height / 2, eyeSize, eyeSize); // left eye
ellipse(eyeRX, height / 2, eyeSize, eyeSize); // right eye
fill(0);
ellipse(eyeLX, height/2, eyeSize/2, eyeSize/2); // left pupil
ellipse(eyeRX, height/2, eyeSize/2, eyeSize/2); // right pupil
fill(0);
}
function mousePressed() {
/* when the mouse is clicked, variables are reassigned to random values within
specified ranges. */
// RR
eyeSize = random(18, 35);
eyeDistance = random(0.20, 0.28);
faceWidth = random(75, 150);
faceHeight = random(100, 200);
// PAC
skin = int(random(0, 6));
mouth = int(random(0, 4));
cheeks = int(random(0, 6));
}The most challenging and interesting part of this project for me was figuring out the maximum random variability possible to create interesting combinations while still making the overall images legible as faces.
]]>P2 Shirley
//Xinyi Du
//15104 Section B
var eyes = 20;
var mouth = 20;
var face = 100;
var ears = 20;
var r // red
var g // green
var b // blue
var hairDeco = 20; //hair decorations
var hair = 30; //hair
var cloth = 200;
function setup() {
createCanvas(300, 300);
}
function draw() {
background(80);
noStroke();
// clothing
fill(255-r, 255-g, 255-b);
triangle(width / 2, height / 2, width/2-cloth/2, height/2+cloth, width/2+cloth/2, height/2+cloth);
fill(255, 229, 204);
ellipse(width / 2, height / 2, face, face); // face
fill(255, 229, 204);
ellipse(width / 2 - face / 2, height / 2, ears, ears); // left ear
fill(255, 229, 204);
ellipse(width / 2 + face / 2, height / 2, ears, ears); // right ear
fill(255, 102, 102);
ellipse(width/2, height/2+face/4, mouth,); // mouth
var eyeL = width/2 - face/4; // left eye
var eyeR = width/2 + face/4; // right eye
fill(64, 64, 64);
ellipse(eyeL, height/2, eyes, eyes+5);
ellipse(eyeR, height/2, eyes, eyes+5);
//hairstyle
fill(r, g, b);
ellipse(width/2, height/2-face/2, hairDeco, hairDeco); // hair decorations 1
fill(r, g, b);
// hair 1
var x1 = width/2-hair/2;
var y1 = height/2-face/2-hairDeco-hair;
var x2 = width/2+hair/2;
var y2 = height/2-face/2-hairDeco-hair;
var x3 = width/2;
var y3 = height/2-face/2-hairDeco/2;
triangle(x1, y1, x2, y2, x3, y3);
fill(r-30, g-30, b-30);
ellipse(width/2-face/4, height/2-face/3, hairDeco, hairDeco); // hair decorations 2
ellipse(width/2+face/4, height/2-face/3, hairDeco, hairDeco); // hair decorations 3
// hair 2
var x1 = width/2-face/4;
var y1 = height/2-face/3-hairDeco/2;
var x2 = width/2-face/4-hair/2;
var y2 = height/2-face/3-hairDeco/2-hair;
var x3 = width/2-face/4+hair/2;
var y3 = height/2-face/3-hairDeco/2-hair;
triangle(x1, y1, x2, y2, x3, y3);
// hair 3
var x1 = width/2+face/4;
var y1 = height/2-face/3-hairDeco/2;
var x2 = width/2+face/4-hair/2;
var y2 = height/2-face/3-hairDeco/2-hair;
var x3 = width/2+face/4+hair/2;
var y3 = height/2-face/3-hairDeco/2-hair;
triangle(x1, y1, x2, y2, x3, y3);
}
function mousePressed() {
face = random(80, 150);
eyes = random(10, 20);
ears = random(12, 30);
mouth = random(10, 25);
hairDeco = random(10, 30);
hair = random(20, 50);
r = random(10, 250);
g = random(10, 250);
b = random(10, 250);
cloth = random(150, 300);
//
}
For this project I wanted to make a fun character that dances every time you click it!
This project was extremely difficult for me because I kept making tiny mistakes which absolutely broke my code. This was definitely a learning experience, and towards the end I had more fun creating.
// Kathy Lee
//Section D
// Variable Setup
var faceHeight = 200;
var faceWidth = 200;
var shirt = 200;
var eye = 50;
var mouth = 50;
// Color Variables
var r = 50;
var g = 50;
var b = 50;
// mouthsize, hair length, eyesize
function setup() {
createCanvas(640, 480);
text("Smiling Alien", 10, 15);
}
function draw() {
background (220);
noStroke();
// Shirt
fill(200 - r, 200 - g, 200 - b);
ellipse((width / 2), (height / 2) + 200, shirt + 100, shirt * 1.5);
// Face
fill(r + 50, g + 50, b + 50);
ellipse(width / 2, (height / 2) + 50, faceWidth, faceHeight);
// Eyes
fill(r + 150, g + 150, b + 150);
ellipse((width / 2.5) + 25, height / 2, faceWidth - 150, eye); // left eye
fill(r + 150, g + 150, b + 150);
ellipse((width / 2) + 40, height / 2, faceWidth - 150, eye); // right eye
fill("black");
ellipse((width / 2.5) + 20, height / 2, faceWidth - 200, eye - 30); // left pupil
fill("black")
ellipse((width / 2.5) + 110, height / 2, faceWidth - 200, eye - 30); // right pupil
// Mouth
fill(r + 175, g + 175, b + 175);
ellipse(width / 2, (height / 2) + 75, mouth + 50, mouth / 2);
fill(r + 50, g + 50, b + 50);
ellipse(width / 2, (height / 2) + 70, mouth + 50, mouth / 2); // top ellipse to make smiling mouth
}
function mousePressed() {
faceWidth = random(150, 300);
faceHeight = random(150, 300);
shirt = random(200, 300);
eye = random(50, 60);
mouth = random(50, 150);
r = random(0, 255);
g = random(0, 255);
b = random(0, 255);
}
While I was creating this, I just thought of the things that could change and added as I went. The first things that came to mind were doing things with the eyes because unfilled they looked a bit creepy. But then I added hair and thought it would be fun to have other things pop up.
]]>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.
//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);
}