This is variation of the first portrait project. The cheek of Bao expands, and the blushes move as well. Also, the saturation of the background and the vertical size of the mouth are randomized, too.
var cheek = 200; //extension of cheek
var blushLoc = 200; //position of blush
var mouth = 210; //vertical size of mouth
var bgTint = 67; //saturation of background
var blushSat = 87.6; //saturation of blush
let value1x = 193;
let value1y = 250;
let value2x = 190;
let value2y = 265;
let value3x = 187;
let value3y = 250;
function setup() {
createCanvas(400, 400);
noStroke();
colorMode(HSL);
let c = color(355, 67, 67);
let value = saturation(c);
fill(c);
rect(0,0, 400, 400);
}
function draw(){
colorMode(HSL);
strokeWeight(0)
let c = color(355, bgTint, 67);
let value = saturation(c);
fill(c);
rect(0,0, 400, 400);
fill(212, 57.6, 80.6)
strokeWeight(0)
ellipse(200, 410, 460, 300)
//body
fill(17, 56.2, 93.7);
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(17, 56.2, 93.7);
strokeWeight(0);
beginShape();
curveVertex(200, 100);
curveVertex(200, 100);
curveVertex(180, 135);
curveVertex(325 - cheek, cheek - 30); //325 - cheek, cheek - 30
curveVertex(120, cheek); //cheek
curveVertex(200, 220+(cheek*(1/15))); //low tip
curveVertex(280, cheek); //cheek
curveVertex(75 + cheek, cheek - 30); //75 + cheek, cheek - 30
curveVertex(220, 135);
curveVertex(200, 100);
curveVertex(200, 100);
endShape();
//left eye
fill(0,0,15.7);
circle(170, 175, 20)
//left eye shine
fill(47, 89.7, 73.3);
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(0,0,15.7)
circle(230, 175, 20) //
//right eye shine
fill(47, 89.7, 73.3);
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(30)
strokeWeight(1);
stroke(30);
beginShape();
curveVertex(192.5, 200);
curveVertex(192.5, 200);
curveVertex(196.5, mouth);
curveVertex(200, mouth+4);
curveVertex(203.5, mouth);
curveVertex(207.5, 200);
curveVertex(207.5, 200);
endShape();
fill(17, 56.2, 93.7);
strokeWeight(1);
stroke(30);
circle(192.5, 200, 15);
fill(17, 56.2, 93.7);
strokeWeight(1);
stroke(30);
circle(207.5, 200, 15);
//coverup
fill(17, 56.2, 93.7);
strokeWeight(0);
rect(170, 190, 60, 10);
//blush
fill(355, blushSat, 74.7);
strokeWeight(0);
circle(340-blushLoc, blushLoc-10, 24); //340-cheek, cheek-10
fill(355, blushSat, 74.7);
strokeWeight(0);
circle(blushLoc+60, blushLoc-10, 24);//cheek+60, cheek-10
//left arm
fill(17, 56.2, 93.7);
stroke(30)
strokeWeight(1);
beginShape();
curveVertex(value1x, value1y);
curveVertex(value1x, value1y);
curveVertex(value2x, value2y);
curveVertex(value3x, value3y);
curveVertex(value3x, value3y);
endShape();
//right arm
fill(17, 56.2, 93.7);
stroke(30)
strokeWeight(1);
beginShape();
curveVertex(207, 250);
curveVertex(207, 250);
curveVertex(210, 265);
curveVertex(213, 250);
curveVertex(213, 250);
endShape();
}
function mousePressed() {
bgTint = random(0, 100);
cheek = random(200, 250);
blushLoc = 200 + (cheek - 200)*(3/5);
mouth = random(210, 230)
blushSat ++;
if (value2y === 265) {
value2y = 230;
} else {
value2y = 265;
}
}