Danny-Face

I tried to imitate a character called “Bao” from a short film with a lot of curve vertexes, and other elements. I also added an interactive feature to add to the cuteness.

Danny-Face

let value1x = 193;
let value1y = 250;
let value2x = 190;
let value2y = 265;
let value3x = 187;
let value3y = 250;



function setup() {
  createCanvas(400, 400);
  background(227, 114, 124);
}

function draw(){
	fill(177, 204, 234)
	strokeWeight(0)
	ellipse(200, 410, 460, 300)
	//body
	fill(248, 235, 230);
	strokeWeight(0);
	beginShape();
	curveVertex(200, 200);	//top
	curveVertex(200, 200);
	curveVertex(175, 230);
	curveVertex(150, 270); 	//left handle
	curveVertex(125, 280);
	curveVertex(120, 285);
	curveVertex(135, 300);
	curveVertex(160, 288);
	curveVertex(200, 290);	//lowest point
	curveVertex(240, 288);
	curveVertex(265, 300);
	curveVertex(280, 285);
	curveVertex(275, 280);
	curveVertex(250, 270);	//right handle
	curveVertex(225, 230);
	curveVertex(200, 200);
	curveVertex(200, 200);
	endShape();
	//face
	fill(248, 235, 230);
	strokeWeight(0);
	beginShape();
	curveVertex(200, 100);
	curveVertex(200, 100);
	curveVertex(180, 135);
	curveVertex(125, 170);
	curveVertex(120, 200);
	curveVertex(200, 220); //low tip
	curveVertex(280, 200);
	curveVertex(275, 170);
	curveVertex(220, 135);
	curveVertex(200, 100);
	curveVertex(200, 100);
	endShape();
	//left eye
	fill(40)
	circle(170, 175, 20)
	//left eye shine
	fill(248, 222, 126);
	strokeWeight(0);
	beginShape();
	curveVertex(180,175); //right point
	curveVertex(180,175);
	curveVertex(173,178);
	curveVertex(170,185); // lowest point
	curveVertex(167,178);
	curveVertex(160,175);
	curveVertex(167,172);
	curveVertex(170,165);
	curveVertex(173,172);
	curveVertex(180, 175);
	curveVertex(180, 175); //top point
	endShape();
	//right eye
	fill(40)
	circle(230, 175, 20)
	//right eye shine
	fill(248, 222, 126);
	strokeWeight(0);
	beginShape();
	curveVertex(240,175); //right point
	curveVertex(240,175);
	curveVertex(233,178);
	curveVertex(230,185); // lowest point
	curveVertex(227,178);
	curveVertex(220,175);
	curveVertex(227,172);
	curveVertex(230,165);
	curveVertex(233,172);
	curveVertex(240, 175);
	curveVertex(240, 175); //top point
	endShape();
	//mouth
	fill(248, 235, 230);
	strokeWeight(1);
	circle(192.5, 200, 15);
	fill(248, 235, 230);
	strokeWeight(1);
	circle(207.5, 200, 15);
	//coverup
	fill(248, 235, 230);
	strokeWeight(0);
	rect(170, 190, 60, 10);

	//blush
	fill(247, 134, 144)
	strokeWeight(0)
	circle(140, 190, 24)
	fill(247, 134, 144)
	strokeWeight(0)
	circle(260, 190, 24)

	//left arm
	fill(248, 235, 230);
	stroke(140)
	strokeWeight(1);
	beginShape();
	curveVertex(value1x, value1y);
	curveVertex(value1x, value1y);
	curveVertex(value2x, value2y);
	curveVertex(value3x, value3y);
	curveVertex(value3x, value3y);
	endShape();
	//right arm	fill(248, 235, 230);
	stroke(140)
	strokeWeight(1);
	beginShape();
	curveVertex(207, 250);
	curveVertex(207, 250);
	curveVertex(210, 265);
	curveVertex(213, 250);
	curveVertex(213, 250);
	endShape();
}

function mouseClicked() {
  if (value2y === 265) {
    value2y = 230;
  } else {
    value2y = 265;
  }
}