//I tried to change the skin tone colour of the face by using random and declaring the variables for skin color 1,2,3 ; first taking - one object but I couldn't do it even by the use of Lerp color function,hence as commented below- I used another ellipse with mouse x and y to give different colour effect.

​

//press the key and tab on the canvas to see the changes in features of the doll.

​

let eye;

let eyeball;

let eyepupil;

let eyelight;

let eyebrow;

let colorVal1;

let colorVal2;

let colorVal3;

let lipcolor;

let from;

let to;

let skincolor1;

let skincolor2;

let plat;

let textsize;

//let from = color(229,190,131);

//let to = color(240,200,199); 

//let skincolor1 = lerpColor(from,to,0.3);

//let skincolor2 = lerpColor(from,to,0.5);

let mytext = 'HELLO THERE!';

​

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

​

  eyepupil = random(0, 3);

  eyebrow = random(1, 4);

  tongue = random(20, 90);

  plat = random(50, 150);

  textsize = random(14, 50);

​

  lipcolor = 255;

  colorVal1 = 255;

  colorVal2 = 255;

  colorVal3 = 125;

​

  from = color(229, 190, 131);

  to = color(240, 200, 199);

  skincolor1 = lerpColor(from, to, 0.3);

  skincolor2 = lerpColor(from, to, 0.6);

​

}

​

function draw() {

​

  background(colorVal2, 120, colorVal1);

  noStroke();

​

  //face-color-tone-1

  fill(skincolor1);

  //fill(168,139,102); first object to be made with different skin tones, but I made rest of the objects to give the effect of different skin tones.  

  ellipse(200, 200, 400, 300);

  //face-color-tone-2 

  fill(skincolor2);

  ellipse(200, 200, 120 - (mouseX - mouseY), 60 - (mouseX - mouseY));

  /*face-color-tone-from

  fill(from);

  ellipse (200,200,1-mouseX, skincolor1);

  //face-color-tone-to

  fill(to);

  ellipse (200,200,400,300);*/

​

  //hair 

  push();

  fill(colorVal2, colorVal1, colorVal3);

  noStroke();

  ellipse(280, 60, 250 + plat, 110);

  ellipse(290, 30, 290 + plat, 110);

  ellipse(100, 30, 290, 100);

  ellipse(100, 40, 240, 120);

  ellipse(20, 90, 100, 180);

  ellipse(390, 90, 180, 190);

  //left-plat (changing thickness on any key being pressed)

  ellipse(30, 220, 70 + plat, 100);

  ellipse(30, 300, 70 + plat, 100);

  ellipse(30, 390, 70 + plat, 100);

  //right-plat (changing thickness on any key being pressed)

  ellipse(370, 390, 70 + plat, 100);

  ellipse(370, 300, 70 + plat, 100);

  ellipse(370, 220, 70 + plat, 100);

​

​

  pop();

​

  //lips

  push();

  noStroke();

  fill(lipcolor, 0, 0);

  arc(190, 280, 130, 60, 0, 180);

  fill(256, 161, 245);

  arc(190, 280, 6 - tongue, 10 + tongue, 0, 180);

​

  pop();

​

  //nose

  fill(colorVal2, colorVal1, 107);

  ellipse(205, 240, 1 - mouseY / 5, 5 - mouseX / 9);

  ellipse(180, 240, 1 - mouseY / 5, 5 - mouseX / 9);

​

  //glasses

  push();

​

  stroke(4);

  strokeWeight(1.7);

  //middle glass frame

  fill(109, 239, 109);

  rect(145, 190, 100, 20, 30);

​

  //left-glass-frame

  push();

  rotate(17);

  rect(20, 160, 100, 20, 10);

  pop();

​

  //right-glass-frame

  push();

  rotate(-17);

  rect(250, 280, 100, 20, 10);

  pop();

​

  //rectangle-frame

  fill(212);

  //rect(50,161,100,80,12);

  rect(50, 165, 100, 80, 12);

  rect(240, 165, 100, 80, 12);

  //rect(55,157,100,80,12);

​

  //hello there - text

  push();

  noStroke();

  fill(90, 10, colorVal1);

  textSize(textsize);

  text(mytext, mouseX - 91, 70);

  pop();

​

  pop();

​

  //eyes-right

  push();

  translate(65, 6);

  fill(200);

  ellipse(230, 190, 40 + mouseX / 5, 53 + mouseY / 35);

​

  //eyeball

  push();

  fill(170, colorVal2, colorVal1);

  ellipse(230, 190, 22 + mouseX / 6, 25 + mouseY / 25);

  pop();

​

  //eyepupil

  fill(0);

  ellipse(230, 190, eyepupil * 2 + mouseX / 12, eyepupil * 3 + mouseY / 15);

​

  //eyelight

  fill(255);

  ellipse(230, 188, 3 + mouseX / 40, mouseY / 20);

​

​

  //eyebrows

  push();

  stroke(0);

  strokeWeight(5);

  noFill();

  translate(5, 1);

  curve(49 * eyebrow, 200, 280 - eyebrow, 151, 160, 170, 193, 121 * eyebrow);

  //curve(230, 250, 300, 151, 160, 160, 183, 171);

  pop();

​

  pop();

​

  //eyes-left

  push();

  //scale(0.6,1);

  translate(1, 90);

  fill(200);

  ellipse(100, 110, 40 + mouseX / 5, 53 + mouseY / 35);

​

  //eyeball

  push();

  fill(170, colorVal2, colorVal1);

  ellipse(100, 110, 22 + mouseX / 6, 25 + mouseY / 25);

  pop();

  //eyepupil

  fill(0);

  ellipse(100, 110, eyepupil * 2 + mouseX / 12, eyepupil * 3 + mouseY / 15);

​

  //eyelight

  fill(255);

  ellipse(100, 109, 3 + mouseX / 40, mouseY / 20);

​

​

  //eyebrows-left

  push();

  stroke(0);

  strokeWeight(5);

  noFill();

  translate(-120, -80);

  curve(49 * eyebrow, 180, 280 - eyebrow, 151, 160, 160, 80, 90 * eyebrow);

  //curve(230, 250, 300, 151, 160, 160, 183, 171);

  pop();

​

  pop();

​

}

​

function mousePressed() {

​

  plat = random(40 - 190); // hairstyle-braid

  eyepupil = random(0, 3);

  eyebrow = random(1, 6);

  tongue = random(20, 90);

  textsize = random(12, 50);

  //skincolor - not working

  from = color(229, 190, 131);

  to = color(240, 200, 199);

  skincolor1 = lerpColor(from, to, 0.3);

  skincolor2 = lerpColor(from, to, 0.6);

}

​

function keyPressed() {

​

  plat = random(80, 120); //open curly hair

  lipcolor = random(0, 255);

  colorVal1 = random(0, 255);

  colorVal3 = random(0, 255);

  colorVal2 = random(0, 255);

  /* not working

  from = color(229,190,131);

  to = color(240,200,199); 

  skincolor1 = lerpColor(from,to,0.3);

  skincolor2 = lerpColor(from,to,0.6); */

}