Author: changjuc@andrew.cmu.edu

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.

variableface

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;
  }

}