Project-02-Variable-Face – Page 3 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project 2 – Variable Face

click the clown man

//Se A Kim, Section D

var noseWidth = 100;
var noseHeight= 100;
var eyeheight = 250;
var eyeSize = 20;
var bodywidth = 500;
var bodyheight = 500;
var mouthheight = 100;
var mouthwidth = 100;



function setup() {
    createCanvas(600, 600);
    background(219, 246, 247);

}

function draw() {

noStroke();
frameRate(5);
fill(random(0,255), random(0,255), random(0,255));
ellipse(300, 300, 400, 400);
ellipse(400, 400, 300, 300);
ellipse(100,500,400,400);
ellipse(500,500,400,400)

noStroke();
fill(255, 255, 255);    //body
ellipse(300, 600, bodywidth, bodyheight);

fill(255, 0, 0);
triangle(280, 600, 300, 300, 350, 600);

fill(255,218,185)   //face
ellipse (300, 300, 300, 300);

frameRate(2);
fill(random(0,255), random(0,255), random(0,255));
arc(300, 330, mouthwidth, mouthheight, 0, 600);    //mouth

 //eye
ellipse(250, eyeheight, eyeSize);
ellipse(350, eyeheight, eyeSize);

noStroke(); //nose
fill(255,0, 0);
ellipse(300, 300, noseWidth, noseHeight);


}

function mousePressed(){

    noseWidth = random (50, 100);
    noseHeight = random (50, 100);
    eyeSize = random (20, 50);
    bodywidth = random(200, 500);
    bodyheight = random(300, 500);
    mouthwidth = random(100,200);
    mouthheight = random(100,200);
    eyeheight = random(230, 270);


   
}

Project 2 – Variable Faces

Variable Faces:

sketch

//holly liu
//section D
//variable faces

var faceW = 200
var faceH = 200
var mouthW = 40
var mouthH = 50

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

function draw(){
	fill(255);
	strokeWeight(3);
	stroke(0);

	faceW = random(200, 350);
	faceH = random(200, 510);
	ellipse((width/2), (height/2), faceW, faceH);

	var r = random(4);

	if(r < 1) {
		circle(((width/2) - (faceW/3)), (height/2), 50);														//left eye
		circle(((width/2) + (faceW/3)), (height/2), 50);														//right eye
		fill(0);
		circle(((width/2) - (faceW/3)), (height/2), 30);														//left pupil
		circle(((width/2) + (faceW/3)), (height/2), 30);														//right pupil
	} else if(r < 2) {
		arc(((width/2) - (faceW/3)), (height/2), 60, 100, PI, TWO_PI)											//left brow
		arc(((width/2) + (faceW/3)), (height/2), 60, 100, PI, TWO_PI)											//right brow
		circle(((width/2) - (faceW/3)), (height/2), 50);														//left eye
		circle(((width/2) + (faceW/3)), (height/2), 50);														//right eye
		fill(0);
		circle(((width/2) - (faceW/3)), (height/2), 10);														//left pupil
		circle(((width/2) + (faceW/3)), (height/2), 10);														//right pupil
	} else if(r < 3) {
		arc(((width/2) - (faceW/3)), (height/2), 50, 75, 0, PI)													//uW
		arc(((width/2) + (faceW/3)), (height/2), 50, 75, 0, PI)													//Wu
	} else {
		fill(0);
		circle(((width/2) - (faceW/3)), (height/2), 50);														//left eye
		circle(((width/2) + (faceW/3)), (height/2), 50);														//right eye
		fill(255);
		circle(((width/2) - (faceW/3)) - 15, (height/2), 15);													//L left sparkle
		circle(((width/2) - (faceW/3)), (height/2) - 15, 15);													//l right sparkle
		circle(((width/2) + (faceW/3)) - 15, (height/2), 15);													//r left sparkle
		circle(((width/2) + (faceW/3)), (height/2) - 15, 15);													//r right sparkle
	}

	r = random(3);
	
	if(r < 1) {
		noFill();
		arc(((width/2) - (mouthW/2)), (height/2), mouthW, mouthH, 0, PI);										//uwu left
		arc(((width/2) + (mouthW/2)), (height/2), mouthW, mouthH, 0, PI);										//uwu right
	} else if (r < 2) {
		fill(0)
		ellipse((width/2), ((height/2) + (faceH*(1/5))), mouthW, mouthH);										//:0
	} else {
		fill(0);
		noStroke();																								//grin
		arc((width/2), ((height/2) + (faceH*(1/5))), (mouthW*3), (mouthH*2), 0, PI);
	}

	r = random(3);

	if(r < 1){
		strokeWeight(3);
		stroke(0);
		noFill();
		arc(((width/2) + 50), ((height/2) - (faceH/2)), 100, 100, PI, PI+((3/4)*PI));							//3 hairs
		arc(((width/2) - 50), ((height/2) - (faceH/2)), 100, 100, PI+((1/4)*PI), TWO_PI);
		line((width/2), ((height/2) - (faceH/2)), (width/2), (((height/2) - (faceH/2)) - 100));
		console.log(1);
	} else if(r < 2) {
		strokeWeight(3);
		stroke(0);
		line((width/2), ((height/2) - (faceH/2)), (width/2), (((height/2) - (faceH/2)) - 50));					//flower
		fill(255);
		circle((width/2), (((height/2) - (faceH/2)) - 40), 20, 20);
		circle((width/2), (((height/2) - (faceH/2)) - 60), 20, 20);
		circle(((width/2) + 10), (((height/2) - (faceH/2)) - 50), 20, 20);
		circle(((width/2) - 10), (((height/2) - (faceH/2)) - 50), 20, 20);
		circle((width/2), (((height/2) - (faceH/2)) - 50), 20, 20);
		noFill();
		arc(((width/2) + 25), ((height/2) - (faceH/2)), 50, 50, PI, PI + HALF_PI);
		arc(((width/2) - 25), ((height/2) - (faceH/2)), 50, 50, PI + HALF_PI, TWO_PI);
		line(((width/2) - 25), ((height/2) - (faceH/2) - 25), (width/2), ((height/2) - (faceH/2)));
		line(((width/2) + 25), ((height/2) - (faceH/2) - 25), (width/2), ((height/2) - (faceH/2)));
		console.log(2);
	} else {
		strokeWeight(3);
		stroke(0);
		fill(255);
		arc((width/2), ((height/2) - 30), (faceW + 20), (faceH - 20), PI, TWO_PI);								//bowl cut
		line(((width/2) - (faceW/2) - 10), ((height/2) - 30), ((width/2) + (faceW/2) + 10), ((height/2) - 30));
		line((width/2), ((height/2) - 30), (width/2), ((height/2) - (faceH * (1/4))));
		line(((width/2) - (faceW/4)), ((height/2) - 30), ((width/2) - (faceW/6)), ((height/2) - (faceH * (1/4))));
		line(((width/2) + (faceW/4)), ((height/2) - 30), ((width/2) + (faceW/6)), ((height/2) - (faceH * (1/4))));
		console.log(3);
	}

	noLoop();
}

