Within my project, what I wanted to do was to examine what we call faces. What exactly are the processes by which we determine what is a face or not? In such, I attempted to use the most chaotic combinations by randomizing virtually every color combination on screen possible.
sketch
]]>var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var x = 1;
var y = 255;
var z = 2;
var mouth = 1
var hair = 1
function setup() {
createCanvas(300, 300);
}
function draw() {
strokeWeight(3);
stroke(y,x,z);
fill(x,y,z);
background(y - 100, x + 30, z + 5);
ellipse(width / 2, height / 2, faceWidth, faceHeight);
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
fill(x - 80, y - 80, z - 80);
ellipse(eyeLX, height / 2, eyeSize, eyeSize);
ellipse(eyeRX, height / 2, eyeSize, eyeSize);
if (mouth == 1) {
//happy mouth
arc(width / 2, (height / 2) + 25, faceWidth - 40, faceHeight / 2, 0, radians(180));
}
if (mouth == 2) {
//sad face
noFill();
arc(width / 2, (height / 2) + 50, faceWidth - 40, faceHeight / 2, radians(180), 0);
}
if (mouth == 3) {
//shocked mouth
fill(255,102,102);
ellipse(width / 2, (height / 2) + 50, faceHeight / 2, faceWidth / 2);
}
if (hair == 1) {
//party hat
fill(z,x,y);
triangle((width / 2) - (faceWidth / 2), (height / 2) - (faceHeight / 2), width / 2, (height / 4) - 70, (width / 2) + (faceWidth / 2), (height / 2) - (faceHeight / 2));
}
if (hair == 2) {
//beret
fill(0);
ellipse(width / 2, (height / 2) - 70, faceWidth + 20, faceHeight / 2);
}
if (hair == 3) {
//bowl cut
fill(z,y,x + 10);
arc(width / 2, (height / 2) - (faceHeight / 2) + 30, faceHeight - 15,(faceWidth / 2) + 30, radians(180), 0);
rect((width / 2) - (faceWidth / 1.5), (height / 2) - (faceHeight / 2) + 30, faceWidth / 3, faceHeight / 2);
rect((width / 2) + (faceWidth / 3), (height / 2) - (faceHeight / 2) + 30, faceWidth / 3, faceHeight / 2);
}
}
function mousePressed() {
if (mouseIsPressed == true) {
x = random(0,255);
y = random(0,255);
z = random(0,255);
fill(x,y,z);
}
faceWidth = random(75, 150);
faceHeight = random(100, 200);
eyeSize = random(10, 30);
faceColor = random(0,255);
hair += 1;
if (hair > 3) {
hair = 1;
}
mouth += 1;
if (mouth > 3) {
mouth = 1;
}
}sketch
]]>//Srishty Bhavsar
//Section C
//15-104
// GLOBAL VARIABLES
var headsize = 100;
var eye = 1;
var mouth = 1;
var earring = 1;
var shirtcol = 1;
var hair = 1;
function setup() {
createCanvas(500, 300);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
createCanvas(500,300);
if (mouseY < (width/2)) { // If mouse is in top half of canvas, color is yellow. If in lower half, color is blue
background(252,239,145);
} else {
background(204, 204, 255);
}
strokeWeight(0);
triangle(240,180,260,180,250,195); //mouth
fill(164,116,73); // TAN
rect(240,208,20,40); //neck
//HEAD CHANGE, HAIR CHANGE, EAR CHANGE
if (headsize <= 88 ) {
fill(0);
ellipse(250,280,180,400); // hair
fill(164,116,73); // TAN
rect(240,208,20,40); //neck
ellipse(200,160,15,25); //ear
ellipse(300,160,15,25); //ear 2
//EARRING CHANGE WITHIN IF
if ( earring == 1) {
fill(255); // white
ellipse(300,170,3,10); //earrings
ellipse(200,170,3,10); //earrings
} else if (earring == 2) {
fill(255); //pink
ellipse(300,170,5,5) //earrings
ellipse(200,170,5,5); //earrings
} else {
fill(207,255,229); //mint
rect(297, 170, 3, 8); // rect earrings
rect(200, 170, 3, 8); // rect earrings
}
fill(189,154,122); // skin color
ellipse(250,150,100,120); // head + ears
fill(0);
arc(280, 105, 55, 70, 1, PI + QUARTER_PI, CHORD); //front bang
rect(270,93,10,23); //bangs
rect(260,93,10,23); //bangs
rect(280,101,10,23); //bangs
rect(289,110,9,23); //bangs
triangle(200,140,210,103,260,82); // strand
ellipse(225,133,17,10); // one eye
fill(189,154,122); // SKIN
ellipse(225,135,17,10); // skin carve
} else if (headsize >= 88 & headsize <= 100) {
fill(132, 34, 34); // AUBURN HAIR
ellipse(250,150,130,150); // TIED UP
fill(164,116,73); // TAN
rect(240,208,20,40); //neck
ellipse(290,160,15,25); //ear adjusted slim
ellipse(210,160,15,25); //ear 2 adjusted slim
//EARRING CHANGE WITHIN IF
if ( earring >= 10 & earring <= 20) {
fill(255); // white
ellipse(290,170,3,10); //earrings
ellipse(210,170,3,10); //earrings
} else if (earring >= 20 & earring <= 30) {
fill('pink'); // pink
ellipse(290,170,5,5); // circle earrings
ellipse(210,170,5,5); // circle earrings
} else {
fill(207,255,229); //mint
rect(290, 170, 3, 8); // rect earrings
rect(210, 170, 3, 8); // rect earrings
}
fill(189,154,122); // skin color
ellipse(250,150,75,120); // slim head + ears
fill(132, 34, 34);
arc(280, 105, 55, 70, 1, PI + QUARTER_PI, CHORD); //front bang
rect(270,93,10,23); //bangs
rect(260,93,10,23); //bangs
rect(280,101,10,23); //bangs
rect(289,110,9,23); //bangs
fill(132, 34, 34); // AUBURN EYEBROWS
ellipse(225,133,17,10); // one eyebrow
fill(189,154,122); // SKIN
ellipse(225,135,17,10); // skin carve
} else {
fill(108,25,96); // MAGENTA HAIR
ellipse(250,280,200,400); // hair
fill(164,116,73); // TAN
rect(240,208,20,40); //neck
ellipse(310,160,15,25); //ear adjusted wide
ellipse(190,160,15,25); //ear 2 adjusted wide
fill(63, 20, 20);
ellipse(310,170,3,10); //earrings
ellipse(190,170,3,10); //earrings
fill(189,154,122);
ellipse(250,150,120,120); // widest head + wider hair + ears
fill(108,25,96); // MAGENTA eyebrow
ellipse(225,133,19,10); // one eyebrow
ellipse(275,133,19,10); //second eyebrow
fill(189,154,122); // SKIN
ellipse(225,135,19,10); // skin carve
ellipse(275,135,19,10); //skin carve
fill(108,25,96);
triangle(180,140,210,103,255,80); // hair strand
}
if (eye >= 10 & eye <= 20){
fill(72,60,50); // BROWN
ellipse(225,145,10,10); // one eye
ellipse(275,145,10,10); //second eye
} else if (eye >= 20 & eye <= 30) {
fill(72,60,50); // BROWN
ellipse(225,145,10,10); // one eye
ellipse(275,145,10,10); //second eye
fill(189,154,122); // SKIN
ellipse(225,147,10,10); // one eye SKIN COLOR
ellipse(275,147,10,10); //second eye SKIN COLOR
} else if (eye >= 30 & eye <= 40) {
fill(72,60,50); // BROWN
ellipse(225,145,10,10); // one eye
ellipse(275,146,10,10); //second eye
fill(189,154,122); // SKIN
ellipse(275,148,10,10); //second eye
} else {
fill(72,60,50); // BROWN
ellipse(225,145,10,10); // one eye
ellipse(275,145,10,10); //second eye
}
strokeWeight(0);
fill(0);
stroke(72,60,50); // BLUSH PINK
fill(242,212,215);
ellipse(220,170,10,5); //blush1
ellipse(280,170,10,5); //blush2
strokeWeight(.5);
stroke(101,67,33); // DARK BROWN
line(255,140,255,160); // nose long
line(245,160,255,160); // nose short
strokeWeight(0);
// SHIRT COLOR CHANGE
if (shirtcol >= 10 & shirtcol <= 20) {
fill(79, 121, 66); //DARK GREEN
ellipse(250,330,140,200); //arms
fill(134,169,111);
ellipse(250,360,115,280); // body
} else if (shirtcol >= 20 & shirtcol <= 30) {
fill(172, 112, 136); //DARK GREEN
ellipse(250,330,140,200); //arms
fill(222, 182, 171);
ellipse(250,360,115,280); // body
} else if (shirtcol >= 30 & shirtcol <= 40) {
fill(241, 166, 97); //DARK GREEN
ellipse(250,330,140,200); //arms
fill(255, 216, 169);
ellipse(250,360,115,280); // body
} else if (shirtcol >= 40 & shirtcol <= 50) {
fill(134, 88, 88); //DARK GREEN
ellipse(250,330,140,200); //arms
fill(142, 127, 127);
ellipse(250,360,115,280); // body
} else if (shirtcol >= 50 & shirtcol <= 60) {
fill(110, 133, 183); //DARK GREEN
ellipse(250,330,140,200); //arms
fill(196, 215, 224);
ellipse(250,360,115,280); // body
} else {
fill(79, 121, 66); //DARK GREEN
ellipse(250,330,140,200); //arms
fill(134,169,111);
ellipse(250,360,115,280); // body
}
// MOUTH CHANGE
if (mouth >= 10 & mouth <= 20) {
fill(255,182,193); // pink
triangle(240,180,260,180,250,195); // MOUTH HAPPY
} else if (mouth >= 20 & mouth <= 30) {
fill(203, 76, 78); // light red
ellipse(250,180,10,20); // MOUTH SHOCKED
} else if (mouth >= 30 & mouth <= 40) {
strokeWeight(1);
stroke(0); //BLAXK
line(240,180,260,180) //PLAIN MOUTH
} else {
strokeWeight(1);
stroke(0);
line(240,180,260,180);
}
}
function mousePressed() {
//when the user clicks, the variables of the following features are reassigned to random values within their respective ranges
headsize = random(75,120); // head witdth
eye = random(10,40); // 4 eye types
mouth = random(10,40); // 4 mouth types
earring = random (10,30); // 3 earring types
shirtcol = random(10,60); // 6 color shirts
} sketch_bpdohert_02
]]>// Bridget Doherty
// Section C
var eyeSize = 20;
var faceWidth = 200;
var faceHeight = 300;
var noseWidth = 20
var on = true;
var color1 = 50;
var color2 = 50;
var color3 = 50;
function setup() {
createCanvas(640, 480);
angleMode(DEGREES);
}
function draw() {
let backgroundColor = color(color3, color2, color1);
background(backgroundColor);
let eyeColor = (color('#7d754f'));
let skinColor = (color(255, 220, 177));
let hairColor = (color('#80643d'));
var centerX = width / 2;
var centerY = height / 2;
//neck
fill(skinColor);
rect(centerX-(faceWidth/3), centerY+30, faceWidth/1.5, 200);
// main face
ellipse(centerX, centerY, faceWidth, faceHeight);
// nose
triangle(centerX, centerY+40, centerX, centerY, centerX+noseWidth, centerY+40);
//shirt
let shirtColor = color(color1, color2, color3)
fill(shirtColor);
rect(centerX-(faceWidth/2), centerY+170, faceWidth, 70)
let sleeveColor = color(color1-50, color2-50, color3-50)
fill(sleeveColor);
triangle(centerX-(faceWidth/2), centerY+170, centerX-(faceWidth/2)-30, 480, centerX-(faceWidth/2), 480);
triangle(centerX+(faceWidth/2), centerY+170, centerX+(faceWidth/2)+30, 480, centerX+(faceWidth/2), 480)
// eyes
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
fill('white'); // left eye
ellipse(eyeLX, centerY, eyeSize+20, eyeSize);
fill(eyeColor);
ellipse(eyeLX, centerY, eyeSize, eyeSize);
fill('black')
ellipse(eyeLX, centerY, eyeSize/2, eyeSize/2);
fill('white'); // right eye
ellipse(eyeRX, centerY, eyeSize+20, eyeSize);
fill(eyeColor);
ellipse(eyeRX, centerY, eyeSize, eyeSize);
fill('black')
ellipse(eyeRX, centerY, eyeSize/2, eyeSize/2);
// bowl cut hair
var hairY = (height / 2) - faceHeight/8
fill(hairColor);
arc(centerX, hairY, faceWidth, faceHeight, 180, 0);
// happy or sad mouth
var mouthY = (height / 2) + faceHeight/3.5
stroke(10);
noFill();
if (on == true) {
arc(centerX, mouthY, 80, 60, 0, 180);
} else if (on == false) {
arc(centerX, mouthY, 80, 60, 180, 0);
}
}
function mousePressed() {
faceWidth = random(150, 300);
faceHeight = random(150, 350);
eyeSize = random(10, 30);
noseWidth = random(-40, 40);
if (on == true) {
on = false;
} else {
on = true; }
getRandomColor();
}
function getRandomColor(){
// function generates a random number for color variables
color1 = random(40, 255);
color2 = random(40, 255);
color3 = random(40, 255);
}
//Katie Makarska
//Section C
var eyeWidth = 20;
var eyeHeight = 20
var faceWidth = 100;
var faceHeight = 150;
var smileWidth = 80;
var smileHeight = 40;
function setup() {
createCanvas(300, 300);
bgColor = color( random(255), random(255), random(255));
}
function draw() {
background(bgColor);
//eyes
ellipse(width / 2, height / 2, faceWidth, faceHeight);
var eyeLX = width / 2 – faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
ellipse(eyeLX, height / 2, eyeWidth, eyeHeight);
ellipse(eyeRX, height / 2, eyeWidth, eyeHeight);
//smile
var smile1 = width/2 – faceWidth *0.01;
var smile2 = width/2 + faceHeight *0.25;
arc(smile1, smile2, smileWidth, smileHeight, 0, PI);
//random colors
r = random(50, 255);
g = random(100,200);
b = random(100, 200);
}
function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges. For example,
// ‘faceWidth’ gets a random value between 75 and 150.
faceWidth = random(90, 150);
faceHeight = random(100, 200);
eyeWidth = random(10, 30);
eyeHeight = random(10, 30);
smileWidth = random(50, 80);
smileHeight = random(20, 40);
//random face color
fill(r, g, b);
//random background color
bgColor = color( random(255), random(255), random(255));
}
My Goal was to create a simple interactive face which resulted different types with each click. Click to see different faces.
sketch
]]>//Favour Adesina Section B
var faceWidth = 300;
var lipHeight = 20;
var lipWidth = 60;
var BlipWidth = 100;
var eyeWidth = 70;
var eyeHeight = 100;
var pupSize = 60;
var faceHeight = 400;
function setup() {
createCanvas(600, 480);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
noStroke()
background(247, 195, 218);
//SHOULDER
fill(255, 67, 89);
ellipse(width/2, height/2 + faceHeight/2, 2*faceWidth, faceHeight);
//EARS
fill(141, 75, 36);
ellipse(width/2 - faceWidth/2, height/2, faceWidth/4, faceHeight/4); //right ear outer
ellipse(width/2 + faceWidth/2, height/2, faceWidth/4, faceHeight/4); //left ear outer
fill(34, 20, 13);
ellipse(width/2 - faceWidth/2, height/2, faceWidth/8, faceHeight/8); //right ear inner
ellipse(width/2 + faceWidth/2, height/2, faceWidth/8, faceHeight/8); //left ear inner
//FACE
fill(141, 75, 36);
ellipse(width/2, height/2, faceWidth, faceHeight); // face
//EARRINGS
fill(255, 255, 0);
triangle((width/2 - (faceWidth/2 + faceWidth/50)), height/2 + faceHeight/4, width/2 - faceWidth/2, height/2 + faceHeight/16, width/2 - faceWidth/1.5, height/2 + faceHeight/4);
triangle((width/2 + (faceWidth/2 - faceWidth/100)), height/2 + faceHeight/4, width/2 + faceWidth/2, height/2 + faceHeight/16, width/2 + faceWidth/1.55, height/2 + faceHeight/4);
//EYES
var LXeye = width/2 - faceWidth * 0.26;
var RXeye = width/2 + faceWidth * 0.26;
fill(255, 255, 255);
ellipse(LXeye, height/2, eyeWidth, eyeHeight); //Eye Whites
ellipse(RXeye, height/2, eyeWidth, eyeHeight); //Eye Whites
fill(104, 54, 37);
ellipse(LXeye, height/2, pupSize, pupSize); //Pupils
ellipse(RXeye, height/2, pupSize, pupSize); //pupils
fill(0);
ellipse(LXeye, height/2, 20, 20); //inner pupils
ellipse(RXeye, height/2, 20, 20); //inner pupils
//NOSE
stroke(35, 31, 32);
strokeWeight(7);
line(width/2, height/2, width/2, (height/2)+ eyeHeight/3); //Nose bridge
ellipse((width/2)-5, (height/2)+ eyeHeight/3, faceWidth/25, faceWidth/25); // nose
ellipse((width/2)+5, (height/2)+ eyeHeight/3, faceWidth/25, faceWidth/25); // nose
//LIPS
strokeWeight(2);
var BlipY = height/2 + faceHeight * 0.27 + lipHeight/2;
fill(122, 22, 25);
ellipse(width/2, BlipY, BlipWidth, lipHeight);
noStroke();
fill(173, 69, 87); //light pink
ellipse(width/2, BlipY, lipWidth/2, lipHeight/2); //inner mouth
//HAIR
fill(34, 20, 13);
ellipse(width/2, height/2 - faceHeight/2, width/7, height/6);
ellipse(width/2 - 55, height/2 - faceHeight/2, width/8, height/7);
ellipse(width/2 + 55, height/2 - faceHeight/2, width/8, height/7);
}
function mousePressed() {
faceWidth = random(300, 500);
faceHeight = random(260, 400);
lipHeight = random(10, 50);
pupSize = random(20, 70);
lipWidth = random(10, 60);
BlipWidth = random(30, 100);
eyeWidth = random(20, 150);
eyeHeight = random(80, 170);
}
Variables:
- The face changes color as u move your mouse.
- Eyes and arms follows the mouse.
- When mouse is pressed, the hands will grow fingers.
var mouse = false;
function setup() {
createCanvas(480, 640);
background(220);
}
function draw() {
background(220);
drawFace();
noFill();
drawMouth();
drawTeeth();
drawLip();
eyeBallOne();
eyeBallTwo();
handOne();
handTwo();
}
function drawMouth() {
strokeWeight(4);
fill(255,0,0,255);
curve(145, 250, 145, 200, 335, 200, 335, 250);
curve(145, -400, 145, 200, 335, 200, 335, -400);
}
function drawLip() {
strokeWeight(4);
stroke(0);
noFill();
curve(145, 250, 145, 200, 335, 200, 335, 250);
curve(145, -400, 145, 200, 335, 200, 335, -400);
}
function drawTeeth() {
strokeWeight(3);
stroke(255);
line(145, 200, 175, 248);
line(335, 200, 305, 248);
line(175, 248, 205, 195);
line(305, 248, 275, 195);
line (205, 195, 240, 275);
line (275, 195, 240, 275);
}
function drawFace() {
strokeWeight(5);
let xValue = mouseX/width*255;
let yValue = mouseY/width*255;
let zValue = (xValue+yValue)/4;
fill(xValue,yValue,zValue+120);
rect (100,100,280,320);
}
function eyeBallOne() {
strokeWeight(4);
fill(255,255,255);
ellipse (150,150,50);
let angle = atan2(mouseY - 150, mouseX - 150); // calculate arctangent //
let x = 150 + 20*0.75*cos(angle);
let y = 150 + 20*0.75*sin(angle);
fill(255,0,255);
circle (x,y,15);
}
function eyeBallTwo() {
strokeWeight(4);
fill(255,255,255);
ellipse (330,150,50);
let angle = atan2(mouseY - 150, mouseX - 250); // calculate arctangent //
let x = 330 + 20*0.75*cos(angle);
let y = 150 + 20*0.75*sin(angle);
fill(150,150,0);
circle (x,y,15);
}
function handOne() {
var x = 100;
var y = 420;
var tan = atan2(mouseX-x,mouseY-y);
if (dist (mouseX,mouseY,x,y) < 200)
//if arm mouse is within arm distance//
{ var dis = dist (mouseX,mouseY,x,y) /2;
// mid point of distance between mouse and arm//
var num = (10000)-(dis*dis);
var sid = sqrt(num);
//pathegoriam therom//
stroke (10);
line (x,y, (mouseX-x)/2+x+cos(tan)*sid, (mouseY-y)/2+y-sin(tan)*sid);
line ((mouseX-x)/2+x+cos(tan)*sid, (mouseY-y)/2+y-sin(tan)*sid, mouseX, mouseY);
fill(255,255,255);
ellipse ((mouseX-x)/2+x+cos(tan)*sid, (mouseY-y)/2+y-sin(tan)*sid, 25,25);
if (mouse)
{
strokeWeight(5);
line (mouseX, mouseY, mouseX+30, mouseY-30);
line (mouseX, mouseY, mouseX-30, mouseY-30);
line (mouseX, mouseY, mouseX, mouseY-60);
ellipse (mouseX,mouseY,50,50);
}
else {
ellipse (mouseX,mouseY,50,50);
}
}
else
{
stroke(10);
line (x,y, x+sin(tan)*200, y+cos(tan)*200);
fill(255,255,255);
ellipse (x+sin(tan)*100, y+cos(tan)*100, 25,25);
if (mouse)
{
//hand//
strokeWeight(5);
line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200+30, y+cos(tan)*200-30);
line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200-30, y+cos(tan)*200-30);
line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200, y+cos(tan)*200-60);
//fingers//
ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
}
else {
ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
}
}
}
function handTwo() {
var x = 380;
var y = 420;
var tan = atan2(mouseX-x,mouseY-y);
if (dist (mouseX,mouseY,x,y) < 200)
//if arm mouse is within arm distance//
{ var dis = dist (mouseX,mouseY,x,y) /2;
// mid point of distance between mouse and arm//
var num = (10000)-(dis*dis);
var sid = sqrt(num);
//pathegoriam therom//
stroke (10);
line (x,y, (mouseX-x)/2+x-cos(tan)*sid, (mouseY-y)/2+y+sin(tan)*sid);
//origin point to the medien of the triangle (isosceles)//
line ((mouseX-x)/2+x-cos(tan)*sid, (mouseY-y)/2+y+sin(tan)*sid, mouseX, mouseY);
fill(255,255,255);
ellipse ((mouseX-x)/2+x-cos(tan)*sid, (mouseY-y)/2+y+sin(tan)*sid, 25,25);
if (mouse)
{
strokeWeight(5);
line (mouseX, mouseY, mouseX+30, mouseY-30);
line (mouseX, mouseY, mouseX-30, mouseY-30);
line (mouseX, mouseY, mouseX, mouseY-60);
ellipse (mouseX,mouseY,50,50);
}
else {
ellipse (mouseX,mouseY,50,50);
}
}
else
{
stroke(10);
line (x,y, x+sin(tan)*200, y+cos(tan)*200);
fill(255,255,255);
ellipse (x+sin(tan)*100, y+cos(tan)*100, 25,25);
if (mouse)
{
strokeWeight(5);
line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200+30, y+cos(tan)*200-30);
line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200-30, y+cos(tan)*200-30);
line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200, y+cos(tan)*200-60);
ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
}
else {
ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);
}
}
}
function mousePressed() {
mouse =!mouse;
// when pressed show fingers//
}Variable Face
sketchDownload
]]>// Ilia Urgen
// Section B
//background color
var r = 128;
var g = 235;
var b = 255;
//shirt color
var r1 = 217;
var g1 = 0;
var b1 = 0;
var faceWidth = 480;
var faceHeight = 660;
var neckWidth = 250;
var eyebrowHeight = 518;
var eyebrowThickness = 30;
var eyeDiameter = 60;
var eyeCenterX1 = 400;
var eyeCenterY1 = 575;
var eyeCenterX2 = 600;
//nose width coordinates
var noseX = 500;
var noseY = 540;
var mouth = 3;
function setup() {
createCanvas (1000, 1000);
}
function draw() {
background (r, g, b);
//neck outline
noStroke();
fill (243, 207, 187);
rect (375, 500, neckWidth, 800);
//face outline
ellipse (500, 600, faceWidth, faceHeight);
//left ear
arc (500-(faceWidth/2)-15,620,80,160,PI + HALF_PI,PI + HALF_PI);
//right ear
arc (500+(faceWidth/2)+15,620,80,160,PI + HALF_PI,PI + HALF_PI);
//left eye
fill (0,0,0); //black
ellipse (eyeCenterX1, eyeCenterY1, eyeDiameter + 50, eyeDiameter);
fill (255,255,255); //white
ellipse (eyeCenterX1, eyeCenterY1, eyeDiameter + 30, eyeDiameter);
fill (102,51,0); //brown
ellipse (eyeCenterX1, eyeCenterY1, eyeDiameter, eyeDiameter);
fill (0,0,0); //black
ellipse (eyeCenterX1, eyeCenterY1,12,12);
fill (255,255,255); //white
ellipse (eyeCenterX1, eyeCenterY1,5,5);
//right eye
fill (0,0,0); //black
ellipse (eyeCenterX2, eyeCenterY1, eyeDiameter + 50, eyeDiameter);
fill (255,255,255); //white
ellipse (eyeCenterX2, eyeCenterY1, eyeDiameter + 30, eyeDiameter);
fill (102,51,0); //brown
ellipse (eyeCenterX2, eyeCenterY1, eyeDiameter, eyeDiameter);
fill (0,0,0); //black
ellipse (eyeCenterX2, eyeCenterY1,12,12);
fill (255,255,255); //white
ellipse (eyeCenterX2, eyeCenterY1,5,5);
//nose
fill (240,190,180);
triangle (noseX - 50,700,500,noseY,noseX + 50,700);
//t-shirt
fill (r1,g1,b1);
quad (500-(neckWidth/2),920,200,1000,800,1000,500+(neckWidth/2),920);
//left eyebrow
noFill();
strokeWeight (eyebrowThickness);
stroke (55,39,45);
arc (400,eyebrowHeight,120,30,PI,0);
//right eyebrow
arc (600,eyebrowHeight,120,30,PI,0);
//mouth
noFill();
strokeWeight (35);
stroke (193,104,115);
//sad face
if (mouth == 1) {
arc (500,785,180,40,PI,0);
}
//happy face
else if (mouth == 2) {
arc (500,775,180,40,0, PI);
}
//shocked face
else if (mouth == 3) {
fill (255);
stroke (255);
ellipse (500,790,115,10);
noFill();
strokeWeight (35);
stroke (193,104,115);
arc (500,770,180,40,PI,0);
arc (500,780,180,40,0, PI);
}
//ear lines
noFill();
stroke (55,39,45);
strokeWeight (2);
arc (500-(faceWidth/2)-20,625,30,100,HALF_PI, PI + HALF_PI);
arc (500+(faceWidth/2)+20,625,30,100,PI + HALF_PI, HALF_PI);
//hair
strokeWeight (eyebrowThickness);
line (300,660-(faceHeight/2.5),100,(faceHeight/2)-20);
line (310,660-(faceHeight/2.5),120,(faceHeight/2)-25);
line (320,660-(faceHeight/2.5),140,(faceHeight/2)-30);
line (330,660-(faceHeight/2.5),160,(faceHeight/2)-35);
line (340,660-(faceHeight/2.5),180,(faceHeight/2)-40);
line (350,660-(faceHeight/2.5),200,(faceHeight/2)-45);
line (360,660-(faceHeight/2.5),220,(faceHeight/2)-50);
line (370,660-(faceHeight/2.5),240,(faceHeight/2)-55);
line (380,660-(faceHeight/2.5),260,(faceHeight/2)-60);
line (390,660-(faceHeight/2.5),280,(faceHeight/2)-65);
line (400,660-(faceHeight/2.5),300,(faceHeight/2)-70);
line (410,660-(faceHeight/2.5),320,(faceHeight/2)-75);
line (420,660-(faceHeight/2.5),340,(faceHeight/2)-80);
line (430,660-(faceHeight/2.5),360,(faceHeight/2)-85);
line (440,660-(faceHeight/2.5),380,(faceHeight/2)-90);
line (450,660-(faceHeight/2.5),400,(faceHeight/2)-95);
line (460,660-(faceHeight/2.5),420,(faceHeight/2)-100);
line (470,660-(faceHeight/2.5),440,(faceHeight/2)-105);
line (480,660-(faceHeight/2.5),460,(faceHeight/2)-110);
line (490,660-(faceHeight/2.5),480,(faceHeight/2)-115);
line (500,660-(faceHeight/2.5),500,(faceHeight/2)-120);
line (510,660-(faceHeight/2.5),520,(faceHeight/2)-115);
line (520,660-(faceHeight/2.5),540,(faceHeight/2)-110);
line (530,660-(faceHeight/2.5),560,(faceHeight/2)-105);
line (540,660-(faceHeight/2.5),580,(faceHeight/2)-100);
line (550,660-(faceHeight/2.5),600,(faceHeight/2)-95);
line (560,660-(faceHeight/2.5),620,(faceHeight/2)-90);
line (570,660-(faceHeight/2.5),640,(faceHeight/2)-85);
line (580,660-(faceHeight/2.5),660,(faceHeight/2)-80);
line (590,660-(faceHeight/2.5),680,(faceHeight/2)-75);
line (600,660-(faceHeight/2.5),700,(faceHeight/2)-70);
line (610,660-(faceHeight/2.5),720,(faceHeight/2)-65);
line (620,660-(faceHeight/2.5),740,(faceHeight/2)-60);
line (630,660-(faceHeight/2.5),760,(faceHeight/2)-55);
line (640,660-(faceHeight/2.5),780,(faceHeight/2)-50);
line (650,660-(faceHeight/2.5),800,(faceHeight/2)-45);
line (660,660-(faceHeight/2.5),820,(faceHeight/2)-40);
line (670,660-(faceHeight/2.5),840,(faceHeight/2)-35);
line (680,660-(faceHeight/2.5),860,(faceHeight/2)-30);
line (690,660-(faceHeight/2.5),880,(faceHeight/2)-25);
line (700,660-(faceHeight/2.5),900,(faceHeight/2)-20);
}
function mousePressed() {
//background color
r = random (0,255);
g = random (0,255);
b = random (0,255);
//shirt color
r1 = random (0,255);
g1 = random (0,255);
b1 = random (0,255);
faceWidth = random (400, 900);
faceHeight = random (400, 800);
eyebrowThickness = random (10,50);
eyebrowHeight = random (500, 545);
eyeDiameter = random (20,80);
eyeCenterY1 = random (570,600);
//nose width coordinates
noseX = random (480,520);
noseY = random (500,590);
//mouth option 1,2, or 3
mouth = int(random (1,4));
}