Category: Project-02-Variable-Face

Project 02 – Variable Faces

For this project, I used Photoshop to draw out the animation character as well as getting the correct parameters for each shape. I was inspired by the physical features and stylistics of the Animal Crossing villagers. Therefore, I wanted to try creating my own character.

blue puffy
//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project-02

function setup() {
    createCanvas(640, 480);
    background(251, 252, 212);
}

var eyeWidth = 50;
var eyeHeight = 67;
var pupilWidth = 27;
var pupilHeight = 27;
var pupilX = 342
var pupilY = 234
var faceWidth = 324;
var faceHeight = 230;
var cheekWidth = 44;
var cheekHeight = 21;
var noseWidth = 60;
var noseHeight = 34;
var mouthWidth = 18;
var mouthHeight = 13;
var hairWidth = 107;
var hairHeight = 88;

function draw() {
    
    //face
    noStroke();
    fill(203, 227, 217);
    ellipse(323, 281, faceWidth, faceHeight);

    //left cheek
    noStroke();
    fill(237, 205, 201);
    ellipse(207, 323, cheekWidth, cheekHeight);

    //right cheek
    noStroke();
    fill(237, 205, 201);
    ellipse(439, 323, cheekWidth, cheekHeight);

    //mouth
    noStroke();
    fill(1, 56, 72);
    ellipse(344, 364, mouthWidth, mouthHeight);

    //nose
    noStroke();
    fill(1, 56, 72);
    rect(294, 300, noseWidth, noseHeight);

    //left eye
    noStroke();
    fill(255);
    ellipse(243, 279, eyeWidth, eyeHeight);

    //right eye
    noStroke();
    fill(255);
    ellipse(403, 279, eyeWidth, eyeHeight);

    //yc = pupils (up & down)
    let topEye = 257;
    let bottomEye = 279;
    let mouse = mouseY;
    let yc = constrain(mouseY, bottomEye, topEye);

    //left pupil
    noStroke();
    fill(89, 57, 39);
    ellipse(243, yc, pupilWidth, pupilHeight);

    //right pupil 
    noStroke();
    fill(89, 57, 39);
    ellipse(403, yc, pupilWidth, pupilHeight);

    //hairA
    noStroke();
    fill(32, 69, 255);
    ellipse(154, 243, hairWidth, hairHeight);

    //hairB
    noStroke();
    fill(32, 69, 255);
    ellipse(216, 189, hairWidth, hairHeight);

    //hairC
    noStroke();
    fill(32, 69, 255);
    ellipse(311, 173, hairWidth, hairHeight);

    //hairD
    noStroke();
    fill(32, 69, 255);
    ellipse(403, 189, hairWidth, hairHeight);

    //hairE
    noStroke();
    fill(32, 69, 255);
    ellipse(486, 235, hairWidth, hairHeight);

    //hairF
    noStroke();
    fill(32, 69, 255);
    ellipse(154, 166, hairWidth, hairHeight);

    //hairG
    noStroke();
    fill(32, 69, 255);
    ellipse(247, 121, hairWidth, hairHeight);

    //hairH
    noStroke();
    fill(32, 69, 255);
    ellipse(311, 92, hairWidth, hairHeight);

    //hairI
    noStroke();
    fill(32, 69, 255);
    ellipse(444, 121, hairWidth, hairHeight);

    //hairJ
    noStroke();
    fill(32, 69, 255);
    ellipse(185, 111, hairWidth, hairHeight);

    //hairK
    noStroke();
    fill(32, 69, 255);
    ellipse(365, 121, hairWidth, hairHeight);

    //hairL
    noStroke();
    fill(32, 69, 255);
    ellipse(483, 166, hairWidth, hairHeight);
}


function mousePressed() {
	faceWidth = random(200, 400);
	faceHeight = random(100, 300);
	cheekWidth = random(44, 54);
	cheekHeight = random(54, 64);
	noseWidth = random(45, 85);
	noseHeight = random(24, 44);
	mouthWidth = random(8, 28);
	mouthHeight = random(3, 23);
	pupilWidth = random(17, 47);
	pupilHeight = random(47, 57);
	hairHeight = random(90, 200);
}

Project 02 – Variable Face

I made this out of curiosity: I wondered what certain aspects of the face would look like with different parameters, and messed around with them until I got this. The ears were the most interesting part to work on; I enjoyed working the variables and trying to get them go move with the face shape

sketch

//Diana McLaughlin, dmclaugh, Section A

var earWidth = 40
var earHeight = 60
var faceWidth = 300
var faceHeight = 350
var eyeHeight =35
var eyeWidth = 35
var pupil = 15
var browlx = 242
var browy =175 
var browlx2 = 277
var browy2 = 180
var browrx = 367
var browrx2 = 402
var mouthWidth = 90
var mouthHeight = 30
var nose =35