function mousePressed(){
	clear();

	draw();
}

LO-02-GenerativeArt

LO-week02-generative art

I looked at French artist Miguel Chevalier’ work MAGIC CARPET.

The point which surprises me most is his combination of modern and abstract art with real-time interaction. A lot of the time, modern art seems very indifferent and far away from the audience. Without deep explanation, it would be too hard for the audience to embrace the essence of the artwork.

In Miguel Chevalier’s art, he interprets his artwork as a carpet and also presents it as a carpet. When the audience holds sensors into the place, the carpet can detect its location and change accordingly.

I think he first uses some variables to control how the computer generates similar but different patterns. Then put a trigger for the sensor. When the sensor has been detected, the trigger wakes up some more variables to change the patterns around the sensor’s surroundings.

I guess he uses some variables to control the direction, size, density and shape of the pixels it generated.

Miguel CHEVALIER “Magic Carpets 2016” Milton Keynes (UK) from Claude Mossessian on Vimeo.

https://www.vice.com/en_uk/article/gvwekj/chevalier-magic-carpet-in-england

PROJECT 02 – VARIABLE FACE

(click on the center of the canvas to change the faces)

sketch

//random colors used by all functions
var r;
var g;
var b;

//other variables
var rand_shape = 1;
var brow_shape = 1;
var eyeWidth = 20;
var eyeHeight = 40;
var nosehole = 20;
var mouthWidth = 60;
var mouthHeight = 30;
var ellipseWidth = 250;
var ellipseHeight = 300;
var pupilWidth = 5;
var pupilHeight = 10;


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

function draw() {
    background(180, 210, 231);
    var r = 0;
    var x = width / 2;
    var y = height / 2; 
    fill(0, 12);
    noStroke();


//eyes
    fill(0);
    ellipse(x - 40, y - 20, eyeWidth, eyeHeight);
    ellipse(x + 40, y - 20, eyeWidth, eyeHeight);

//pupils
    fill(255);
    ellipse(x - 40, y - 20, pupilWidth, pupilHeight);
    ellipse(x + 40, y - 20, pupilWidth, pupilHeight);

//mouth
    fill(255);
    beginShape();
    curveVertex(x - (mouthWidth/2), y + mouthHeight);
    curveVertex(x - (mouthWidth/2), y + mouthHeight);
    curveVertex(x, y + (mouthHeight*2));
    curveVertex(x + (mouthWidth/2), y + mouthHeight);
    curveVertex(x + (mouthWidth/2), y + mouthHeight);
    endShape();

//brows
    strokeWeight(5);
    stroke(r, g);
    fill(r, g, 120);
    if (brow_shape == 1) {
        beginShape();
        curveVertex(x - 60, y - 60);
        curveVertex(x - 60, y - 60);
        curveVertex(x - 40, y - 70);
        curveVertex(x - 40, y - 70);
        endShape();

        beginShape();
        curveVertex(x + 60, y - 60);
        curveVertex(x + 60, y - 60);
        curveVertex(x + 40, y - 70);
        curveVertex(x + 40, y - 70);
        endShape();
    } else if (brow_shape == 2) {
        noFill();
        bezier(x - 50, y - 90, x - 50, y - 80, x - 25, y - 65, x - 25, y - 50);
        bezier(x + 50, y - 90, x + 50, y - 80, x + 25, y - 65, x + 25, y - 50);
    } else if (brow_shape == 3) {
        noFill();
        beginShape();
        curveVertex(x - (eyeWidth + 10), y - (eyeHeight + 10));
        curveVertex(x - (eyeWidth + 10), y - (eyeHeight + 10));
        curveVertex(x - (eyeWidth + 4), y - (eyeHeight + 20));
        curveVertex(x - (eyeWidth - 3), y - (eyeHeight + 10));
        curveVertex(x - (eyeWidth - 3), y - (eyeHeight + 10));
        endShape();

        beginShape();
        curveVertex(x + (eyeWidth + 10), y - (eyeHeight + 10));
        curveVertex(x + (eyeWidth + 10), y - (eyeHeight + 10));
        curveVertex(x + (eyeWidth + 4), y - (eyeHeight + 20));
        curveVertex(x + (eyeWidth - 3), y - (eyeHeight + 10));
        curveVertex(x + (eyeWidth - 3), y - (eyeHeight + 10));
        endShape();
    }


//face shape
    strokeWeight(1);
    stroke(r, g, b);
    fill(r, g, b, 120);
    if (rand_shape == 1) {
        ellipse(x, y, ellipseWidth, ellipseHeight);
    } else if (rand_shape == 2) {
        triangle(x - 200, y - 140, x + 200, y - 140, x, y + 140);
    } else if (rand_shape == 3) {
        rect(160, 100, x, y);
    } else {
        quad(x, y - 160, x + 160, y, x, y + 140, x - 160, y)
    }



//crown
    /*point(270, 103);
    point(320, 120);
    point(355, 110);
    point(370, 103);
    point(270, 103);
    point(270, 54);
    point(300, 75);
    point(320, 45);
    point(340, 75);
    point(370, 54);*/
    strokeWeight(1);

    fill(g, b, 200);
    beginShape();
    curveVertex(270, 103);
    curveVertex(270, 103);
    curveVertex(320, 120);
    curveVertex(355, 110);
    curveVertex(370, 103);
    curveVertex(370, 103);
    curveVertex(370, 54);
    curveVertex(370, 54);
    curveVertex(340, 75);
    curveVertex(340, 75);
    curveVertex(320, 45);
    curveVertex(320, 45);
    curveVertex(300, 75);
    curveVertex(300, 75);
    curveVertex(270, 54);
    curveVertex(270, 54);
    curveVertex(270, 103);
    curveVertex(270, 103);
    endShape();

}

