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

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.
Leave a Reply Cancel reply