function setup() {
    createCanvas(640, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(0, 0, 255);
    fill(0, 200, 0);
    ellipse((width/2 - faceWidth/2), (height/2), earWidth, earHeight); //left ear
    ellipse((width/2 + faceWidth/2), (height/2), earWidth, earHeight); //right ear
    ellipse((width/2), (height/2), faceWidth, faceHeight); //head
    fill(255);
    ellipse((width/2 - 60), (height/2 - 30), eyeHeight, eyeWidth);
    ellipse((width/2 + 60), (height/2 - 30), eyeHeight, eyeWidth);
    fill(1);
    circle((width/2 - 60), (height/2 - 30), pupil);
    circle((width/2 + 60), (height/2 - 30), pupil); //eyes
    line(browlx, browy, browlx2, browy2);
    line(browrx, browy2, browrx2, browy); //eyebrows
    fill(255, 0, 0);
    ellipse((width/2), (height*.67), mouthWidth, mouthHeight); //mouth
    fill(200, 0, 150);
    circle((width/2), (height/2), nose); //nose
}

function mousePressed() {
	earWidth = random(25, 80);
	earHeight = random(25, 100);
	faceWidth = random(200, 450);
	faceHeight = random(200, 450);
	eyeHight = random(20, 55);
	eyeWidth = random(20, 55);
	pupil = random(5, 25);
	browy = random(165, 185);
	browy2 = random(165, 185);
	mouthWidth = random(50, 110);
	mouthHeight = random(20, 45);
	nose = random(20, 40);


}

Project 2: Variable Faces

soot sprite
//Jessie Chen
//Section D
var sprite = 220;
var eyeWidth = 82;
var eyeHeight = 82;
var irisX = 240;
var irisY = 320;
var aX = 380;
var aY = 380;
var bX = 440;
var bY = 300;
var cX = 40;
var cY = 340;
var dX = 80;
var eX = 225;
var eY = 500;
var fX = 280;

let r, g, b;
r = random(255);
g = random(255);
b = random(255);

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

function draw() {
    var x1 = width / 2;
    var y1 = height / 2;
    background(243, 231, 211);
    //hair
    stroke(0);
    strokeWeight(5)
    radius = 122 + length;
    for (angle = 0; angle <360; angle=angle+ 6) {
        x = cos(radians(angle)) * radius + 240;
        print("x = " + x.toString())
;
        y = sin(radians(angle)) * radius + 320;
        print("y = " + y.toString());
        line(x1, y1, x , y);
    }
    //head
    fill(45);
    ellipse(x1, y1, sprite, sprite);
    //eye
    fill(255);
    var leftEye = width / 2 - 50;
    var rightEye = width / 2 + 50;
    ellipse(leftEye, height / 2, eyeWidth, eyeHeight);
    ellipse(rightEye, height / 2, eyeWidth, eyeHeight);
    //iris
    fill(0);
    ellipse(irisX - 50, irisY, 20, 20);
    ellipse(irisX + 50, irisY, 20, 20);
    //right arm
    noFill();
    stroke(0);
        beginShape();
        curveVertex(350, 320);
        curveVertex(350, 320);
        curveVertex(aX, aY);
        curveVertex(bX, bY);
        curveVertex(bX, bY);
        endShape();
    //left arm
    noFill();
    stroke(0);
        beginShape();
        curveVertex(130, 320);
        curveVertex(130, 320);
        curveVertex(cX, cY);
        curveVertex(dX, bY);
        curveVertex(dX, bY);
        endShape();
    //left leg
    noFill();
    stroke(0);
        beginShape();
        curveVertex(200, 422);
        curveVertex(200, 422);
        curveVertex(eX, eY);
        curveVertex(140, 600);
        curveVertex(140, 600);
        endShape();
    //right leg
    noFill();
    stroke(0);
        beginShape();
        curveVertex(280, 422);
        curveVertex(280, 422);
        curveVertex(fX, eY);
        curveVertex(350, 610);
        curveVertex(350, 610);
        endShape();
    //star
    stroke(r, g, b);
    fill(r, g, b);
    strokeJoin(ROUND);
    triangle(230, 120, 250, 120, 240, 103);
    triangle(230, 120, 210, 120, 220, 137);
    triangle(250, 120, 270, 120, 260, 137);
    triangle(230, 150, 210, 150, 220, 135);
    triangle(250, 150, 270, 150, 260, 135);
    triangle(230, 150, 250, 150, 240, 167);
    ellipse(240, 135, 28, 25);

}

function mousePressed() {
    //eye
    eyeWidth = random(75, 88);
    eyeHeight = random(75, 88);
    //iris
    irisX = random(230, 250);
    irisY = random(310, 330);
    //hair
    length = random(5, 13);
    //legs
    aX = random(340, 440);
    aY = random(290, 350);
    bX = random(285, 300);
    bY = random(140, 160);
    cX = random(30, 150);
    cY = random(275, 230);
    dX = random(100, 210);
    eX = random(180, 200);
    eY = random(520, 560);
    fX = random(280, 300);
    //star color
    r = random(255);
    g = random(255);
    b = random(255);
}

This was inspired by the soot sprites from the anime “Spirited Away.” This piece was really challenging since I had to use trig to figure out an equation.

Project-02-Variable Face

sketch9.12.2Download
// Amyas Ryan Section A
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var mouthSize = 60;
var browSize = 30;

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

function draw() {
    background(226, 146, 170);
    fill(60, 200, 72);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var mouth = width / 2
    var browL = width / 2 - faceWidth * 0.25;
    var browR = width / 2 + faceWidth * 0.25;
    arc(240, 360, 60, 40, 0, 180);
    fill(255, 255, 255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(30, 170, 42);
    ellipse(mouth, height / 2 + 100, mouthSize + 20, mouthSize);
    fill(0, 0, 0);
    rect(browL, height / 2 - 40, browSize, browSize / 2);
    rect(browR - 10, height / 2 - 40, browSize, browSize / 2);
}

function mousePressed() {
    faceWidth = random(150, 300);
    faceHeight = random(300, 500);
    eyeSize = random(10, 30);
    mouthSize = random(20, 70);
    browSize = random(10, 40);
}

Project-02-Variable Face

For this project, I tried to create variations of sizes, colors, and positions utilizing the original self portrait I created for our last deliverable. Different sizes, colors, shapes, and positions make changes to the mood of the portrait that was originally adorable.

sketch
// Stefanie Suk
// 15-104 Section D


var bgColorR = 208;
var bgColorG = 233;
var tiecolorR = 0;
var tiecolorG = 0;
var tiecolorB = 0;
var buttonD= 259;
var hatColorR = 32;
var hatColorG = 69;
var mouthposition = 345;
var eyeSize = 17;
var blushW = 30;
var blushH = 30;

function setup() {
    createCanvas(480, 640);
    // text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {

	background(bgColorR, bgColorG, 255);
	noFill();

	// head and body
	noStroke();
	fill(255);
	ellipse(240, 680, 400, 600);     //body
	fill(240);
	ellipse(245, 332, 305, 250);     //shadow on face
	fill(255);
	ellipse(240, 300, 300, 300);     //main face ellipse
	ellipse(285, 350, 250, 200);     //cheek
	ellipse(140, 200, 120, 120);     //left ear
	ellipse(340, 205, 120, 120);     //right ear

	// eyes
	stroke(0);
	strokeWeight(eyeSize);
	point(205, 320);                 //left eye
	point(310, 320);                 //right eye

	// mouth
	strokeWeight(5);
	fill(255, 0, 0);
	arc(260, 345, 50, 50, 0, PI, CHORD);

	// necktie and button
	fill(tiecolorR, tiecolorG, tiecolorB);
	triangle(216, 465, 216, 503, 259, 484.5);   //left part of tie
	triangle(301, 465, 301, 503, 259, 484.5);   //right part of tie 
	fill(0);
	ellipse(buttonD, 510, 5, 5);                //top button
	ellipse(buttonD, 525, 5, 5);                //middle button
	ellipse(buttonD, 540, 5, 5);                //bottom button

	// blush
	noStroke();
	fill(249, 203, 203);
	ellipse(140, 350, blushW, blushH);          //left blush
	ellipse(360, 350, blushW, blushH);          //right blush

	// hat
	fill(hatColorR, hatColorG, 140);
	quad(204, 173, 220, 130, 264, 130, 283, 173);

}

function mousePressed() {
	// changes color of background
	bgColorR = random(50, 200);
	bgColorG = random(50, 200);
	// changes position of button
	buttonD = random(240, 280);
	// changes color of necktie
	tiecolorR = random(0, 255);
	tiecolorG = random(0, 255);
	tiecolorB = random(0, 255);
	// changes color of hat
	hatColorR = random(20, 230);
	hatColorG = random(20, 230);
	// changes eye size
	eyeSize = random(10, 30);
	// changes shape of blush on cheek
	blushW = random(30, 45);
	blushH = random(30, 45);
}
Sketch of portrait for project

Project 02 – Variable Portrait

This is a random portrait generator that creates random robot faces! The hardest part of this was writing a loop that could let each mouse click cause the program to cycle through several faces at a time.

sketch
/*
* Eric Zhao
* ezhao2@andrew.cmu.edu
* Section D
*
* Random Face Generator. Randomizes face shape, eye color and size, nose shape,
* and presence of antenna. Operates on click and rolls through several faces 
* per click.
*/

let w = 0; //face width
let h = 0; //face height
let topRadius = 0; //face curvature
let botRadius = 0; //face curvature
let eyeRadius = 0; //eye size
let index = 15; //loop index
let noseCircle = 0; //controls shape of nose
let faceColor = 0; //grayscale face color value
let eyeR = 0; //eye Red value
let eyeG = 0; //eye Green value
let eyeB = 0; //eye Blue value

function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    frameRate(30);
    rectMode(CENTER);
}

function draw() { 
    /* This draw command runs when the mouse is clicked, generating 15 portraits and stopping
    on the last one. Given that each face needs random values, this function sets the variables 
    instead of the mousePressed function. */
    //setting variables randomly
    w = random(width/4, width/2); //next 4 lines generate random rectangle dimensions
    h = random(w/2, w*1.5);
    topRadius = random(0, width/8); 
    botRadius = random(width/20, width/3);
    eyeRadius = random(w/8, h/4);
    noseCircle = int(random(int(0), int(2)));
    faceColor = random (100, 200);
    eyeR = random(30, 256);
    eyeG = random(30, 256);
    eyeB = random(30, 256);
    //setting fills and strokes
    background(185, 240, 185);
    noStroke();
    fill(faceColor);
    rect(width/2, height/2, w, h, topRadius, topRadius, botRadius, botRadius); //draws rectangle
    fill(eyeR, eyeG, eyeB)
    ellipse((width/2) - (w/5), (height/2) - (h/5), eyeRadius, eyeRadius); //left eye
    ellipse((width/2) + (w/5), (height/2) - (h/5), eyeRadius, eyeRadius); //right eye
    noFill();
    strokeWeight(5);
    stroke(220);
    if((eyeR + eyeG + eyeB) / 3 > 128) { //if the eye color is above a certain brightness, darken stroke
        stroke(50)
    }
    arc((width/2) - (w/5), (height/2) - (h/5), eyeRadius * 0.8, eyeRadius * 0.8,
        PI + QUARTER_PI, QUARTER_PI); //left reflection
    arc((width/2) + (w/5), (height/2) - (h/5), eyeRadius * 0.8, eyeRadius * 0.8,
        PI + QUARTER_PI, QUARTER_PI); //right reflection
    stroke(220);
    if (noseCircle === 1) { //this loop controls for nose shape and antenna
        //draws a round nose and face profile 
        arc((width/2), (height/2) + (eyeRadius * 0.8) / 2, eyeRadius * 0.8, eyeRadius * 0.8, 
        HALF_PI, PI + HALF_PI);
        line (width/2, (height/2) - (h/2), width/2, height/2);
        line (width/2, (height/2) + (eyeRadius * 0.8), width/2, (height/2 + h/2));
        stroke(faceColor); 
        line (width/2, (height/2) - (h/2), (width/2) + (w/4), (height/2) - (h/1.5)); //draws antenna stem
        noStroke();
        fill (255, 66, 66);
        ellipse((width/2) + (w/4), (height/2) - (h/1.5), eyeRadius * 0.5, eyeRadius * 0.5); //draws antenna circle
    } else {
        //draws a triangle nose / face profile
        line (width/2, (height/2) - (h/2), width/2, height/2 - eyeRadius);
        line (width/2, height/2 - eyeRadius, (width/2) - (w/8), (height/2) + (h/4));
        line ((width/2) - (w/8), (height/2) + (h/4), width/2, (height/2) + (h/4));
        line (width/2, (height/2) + (h/4), width/2, (height/2 + h/2));        
    }

    print(index.toString()); //prints loop index to console
    index++;

    if (index > 9) { //repeats the draw command 15 times and stops the loop afterwards
        noLoop();
    }

}

function mousePressed(){
    index = 0;
    loop();
}
Sketches to figure out positioning of face elements.

Project 2 – Variable Face

sketch

For this project, I tried to play with the background a little and then change facial features such as blush, face width and height eye size along with expression and hair length and earring colour.

//Aadya Bhartia
//Section A

//global variables 
var circOp = 150;
var circR = 100;
var faceH = 220;
var faceW = 250;
var eyeWhite = 7;
var mouth = 80;
var blushH = 10;
var earring = 15;
var hairL = 200;
var r = 120;
var g = 120;
var b = 120;
var body = 400;
var ctr = 2;// using a counter for different expressions 
function setup() {
    createCanvas(600, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
	background(84,117,120);
	noStroke();
	//background circles
    fill(62, 140, 220, circOp);//varying circle opacity
    ellipse(20,20,circR);
    ellipse(560,300,circR);
    ellipse(140,270,circR);
    ellipse(390,100,circR);
    ellipse(500,500,circR);
    ellipse(80,4800,circR);
    ellipse(80,500,circR);
    ellipse(560,30,circR);
    //hair
    fill(81, 65, 47);
    ellipse(302,200, faceW + 90, faceH + 85);
    rect(257 - faceW/2, 210, faceW+89, hairL);
    //neck
    fill(211, 200, 190);
    rect(260,250,80,150);
    //face
    fill(241, 230, 218);
    ellipse(300, 210, faceW, faceH);
    //fringe 
    fill(81, 65, 47);
    beginShape();
    curveVertex(220, 100);
    curveVertex(220, 100);
    curveVertex(260, 150);
    curveVertex(350, 155);
    curveVertex(400, 250);
    curveVertex(400, 300);
    curveVertex(450, 200);
    curveVertex(400, 100);
    curveVertex(300, 70);
    curveVertex(250, 85);
    curveVertex(220, 100);
    endShape();
    //eyes
    fill(80);
    ellipse(300+50, 200, 20);
    ellipse(300-50, 200, 20);
    fill(255);
    ellipse(300+45, 202, eyeWhite);
    ellipse(300-55, 202, eyeWhite);   
    //blush
    fill(250, 154, 120, 100);
    ellipse(300-50, 230, 50, blushH);
    ellipse(300+50, 230, 50, blushH);
    //glass - do not change 
    stroke(87, 120, 135);
    strokeWeight(4);
    noFill();
    ellipse(300 - 50, 200, 60);
    ellipse(300 + 50, 200, 60);
    arc(300, 200, 40, 40, PI, TWO_PI);
    //hoop colour changing 
    strokeWeight(2.5);
    stroke(r, g, b);
    ellipse(305 - faceW/2, 245,15, 30);
    //different mouth expressions 
    if (ctr == 1) {
    // draw a frown
        stroke(150, 50, 50);
        strokeWeight(4);
        arc(300, 280, 100, 60, PI, TWO_PI);
    } 
    else if (ctr == 2){
    // draw a happy face
        stroke(150, 50, 50);
        strokeWeight(4);
        arc(300, 260, 100, 60, 0, PI);
    } 
    else {
    // draw a straight face
        stroke(150, 50, 50); 
        strokeWeight(4);
        line(250, 280, 350, 280);
    }
    //clothes
    noStroke();
    fill(240, 130, 150);
    rect(250, 350, 100, 20);
    ellipse(300, 650, body, 600)
}
function mousePressed(){
    circOp = random(50,220);
	faceW = random(200,250);
	faceH = random(200,270);
	hairL = random(180,270);
    circR = random(30,300);
    eyeWhite = random(2,10);
    blushH = random(5, 15);
    r = random(10,200);
    g = random(10,200);
    b = random(10,200);
    ctr = int(random(1,4));
    body = random(250, 400);
}

Project-02-Variable-Face

I did a scene from Studio Ghibli’s Spirited Away where Kaonashi is sitting on a train. I found his face to be made of simple geometries that convey different expressions and emotions when the dimensions are adjusted.

project-02-face
//Graana Khan
// Section B

var eyeWidth = 14 
var eyeHeight = 8
var mouthWidth = 20 
var mouthHeight = 7
var eyebrowHeight = 111
var eyebrowHeightTop = 94
var cloud1 = 64
var cloud2 = 308
var cloud3 = 484

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

function draw() {
	background(255);
	noStroke();

//train backdrop 
    fill(66, 32, 18);
    rect(0, 0, 680, 235);
    fill(37, 17, 12);
    rect(0, 229, 680, 4);
    fill(114, 30, 21);
    rect(0, 234, 680, 100);
    fill(84, 22, 13);
    rect(0, 332, 680, 45);
    fill(56, 24, 14);
    rect(0, 373, 680, 65);
    fill(125, 75, 51);
    rect(0, 435, 680, 45);
    fill(78, 41, 22);
    rect(37, 18, 176, 211);
    rect(251, 18, 176, 211);
    rect(464, 18, 176, 211);
    fill(44, 19, 12);
    rect(0, 373, 680, 9);

//sky 
    fill(149, 178, 221);
    rect(45, 29, 160, 190);
    rect(259, 29, 160, 190);
    rect(472, 29, 160, 190);

    // clouds 
    fill(255, 255, 255, 100);
    rect(cloud1, 57, 85, 37, 20);
    rect(137, 162, 61, 32, 20);
    rect(cloud2, 101, 107, 59, 20);
    rect(cloud3, 60, 45, 30, 20);
    rect(525, 143, 91, 59, 20);

// train handles
    noFill();
    strokeWeight(8);
    stroke(98, 80, 56);
    ellipse(34, 29, 52, 52);
    ellipse(156, 29, 52, 52);
    ellipse(279, 29, 52, 52);
    ellipse(401, 29, 52, 52);
    ellipse(526, 29, 52, 52);
    ellipse(648, 29, 52, 52);
    noStroke();

//kaonashi body 
    fill(0, 0, 0, 150);
    beginShape();
    curveVertex(270, 432);
    curveVertex(270, 432);
    curveVertex(263, 379);
    curveVertex(258, 342);
    curveVertex(257, 330);
    curveVertex(258, 313);
    curveVertex(261, 298);
    curveVertex(263, 276);
    curveVertex(273, 234);
    curveVertex(280, 206);
    curveVertex(286, 186);
    curveVertex(291, 164);
    curveVertex(296, 137);
    curveVertex(298, 116);
    curveVertex(303, 94);
    curveVertex(312, 78);
    curveVertex(333, 69);
    curveVertex(351, 70);
    curveVertex(364, 77);
    curveVertex(373, 88);
    curveVertex(379, 109);
    curveVertex(382, 127);
    curveVertex(385, 152);
    curveVertex(393, 190);
    curveVertex(401, 217);
    curveVertex(410, 252);
    curveVertex(417, 285);
    curveVertex(421, 310);
    curveVertex(422, 343);
    curveVertex(420, 368);
    curveVertex(417, 284);
    curveVertex(414, 425);
    curveVertex(270, 432);
    curveVertex(270, 432);
    endShape();

//kaonashi head
    fill(221, 221, 219);
    rect(306, 80, 67, 116, 25, 25, 40, 40);

//kaonashi arms
    noFill();
    stroke(0, 0, 0, 140);
    strokeWeight(10);
    beginShape();
    curveVertex(288, 299);
    curveVertex(288, 299);
    curveVertex(285, 311);
    curveVertex(290, 321);
    curveVertex(307, 330);
    curveVertex(307, 330);
    endShape();
    beginShape();
    curveVertex(392, 299);
    curveVertex(392, 299);
    curveVertex(394, 311);
    curveVertex(390, 321);
    curveVertex(373, 330);
    curveVertex(373, 330);
    endShape();

//kaonashi face
    noStroke();
    fill(0);
    ellipse(323, 121, eyeWidth, eyeHeight); //left eye
    ellipse(357, 121, eyeWidth, eyeHeight); // right eye
    ellipse(323, 129, 9, 3);
    ellipse(357, 129, 9, 3);
    ellipse(340, 173, mouthWidth, mouthHeight);
    fill(111, 80, 61);
    triangle(318, 136, 328, 136, 325, 156);
    triangle(352, 136, 362, 136, 355, 156);
    ellipse(340, 181, 12, 4);
    triangle(318, eyebrowHeight, 328, eyebrowHeight, 326, eyebrowHeightTop); //left eyebrow
    triangle(352, eyebrowHeight, 361, eyebrowHeight, 353, eyebrowHeightTop); //right eyebrow

}

function mousePressed() {
	eyeWidth = random(8, 30);
	eyeHeight = random(5, 12);
	mouthWidth = random(10, 35);
	mouthHeight = random(5, 15);
	eyebrowHeight = random(100, 113);
	eyebrowHeightTop = random(87, 100);
	cloud1 = random(51, 120);
	cloud2 = random(262, 312);
	cloud3 = random(476, 562);

}

Project 2 – Variable Face

An avatar generator for a bunny/bear game

sketchDownload
//face
var faceWidth = 70;
var faceHeight = 200;
var faceRound = 20; //max 40
var faceColor = 0
//ears
var earWidth = 20;
var earHeight = 70;
//eyes
var eyeSize = 20;
var eyeColor = 0;


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

function draw() {
	background (154, 215, 255);
    noStroke();
    fill (faceColor);
    //face
    rect (width/2-faceWidth/2, height/2-faceHeight/2, faceWidth, faceHeight, faceRound);
    //ears
    fill(faceColor);
    var earLX = width/2-faceWidth/2+earWidth/2;
    var earRX = width/2+faceWidth/2-earWidth/2;
    ellipse (earLX, height/2-faceHeight*0.6, earWidth, earHeight);
    ellipse (earRX, height/2-faceHeight*0.6, earWidth, earHeight);
    //eyes
    fill(eyeColor);
    var eyeLX = width/2-faceWidth*0.25;
    var eyeRX = width/2+faceWidth*0.25;
    ellipse(eyeLX, height/2+faceHeight*0.1, eyeSize, eyeSize);
    ellipse(eyeRX, height/2+faceHeight*0.1, eyeSize, eyeSize);
    //eyesHighlight
    fill(255, 255, 255);
    ellipse(eyeLX-eyeSize*0.25, (height/2+faceHeight*0.1)-eyeSize*0.25, 0.25*eyeSize, 0.25*eyeSize);
    ellipse(eyeRX-eyeSize*0.25, (height/2+faceHeight*0.1)-eyeSize*0.25, 0.25*eyeSize, 0.25*eyeSize);
    //nose
    fill(0,0,0);
    var noseLX = width/2-faceWidth*0.1;
    var noseRX = width/2+faceWidth*0.1;
    var noseDY = height/2+faceHeight*0.2+5;
    triangle(noseLX, height/2+faceHeight*0.2, noseRX, height/2+faceHeight*0.2, width/2, noseDY);
}

function mousePressed() {
    //face
    faceWidth = random(100, 200);
    faceHeight = random(100, 200);
    faceRound = random(0, 41);
    faceColor = color(random(0,255), random(0,255), random(0,255));
    //ear
    earWidth = random(10, 25);
    earHeight = random(30, faceHeight*2);
    //eyes
    eyeSize = random(5, 30);
    eyeColor = color(random(0,240), random(0,240), random(0,240));
}

Project-02-Variable-Face

You might need to refresh the page to see the changes because the mousePressed function does not really work in my code. I will update this post when I figure out why.

ancient beauty
//Jiaqi Wang section C
var eyeH= 15;
var eyeL= 55;
var faceW= 90;
var eyeD=20;
var eyeP=330;
var num;
var num2;
var blush=100;


function setup() {
    createCanvas(480, 640);
    background(179,187,146);
    
}

function draw() {
	//neck
	fill(244,233,222);
	noStroke();
	quad(179, 450, 91, 531, 315, 550, 252, 403);
	fill(128,17,41);
	arc(200,637,400,250,PI,0);
	//face
	var mid=182;

	noStroke();
	fill(244,233,222);
	beginShape();
	//chin point
	curveVertex(mid, 461);
	curveVertex(mid, 461);
	curveVertex(mid-(faceW*0.5), 440);
	//jaw left
	curveVertex(mid-(faceW*0.8), 403);
	//temple left
	curveVertex(mid-faceW, 330);
	//brow bridge
	curveVertex(mid-(faceW*1.03), 276);
	//hairline left
	curveVertex(mid-(faceW*0.74), 217);
	//hairline mid
	curveVertex(mid, 217);
	//hairline right
	curveVertex(mid+(faceW*0.74), 217);
	//brow bridge right
	curveVertex(mid+(faceW*1.03), 276);
	//temple right
	curveVertex(mid+faceW, 330);
    //right jaw
    curveVertex(mid+(faceW*0.8), 403);
    curveVertex(mid+(faceW*0.5), 440);
	curveVertex(mid, 461);
	curveVertex(mid, 461);
	endShape();
	//blush
	fill(235,104,119);
	ellipse(mid-faceW,328,blush,blush);
	fill(235,104,119);
	ellipse(mid+faceW,328,blush,blush);


	//eye
	//left
	//eyeball
	
	num=random(0.3,0.8);
	num2=random(0,0.3);
	fill(255);
	beginShape();
	//inner eye corner left
	curveVertex(mid-eyeD, eyeP);
	curveVertex(mid-eyeD, eyeP);
	//middle of eye
	curveVertex(mid-eyeD-(eyeL*num), eyeP-eyeH);
	//end of eye
	curveVertex(mid-eyeD-eyeL,eyeP-(eyeH*0.93));
	//bottom of eye
	curveVertex(mid-eyeD-(eyeL*num), eyeP);
	curveVertex(mid-eyeD, eyeP);
	curveVertex(mid-eyeD, eyeP);
	endShape();
	//pupil
    fill(86,70,31);
	ellipse(mid-eyeD-(eyeL*0.4),eyeP-(eyeH*0.4),eyeH*0.9,eyeH*0.9);
	noFill();
	fill(0);
	ellipse(mid-eyeD-(eyeL*0.4),eyeP-(eyeH*0.4),eyeH*0.3,eyeH*0.3);
	noFill();
	fill(255);
	ellipse(mid-eyeD-(eyeL*0.45),eyeP-(eyeH*0.45),eyeH*0.2,eyeH*0.2);
	noFill();
	//eyeline
	fill(0);
	beginShape();
	//inner eye corner left
	curveVertex(mid-eyeD, eyeP);
	curveVertex(mid-eyeD, eyeP);
	//middle of eye
	curveVertex(mid-eyeD-(eyeL*num), eyeP-eyeH);
	//end of eye
	curveVertex(mid-eyeD-eyeL,eyeP-(eyeH*0.93));
	//bottom of eye
	curveVertex(mid-eyeD-(eyeL*num), eyeP);
	curveVertex(mid-eyeD-eyeL-(num*10),eyeP-(eyeH*0.93));
	curveVertex(mid-eyeD-(eyeL*num), eyeP-eyeH-(num*9));
	curveVertex(mid-eyeD, eyeP);
	curveVertex(mid-eyeD, eyeP);
	endShape();
	//eyebrow
	fill(0);
	var x= max(num2,0.43);
	ellipse(mid-eyeD-(eyeL*0.5),eyeP-(x*100),num*90,num2*50);
	//hair
	beginShape();
	//jaw left
	curveVertex(mid-(faceW*0.8), 403);
	curveVertex(mid-(faceW*0.8), 403);
	//temple left
	curveVertex(mid-faceW, 330);
	//brow bridge
	curveVertex(mid-(faceW*1.03), 276);
	//hairline left
	curveVertex(mid-(faceW*0.74), 217);
	//hairline mid
	curveVertex(mid, 217);
	//head top
	curveVertex(mid, 145);
	//head top left
	curveVertex(mid-(faceW*0.5), 163);
	//turn
	curveVertex(mid-(faceW*0.8),193);
	//concave
	curveVertex(mid-(faceW*1.8),300);
	//bottom left
	curveVertex(mid-(faceW*1.3),395);
	//bottom right
	curveVertex(mid-(faceW*0.9),395);
	curveVertex(mid-(faceW*0.8), 403);
	curveVertex(mid-(faceW*0.8), 403);
	endShape();
	beginShape();
	//jaw left
	curveVertex(mid+(faceW*0.8), 403);
	curveVertex(mid+(faceW*0.8), 403);
	//temple left
	curveVertex(mid+faceW, 330);
	//brow bridge
	curveVertex(mid+(faceW*1.03), 276);
	//hairline left
	curveVertex(mid+(faceW*0.74), 217);
	//hairline mid
	curveVertex(mid, 217);
	//head top
	curveVertex(mid, 145);
	//head top left
	curveVertex(mid+(faceW*0.5), 163);
	//turn
	curveVertex(mid+(faceW*0.8),193);
	//concave
	curveVertex(mid+(faceW*1.8),300);
	//bottom left
	curveVertex(mid+(faceW*1.3),395);
	//bottom right
	curveVertex(mid+(faceW*0.9),395);
	curveVertex(mid+(faceW*0.8), 403);
	curveVertex(mid+(faceW*0.8), 403);
	endShape();
	ellipse(153-(num*20),155,190-(num*40),150-(num*90));
	ellipse(245+(num2*20),177,80,50);
	ellipse(245+(num2*20),130,80+(num*40),80+(num*40));






	


	//right
	//eyeball
	fill(255);
	beginShape();
	//inner eye corner left
	curveVertex(mid+eyeD, eyeP);
	curveVertex(mid+eyeD, eyeP);
	//middle of eye
	curveVertex(mid+eyeD+(eyeL*num), eyeP-eyeH);
	//end of eye
	curveVertex(mid+eyeD+eyeL,eyeP-(eyeH*0.93));
	//bottom of eye
	curveVertex(mid+eyeD+(eyeL*num), eyeP);
	curveVertex(mid+eyeD, eyeP);
	curveVertex(mid+eyeD, eyeP);
	endShape();
	noLoop()
	//pupil
    fill(86,70,31);
	ellipse(mid+eyeD+(eyeL*0.7),eyeP-(eyeH*0.7),eyeH*0.9,eyeH*0.9);
	noFill();
	fill(0);
	ellipse(mid+eyeD+(eyeL*0.7),eyeP-(eyeH*0.7),eyeH*0.3,eyeH*0.3);
	noFill();
	fill(255);
	ellipse(mid+eyeD+(eyeL*0.65),eyeP-(eyeH*0.55),eyeH*0.2,eyeH*0.2);
	noFill();
	//eyeline
	fill(0);
	beginShape();
	//inner eye corner left
	curveVertex(mid+eyeD, eyeP);
	curveVertex(mid+eyeD, eyeP);
	//middle of eye
	curveVertex(mid+eyeD+(eyeL*num), eyeP-eyeH);
	//end of eye
	curveVertex(mid+eyeD+eyeL,eyeP-(eyeH*0.93));
	//bottom of eye
	curveVertex(mid+eyeD+(eyeL*num), eyeP);
	curveVertex(mid+eyeD+eyeL+(num*10),eyeP-(eyeH*0.93));
	curveVertex(mid+eyeD+(eyeL*num), eyeP-eyeH-(num*9));
	curveVertex(mid+eyeD, eyeP);
	curveVertex(mid+eyeD, eyeP);
	endShape();
    //eyebrow
	fill(0);
	var x= max(num2,0.43);
	ellipse(mid+eyeD+(eyeL*0.5),eyeP-(x*100),num*90,num2*50);

	//mouse
	fill(235,104,119);
	ellipse(mid,416,30,20);
	stroke(0);
	noFill();
	beginShape();
	curveVertex(mid-20, 414);
	curveVertex(mid-20, 414);
	curveVertex(mid-6,412);
	curveVertex(mid,416);
	curveVertex(mid+6,412);
	curveVertex(mid+20, 414);
	curveVertex(mid+20, 414);
	endShape();

	//decoration
	var x=random(112,170);
	var y=random(100,190);
     fill(255,225,90);
     noStroke();
     push();
     translate(x+(num*100), y+(num2*100));
     rotate(frameCount / 200.0);
     polygon(0, 0, 50,13);
     pop();

     fill(255,124,24);
     stroke(255);
	 push();
     translate(x, y);
     rotate(frameCount / -100.0);
     polygon(0, 0, 20, 9);
     pop();
      

      //nouse
      fill(0);
      noStroke();
      ellipse(mid-5,394,2,3);
      ellipse(mid+5,394,2,3);

      //right jaw
      stroke(255);
      noFill();

     beginShape();
    curveVertex(mid+(faceW*0.8), 403);
    curveVertex(mid+(faceW*0.8), 403);
    curveVertex(mid+(faceW*0.5), 440);
	curveVertex(mid, 461);
	curveVertex(mid, 461);
     endShape();


	








}


function mousePressed() {
    faceW = random(280, 330);
    eyeD = random(210, 300);
    eyeP = random(50, 60);
}
//I do not know why this function is not working

function polygon(x, y, radius, npoints) {
  let angle = TWO_PI / npoints;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius;
    let sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

I was inspired by ancient Chinese woman makeups from different periods of time.