function mousePressed() {
//face
    rand_shape = random([1, 2, 3, 4]);

//eyes
    eyeWidth = random(20, 60);
    eyeHeight = random(40, 80);

//pupil 
    pupilWidth = random(2, 10);
    pupilHeight = random(2, 10);

//mouth
    mouthWidth = random(20, 90);
    mouthHeight = random(20, 50);

//brows
    brow_shape = random([1, 2, 3]);

//changing colors
    var d = dist(mouseX, mouseY, 320, 240);
    if (d < 100) {
        r = random(255);
        g = random(255);
        b = random(255);

    }

}

Creating this was a fun process overall. I wanted to change my style up a bit and create a character that’s more abstract, so I used different shapes for the heads. I wanted the style to be more cartoon-y so I tried to use more pastel, and brighter colors in the color randomization. I learned a lot about different ways to randomize the varying components of my piece. A challenge I faced was definitely getting the colors to show up right.

Project 2- Variable faces

sketch Download

var LeyeXPoint = 225;
var LeyeYPoint = 190;
var ReyeXPoint = 325;
var ReyeYPoint = 190;
var faceHeight = 120;
var faceWidth = 260;
var noseXPoint = 280;
var noseYPoint = 200;
var mouthXPoint = 255; 
var mouthYPoint = 285;
var eyebrowXPoint = 300;
var eyebrowYPoint = 185;
var backgroundColor = 0

function setup() {
    createCanvas(640, 480);
    background(0);
    text("p5.js vers 0.9.0 test.");
}
 
function draw() {
    background((backgroundColor), (backgroundColor), (backgroundColor));
    fill (229, 184, 135);
    noStroke();
    ellipse(320, 235, faceWidth - 70, faceHeight + 115);
    
    noFill();
    strokeWeight(7);
    stroke(250, 250, 250);
    beginShape();
    curveVertex(faceWidth, faceHeight);
    curveVertex(faceWidth, faceHeight);
    curveVertex(faceWidth - 50, faceHeight + 100);
    curveVertex(faceWidth, faceHeight + 200);
    curveVertex(faceWidth + 45, faceHeight + 225);
    curveVertex(faceWidth + 100, faceHeight + 200);
    curveVertex(faceWidth + 150, faceHeight + 120);
    curveVertex(faceWidth + 150, faceHeight + 140);
    curveVertex(faceWidth + 165, faceHeight + 130);
    curveVertex(faceWidth + 180, faceHeight + 80);
    curveVertex(faceWidth + 170, faceHeight + 60);
    curveVertex(faceWidth + 150, faceHeight + 80);
    curveVertex(faceWidth + 155, faceHeight + 90);
    curveVertex(faceWidth + 150, faceHeight + 100);
    curveVertex(faceWidth + 150, faceHeight + 100);
    endShape(); // face and ear
    
    noStroke();
    noFill();
    fill (173, 230, 230);
    strokeWeight(5);
    stroke(250, 250, 250);
    beginShape();
    curveVertex(LeyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(LeyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(LeyeXPoint, LeyeYPoint);
    curveVertex(LeyeXPoint - 20, LeyeYPoint + 30);
    curveVertex(LeyeXPoint, LeyeYPoint + 50);
    curveVertex(LeyeXPoint + 30, LeyeYPoint + 30);
    curveVertex(LeyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(LeyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(LeyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(LeyeXPoint - 5, LeyeYPoint + 20);
    curveVertex(LeyeXPoint, LeyeYPoint + 35);
    curveVertex(LeyeXPoint + 10, LeyeYPoint + 20);
    curveVertex(LeyeXPoint - 5, LeyeYPoint + 20);
    curveVertex(LeyeXPoint - 5, LeyeYPoint + 20);
    endShape(); //Left Eye
    
    noStroke();
    noFill();
    fill (173, 230, 230);
    strokeWeight(5);
    stroke(250, 250, 250);
    beginShape();
    curveVertex(ReyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(ReyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(ReyeXPoint, LeyeYPoint);
    curveVertex(ReyeXPoint - 25, LeyeYPoint + 30);
    curveVertex(ReyeXPoint, LeyeYPoint + 50);
    curveVertex(ReyeXPoint + 30, LeyeYPoint + 30);
    curveVertex(ReyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(ReyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(ReyeXPoint + 15, LeyeYPoint + 10);
    curveVertex(ReyeXPoint - 5, LeyeYPoint + 20);
    curveVertex(ReyeXPoint, LeyeYPoint + 35);
    curveVertex(ReyeXPoint + 10, LeyeYPoint + 20);
    curveVertex(ReyeXPoint - 5, LeyeYPoint + 20);
    curveVertex(ReyeXPoint - 5, LeyeYPoint + 20);
    endShape(); //Right Eye
    
    noStroke();

    noFill();
    strokeWeight(5);
    stroke(250, 250, 250);
    beginShape();
    curveVertex(noseXPoint, noseYPoint);
    curveVertex(noseXPoint, noseYPoint);
    curveVertex(noseXPoint - 25, noseYPoint + 55);
    curveVertex(noseXPoint - 10, noseYPoint + 70);
    curveVertex(noseXPoint - 5, noseYPoint + 65);
    curveVertex(noseXPoint - 5, noseYPoint + 65);
    curveVertex(noseXPoint, noseYPoint + 70);
    curveVertex(noseXPoint + 10, noseYPoint + 65);
    curveVertex(noseXPoint, noseYPoint + 55);
    curveVertex(noseXPoint, noseYPoint + 55);
    endShape(); //nose
    
    fill (193, 104, 115);
    strokeWeight(5);
    stroke(250, 250, 250);
    beginShape();
    curveVertex(mouthXPoint - 3, mouthYPoint + 25);
    curveVertex(mouthXPoint - 3, mouthYPoint + 25);
    curveVertex(mouthXPoint, mouthYPoint);
    curveVertex(mouthXPoint + 15, mouthYPoint + 15);
    curveVertex(mouthXPoint + 25, mouthYPoint);
    curveVertex(mouthXPoint + 65, mouthYPoint + 25);
    curveVertex(mouthXPoint - 3, mouthYPoint + 25);
    curveVertex(mouthXPoint - 3, mouthYPoint + 25);
    endShape(); //mouth
    
    //fill (150, 150, 150);
    //noStroke();
    //triangle(eyebrowXPoint - 5, eyebrowYPoint, eyebrowXPoint + 75, eyebrowYPoint, eyebrowXPoint + 18, eyebrowYPoint - 20);
    
    //fill (150, 150, 150);
    //noStroke();
    //triangle(eyebrowXPoint - 35, eyebrowYPoint, eyebrowXPoint - 85, eyebrowYPoint, eyebrowXPoint - 50, eyebrowYPoint - 20);
    
    noFill();
    fill (150, 150, 150);
    strokeWeight(3);
    stroke(250, 250, 250);
    beginShape();
    curveVertex(eyebrowXPoint, eyebrowYPoint);
    curveVertex(eyebrowXPoint, eyebrowYPoint);
    curveVertex(eyebrowXPoint + 15, eyebrowYPoint - 15);
    curveVertex(eyebrowXPoint + 65, eyebrowYPoint);
    curveVertex(eyebrowXPoint + 25, eyebrowYPoint - 5);
    curveVertex(eyebrowXPoint, eyebrowYPoint);
    curveVertex(eyebrowXPoint, eyebrowYPoint);
    endShape(); //Leyebrow
    
    noFill();
    fill (150, 150, 150);
    strokeWeight(3);
    stroke(250, 250, 250);
    beginShape();
    curveVertex(eyebrowXPoint - 40, eyebrowYPoint);
    curveVertex(eyebrowXPoint - 40, eyebrowYPoint);
    curveVertex(eyebrowXPoint - 55, eyebrowYPoint - 15);
    curveVertex(eyebrowXPoint - 95, eyebrowYPoint);
    curveVertex(eyebrowXPoint - 75, eyebrowYPoint - 5);
    curveVertex(eyebrowXPoint - 40, eyebrowYPoint);
    curveVertex(eyebrowXPoint - 40, eyebrowYPoint);
    endShape(); //Reyebrow

}
 
function mousePressed(){ 
    backgroundColor = random(0, 210);
    LeyeYPoint = random(180, 200);
    ReyeYPoint = random(180, 200);
    faceHeight = random(100, 140);
    noseYPoint = random(185, 215);
    mouthYPoint = random(270, 295);
    eyebrowYPoint = random(175, 195);
}

Project 2 – Variable Faces

Click the bear to change its mood!

sketch_rachell

var headShape = 0;
var eyeShape = 0;
var noseShape = 0;
var mouthShape = 0;
var cheekColor = 0;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
	//background fit mouth mood
    if (mouthShape == 0){ //happy
    	background(227, 212, 95);
    } else if (mouthShape == 1){ //gasp
    	background(191, 153, 209);
    } else if (mouthShape == 2){ //unamused
    	background(153, 175, 209);
    } else { //slanted
    	background(153, 209, 173);
    }

    //head
    fill(255);
    noStroke();
    if (headShape == 0){
    	//ears
    	ellipse((width/2)-125, 80, 50, 50);
    	ellipse((width/2)+125, 80, 50, 50);
    	//face
    	ellipse(width/2, height/2, 400, 400);
    } else if (headShape == 1){
    	//ears
    	ellipse((width/2)-125, 100, 50, 50);
    	ellipse((width/2)+125, 100, 50, 50);
    	//face
    	ellipse(width/2, height/2, 400, 350);
    } else {
    	//ears
    	ellipse((width/2)-125, 100, 50, 50);
    	ellipse((width/2)+125, 100, 50, 50);
    	//face
    	rect(120, 90, 400, 300, 130);
    }

    //eyes
    var eyeLX = width/2 - 100;
    var eyeRX = width/2 + 100;
    var eyeSize = 20;

    if (eyeShape == 0){ //eyes open
    	fill(0);
    	ellipse(eyeLX, height/2, eyeSize);
    	ellipse(eyeRX, height/2, eyeSize);
    } else if (eyeShape == 1){ //eyes closed straight
    	stroke(0);
    	strokeWeight(7);
    	line(eyeLX-(eyeSize/2), height/2, eyeLX+(eyeSize/2), height/2);
    	line(eyeRX-(eyeSize/2), height/2, eyeRX+(eyeSize/2), height/2);
    } else if (eyeShape == 2){ //eyes closed arc
    	stroke(0);
    	strokeWeight(7);
    	arc(eyeLX, height/2, eyeSize, eyeSize, PI, TWO_PI);
    	arc(eyeRX, height/2, eyeSize, eyeSize, PI, TWO_PI);
    }else { //eyes closed arc 180
    	stroke(0);
  		strokeWeight(7);
    	arc(eyeLX, height/2, eyeSize, eyeSize, TWO_PI, PI);
    	arc(eyeRX, height/2, eyeSize, eyeSize, TWO_PI, PI);
    }

    //nose
    if (noseShape == 0){
    	fill(0);
    	noStroke();
    	ellipse(width/2, (height/2)+ 10, 30, 15);
    } else {
    	fill(0);
    	noStroke();
    	triangle((width/2)-15, (height/2)+10, (width/2)+15, (height/2)+10, width/2, (height/2)+15);
    }

    //mouth
    if (mouthShape == 0){ //happy
    	noFill();
    	stroke(10);
  		strokeWeight(5);
    	arc(width/2, (height/2)+40, 30, 20, TWO_PI, PI);
    } else if (mouthShape == 1){ //gasp
    	noFill();
    	stroke(10);
    	strokeWeight(5);
    	ellipse(width/2, (height/2)+50, 30);
    } else if (mouthShape == 2){ //unamused
    	stroke(10);
    	strokeWeight(5);
    	line((width/2)-15, (height/2)+40, (width/2)+15, (height/2)+40);
    } else { //slanted
    	stroke(10);
    	strokeWeight(5);
    	line((width/2)-15, (height/2)+35, (width/2)+15, (height/2)+45);
    }

    //cheeks
    if (cheekColor == 0){
    	noStroke();
    	fill(189, 138, 134);
    	ellipse((width/2)-125, (height/2)+20, 30, 10);
    	ellipse((width/2)+125, (height/2)+20, 30, 10);
    } else if (cheekColor == 1){
    	noStroke();
    	fill(227, 119, 104);
    	ellipse((width/2)-125, (height/2)+20, 30, 10);
    	ellipse((width/2)+125, (height/2)+20, 30, 10);
    } else{

    }
}
 
function mousePressed() {
    headShape = int(random(3));
    eyeShape = int(random(4));
    noseShape = int(random(2));
    mouthShape = int(random(4));
    cheekColor = int(random(3));
}

This is programmed so that every time you click the bear, it has a different mood using a combination of different facial variables: head shape, eyes, nose, mouth, and cheeks. The background color reflects the mood based on the mouth, since the mouth shapes seemed the most emotive to me.

There are 5 variables for a face, each with 2-3 options.

There are 3 types of heads you could get: circle, oval, or rounded rectangle. Then there are 4 types of eyes, open (circles), or closed (straight, or arc up or arc down).
There are 2 types of noses, either round or triangular.
There are 4 different mouths: smiling, gasping, straight unamused, or slanted. This random variable is also linked to the background color.
There are 3 options for cheeks: rosy cheeks, bright blush, or no blush.

I hope this program makes you giggle!

Project 02: Variable Face

The main challenges in constructing my face were primarily around the placement of each element and how to control their heights so pieces didn’t overlap in ugly ways or stick out, but also to keep the overall identity of the face. I wanted each face to seem a little larger than life, while generating a completely new and cartoonish, albeit simple, face every time. I wanted simple elements based off of the original code, but that used that basic template given to us to create really weird and outrageous faces.

cowboyedit

var eyeSize = 20;     ////how large the outside eyes get
var faceWidth = 100;   ////width of face
var faceHeight = 150;  ////height of face
var glasses = 40      ////size of glasses lens
var hatWidth = 125    ////width of the brim
var hatHeight = 35    ////height of the brim
var hatX = 25        ////position of the top corner of the rectangular portion of the hat
var hatTall = 150    ////length of the rectangular portion of the hat
var bandannaSize = 80 ///width of the bandanna 
var bandannaY = 380   ///bottom corner of the bandanna
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(180);
    var hatSize = hatX * 2   ////determines width of the hat based on distance from the center
    var eyeLX = width / 2 - faceWidth * 0.25;  ////size of left eye
    var eyeRX = width / 2 + faceWidth * 0.25;  ////size of right eye
    var noseLength = 40    ////furthest position of nose
    var noseX1 = (width / 2, height / 2) - (.35 * faceWidth)   ////first x of nose triangle
    var noseY1 = height / 2 + faceHeight / 10   ////first y of nose triangle
    var noseX2 = (width / 2, height / 2) + (.75 * faceWidth)  ////2nd x of nose triangle
    var noseY2 = height / 2 + faceHeight / 10    ////2nd y of nose triangle
    var noseX3 = faceWidth / 2   ////x position of noise point
    var noseY3 = (height / 2) + noseLength ////height of nose point
    var bandanna1 = (width / 2) - bandannaSize  ////right x of bandanna, based on distance from center
    var bandanna2 = (width / 2) + bandannaSize   ///left x of bandanna, based on distance from center
    var bandannaLength = 400    ////y of bandanna point
    rect((width / 2) - hatX, 4, hatSize, hatTall) ////rectangle of hat
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); ////face
    triangle(noseX1, noseY1, noseX2, noseY2, noseX3, noseY3)   ////nose
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);  /////left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);  /////right eye
        if (faceWidth > 200) {   ////condition for glasses when face is wide
            line(eyeRX, height / 2, eyeLX, height / 2)
            ellipse(eyeRX, height / 2, glasses)
            ellipse(eyeLX, height / 2, glasses)
        } else {    ////otherwise pupils of eyes
            ellipse(eyeRX, height / 2, 4)
            ellipse(eyeLX, height / 2, 4)
         }    
    ellipse(width / 2, (height / 2) - ((faceHeight / 2) * .85), hatWidth, hatHeight);   /////hat brim
    triangle(bandanna1, bandannaY , bandanna2, bandannaY, width / 2, bandannaLength)    ////bandanna

       noLoop()


 
}

    

 
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.
    redraw()
    faceWidth = random(75, 280);
    faceHeight = random(75, 280);
    eyeSize = random(10, 30);
    glasses = random(40, 65)
    hatWidth = random(120, 240)
    hatHeight = random(40, 80)
    hatX = random(10, 40)
    hatTall = random(160, 280)
    bandannaSize = random(100, 300)
    bandannaY = random(260, 300)
    bandannaLength = random(400, 550)
}

Project – 02: Variable Faces

My week could be described with this emoji: 🤡, so I decided to lock myself in my apartment to code this as a coping mechanism.

I thought it was interesting that clowns are interpreted very differently depending on their context and appearance. I decided to take advantage of this project to demonstrate the unsettling feeling they give me. I was surprised to see that the incremental changes in color and size of the clown’s features actually increased the cursed factor significantly.

clown!

//global variables
var eyewhite = 42;
var eyeshadow = 60;
var pupil = 20;
var faceWidth = 315;
var faceHeight = 315;
var nose = 63;
var cheek = 58;
var eyebrow = 50;
var shoulderWidth = 480;
var mouthType = 1
//shirtcolor
var shirtR = 0;
var shirtG = 192;
var shirtB = 184;
//red default color
var r  = 255;
var g = 5;
var b = 37;
//eyeshadowcolor
var shadowR = 97;
var shadowG = 116;
var shadowB = 255;

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

function draw() {
    background(255, 160, 59);
    var centerX = width / 2;
    var centerY = height / 2;

//body
    //shoulders
        noStroke();
        fill (shirtR, shirtG, shirtB);
        rect(0, 480, shoulderWidth, 165, 90, 90, 0, 0);

    //bottomneck
        noStroke();
        fill (255, 237, 219);
        ellipse (centerX, 486, 144, 82);

    //neck
        noStroke();
        fill (255, 237, 219);
        rect (168, 419, 144, 66);

    //buttons
        noStroke();
        fill (255, 250, 116);
        ellipse (centerX, 557, 27, 27);

        noStroke();
        fill (255, 250, 116);
        ellipse (centerX, 592, 27, 27);

        noStroke();
        fill (255, 250, 116);
        ellipse (centerX, 626, 27, 27);

//face
    noStroke(); 
    fill(255, 245, 227);
    ellipse ( centerX, centerY, faceWidth, faceHeight);

    //cheeks
        noStroke();
        fill(255, 51, 86, 100);
        ellipse (140, centerY, cheek, cheek);

        noStroke();
        fill(255, 51, 86, 100);
        ellipse (333, centerY, cheek, cheek);

    //nose
        noStroke();
        fill (r - 18, g, b); //darker red
        ellipse (centerX, 320, nose, nose);

    //eye
    var eyeLX = 185;
    var eyeRX = 291;
    var eyeY = 271;

        //eyeshadow
            noStroke();
            fill (shadowR, shadowG, shadowB);
            ellipse (eyeLX, eyeY, eyeshadow);

            noStroke();
            fill (shadowR, shadowG, shadowB);
            ellipse (eyeRX, eyeY, eyeshadow);

        //eyewhite
            noStroke ();
            fill (255);
            ellipse (eyeLX, eyeY, eyewhite);

            noStroke ();
            fill (255);
            ellipse (eyeRX, eyeY, eyewhite);

        //pupil
            noStroke ();
            fill (0);
            ellipse (eyeLX, eyeY, pupil, pupil);

            noStroke ();
            fill (0);
            ellipse (eyeRX, eyeY, pupil, pupil);

    //mouth
    var mouthLX = 170;
    var mouthRX = 310;
    var smileY = 352;
    var neutralY = 374;
    var frownY = 400;

    //draw three different mouth expressions
    if (mouthType ==1){
        //smile
            noFill();//lips
            stroke(r, g, b);
            strokeWeight(36);
            beginShape ();
            curveVertex( mouthLX, smileY)
            curveVertex( mouthLX, smileY)
            curveVertex( 195, 377)
            curveVertex (centerX, 393)
            curveVertex( width - 195, 377)
            curveVertex( mouthRX, smileY)
            curveVertex( mouthRX, smileY)
            endShape();

            noFill();//teeth
            stroke(255);
            strokeWeight(11);
            beginShape ();
            curveVertex( mouthLX, smileY)
            curveVertex( mouthLX, smileY)
            curveVertex( 195, 377)
            curveVertex (centerX, 393)
            curveVertex( width - 195, 377)
            curveVertex( mouthRX, smileY)
            curveVertex( mouthRX, smileY)
            endShape();

    } else if (mouthType ==2){
        //neutral
            noFill();//lips
            stroke(r,g,b);
            strokeWeight (36);
            line (mouthLX, neutralY, mouthRX, neutralY);

            noFill();//teeth
            stroke(255);
            strokeWeight (11);
            line (mouthLX, neutralY, mouthRX, neutralY);

    } else if (mouthType ==3){
        //frown
            noFill();//lips
            stroke(r, g, b);
            strokeWeight(36);
            beginShape ();
            curveVertex( mouthLX, frownY)
            curveVertex( mouthLX, frownY)
            curveVertex( 195, 370)
            curveVertex( centerX, 359)
            curveVertex( width - 195, 370)
            curveVertex( mouthRX, frownY)
            curveVertex( mouthRX, frownY)
            endShape();

            noFill();//teeth
            stroke(255);
            strokeWeight(11);
            beginShape ();
            curveVertex( mouthLX, frownY)
            curveVertex( mouthLX, frownY)
            curveVertex( 195, 370)
            curveVertex( centerX, 359)
            curveVertex( width - 195, 370)
            curveVertex( mouthRX, frownY)
            curveVertex( mouthRX, frownY)
            endShape();
    }
    //hair
        //left
        noStroke();
        fill(r,g,b);
        ellipse (83, 260, 42);
        ellipse (91, 230, 42);
        ellipse (57, 209, 42);
        ellipse (77, 203, 42);
        ellipse (68, 167, 42);
        ellipse (52, 147, 42);
        ellipse (56, 209, 42);
        ellipse (47, 182, 42);
        ellipse (67, 235, 60);
        ellipse (98, 198, 50);
        ellipse (57, 125, 29);

        //right
        noStroke();
        fill(r,g,b);
        ellipse (width- 83, 260, 42);
        ellipse (width- 91, 230, 42);
        ellipse (width- 57, 209, 42);
        ellipse (width- 77, 203, 42);
        ellipse (width- 68, 167, 42);
        ellipse (width- 52, 147, 42);
        ellipse (width- 56, 209, 42);
        ellipse (width- 47, 182, 42);
        ellipse (width- 67, 235, 60);
        ellipse (width- 98, 198, 50);
        ellipse (width- 57, 125, 29);
}

function mousePressed() {
eyewhite = random (30, 60);
eyeshadow = random( 55, 70);
pupil = random (15, 30);
faceWidth = random(300, 330);
faceHeight = random(315, 380);
nose = random(45, 90);
cheek = random(55, 90);
mouthType = int(random(1,4));
//shirtcolor
shirtR = random(0, 255);
shirtG = random(0, 255);
shirtB = random(0, 255);
//eyeshadowcolor
shadowR = random(0, 255);
shadowG = random(0, 255);
}

PROJECT 02- VARIABLE FACE

JUNE_VARIABLEFACE

var face=1;
var backColor=1;
var glasses=1;
var mouth=1;


function setup() {
    createCanvas(400,400);
    background(100);
 }


function draw() {

//background
	if (backColor==1) {
		background(136,160,150);
	} else if (backColor==2) {
		background(53,61,47);
	} else {
		background(32,42,37);
	}


//face
	rectMode(CENTER);
	var facex=(width/2);
	var facey=(height/2);
	if (face==1) {
		noStroke();
		fill(255);
		rect(facex,facey,width/3,height/2.5);
	} else if (face==2) {
		noStroke();
		ellipse(facex,facey,width/3,height/2);
	} else {
		noStroke();
		rect(facex,facey,width/3.5,height/2.2,40);
	}

//glasses
	print(glasses);
	if (glasses==1) {
		stroke(5);
		strokeWeight(0);
   	 	fill(0);
		ellipse(facex-25,facey-30,30,30);
		ellipse(facex+25,facey-30,30,30);
		strokeWeight(2.5);
		stroke(0);
		line(facex-25,facey-30,facex+25,facey-30);
	} else if (glasses==2) {
		fill(0);
		stroke(0);
		strokeWeight(3);
		rect(facex-25,facey-30,30,25,10);
		rect(facex+25,facey-30,30,25,10);
		line(facex-25,facey-30,facex+25,facey-30);
	} else {
		stroke(0);
		strokeWeight(10);
		point(facex-25,facey-30);
		point(facex+25,facey-30);
	}

//nostrils
	stroke(0);
	strokeWeight(2+(1*face));
	point(facex-5,facey+10);
	point(facex+5,facey+10);

//mouth
	fill(129,93,109);
	noStroke();
	if (mouth==1) {
		rect(facex,facey+40,15,30,5);
	} else if (mouth==2) {
		ellipse(facex,facey+40,30,15);
	} else {
		ellipse(facex,facey+40,30,30);
	}

//hair strand
	noFill();
	stroke(100);
	strokeWeight(5);
	curve(facex,facey-70,facex,facey-70,facex+50,facey-(100-(5*glasses)),facex+50,facey-(120+(20*glasses)));

//label
	fill(255);
	noStroke();
    textSize(6);
    textAlign(CENTER);
    text("JUNE LEE / SECTION C",width/2,25);
}

function mousePressed() {
	face=(int(random(1,4)));
	backColor=(int(random(1,4)));
	glasses=(int(random(1,4)));
	mouth=(int(random(1,4)));
}

I enjoyed doing this project as I was able to explore different functions with the mousePressed() function on p5.js. By defining some variables, I was able to type code in relation to other measurements existing on the canvas.

Project-02: Variable Faces

sketch Download

//Isabel Xu
//Section A
var face_width = 200;
var face_length = 200;
var hair_length = 600
var hair_color = 132;
var eye_width = 30
var eye_size = 20


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

function draw() {

  background(220);

  //hair
  noStroke();
  fill(hair_color, 117, 82);
  rect(81,88,260,hair_length,100,100,45,45);

  //face
  fill(247, 194, 150);
  noStroke();
  ellipse(width/2,240,face_width,face_length);
  //ears
  ellipse(width/2-(face_width/2),275,30,40);
  ellipse(width/2+(face_width/2-10),275,30,40);

  
  //upper body
  fill(247, 194, 150);
  noStroke();
  beginShape();
  vertex(width/2-35, 260);
  vertex(width/2-35, 430);
  vertex(width/2-175, 470);
  vertex(width/2-225, 550);
  vertex(width/2-225, 650);
  vertex(width/2+225, 650);
  vertex(width/2+225, 550);
  vertex(width/2+175, 470);
  vertex(width/2+35, 430);
  vertex(width/2+35, 260);
  endShape();
  

  //lips
  fill(190,111,82);
  noStroke();
  beginShape();
  curveVertex(width/2-20,240+(face_length/2)-45);
  curveVertex(width/2-15,240+(face_length/2)-35);
  curveVertex(width/2+15,240+(face_length/2)-25);
  curveVertex(width/2+30,240+(face_length/2)-35);
  curveVertex(width/2+50,240+(face_length/2)-45);
  endShape();
  
  beginShape();
  curveVertex(width/2-20,240+(face_length/2)-25);
  curveVertex(width/2-15,240+(face_length/2)-35);
  curveVertex(width/2+15,240+(face_length/2)-40);
  curveVertex(width/2+30,240+(face_length/2)-35);
  curveVertex(width/2+50,240+(face_length/2)-25);
  endShape();

  //nose
  noStroke();
  fill(190,111,82);
  beginShape();
  vertex(width/2+2, 240+(face_length/2)-75);
  vertex(width/2, 240+(face_length/2)-60);
  vertex(width/2+20, 240+(face_length/2)-60);
  vertex(width/2+18, 240+(face_length/2)-75);
  endShape(CLOSE);
  
  beginShape();
  curveVertex(width/2, 240+(face_length/2)-60);
  curveVertex(width/2, 240+(face_length/2)-60);
  curveVertex(width/2+10, 240+(face_length/2)-55);
  curveVertex(width/2+20, 240+(face_length/2)-60);
  curveVertex(width/2+20, 240+(face_length/2)-60);
  endShape();


  //eyes
    fill(255);
    ellipse(width / 2 - face_width * 0.25 +10,245 , eye_width, eye_size);
    ellipse(width / 2 + face_width * 0.25 +10, 245, eye_width, eye_size);
    //pupils
    fill(76,50,36);
    noStroke();
    ellipse((width / 2 - face_width * 0.25 +10)+3, 244 , eye_width/2,eye_size*0.8);
    ellipse((width / 2 + face_width * 0.25 +10)+3,244, eye_width/2., eye_size*0.8);

  

  //garment with transparency
  fill(150,190);
  noStroke();
  strokeWeight(3);
  beginShape();
  curveVertex(width/2-45,405);
  curveVertex(width/2-35,425);
  curveVertex(width/2-57,435);
  curveVertex(width/2-175, 460);
  curveVertex(width/2-225, 550);
  curveVertex(width/2-205, 650);
  curveVertex(width/2+195, 650);
  curveVertex(width/2+225, 550);
  curveVertex(width/2+175, 460);
  curveVertex(width/2+57,435);
  curveVertex(width/2+35,425);
  curveVertex(width/2+45,405);
  endShape(CLOSE);

  //garment on top layer
  fill(250);
  noStroke();
  beginShape();
  vertex(width/2,610)
  vertex(width/2-50,430)
  vertex(width/2-170,430)
  vertex(width/2-180,470)
  vertex(width/2-180,650)
  vertex(width/2+180,650)
  vertex(width/2+180,470)
  vertex(width/2+170,430)
  vertex(width/2+50,430)
  endShape();

  //earrings *line
  stroke(2); //line
  strokeWeight(1);
  strokeCap(SQUARE);
  line(width/2-(face_width/2),290,width/2-(face_width/2),385);
  line(width/2+(face_width/2)-10,290,width/2+(face_width/2)-10,385);
  
  //earrings *rounds
    if (mouseIsPressed) {
        fill(99,234,232);
    } else {
        fill(249,239,80);
    }
    
    ellipse(width/2-(face_width/2),385,50,50);
    ellipse(width/2+(face_width/2)-10,385,40,40);
  
  
  
  }


function mousePressed() {
    hair_length = random(320, 431);
    face_width = random(180, 205);
    face_length = random (190,220)
    hair_color = random(50,132);
    eye_width = random(35,50);
    eye_size = random(25,35);
   

   
}

I really enjoy how the mousePressed() function realize an interaction with the player while the domain argument allows the changing color to set within a color scheme. The variables for the face part visualize a perception of mine on how everyone looks drastically different in varieties of focus lens in different cameras.

The mouseisPressed() function makes the earrings pop out from the other variables.