var x = 300

  var y = 200

    var r = 0; // red ;

    var g = map(mouseX, 0, width, 0, 255); // green

    var b = map(mouseY, 0, height, 0, 255); // blue

    fill(r, g, b);

  rect(x - 60,y + 70,120,145,20)

  //camera

  fill('white')

  circle(x - 40,y + 90,15)

  //camera flash

  fill('gray')

  circle(x - 41,y + 107,8)

   //eyes 

  let eyeX = map(mouseX, 0, width, -20, 0);

  eyeX = eyeX + width / 2; // center

  fill('white');

  ellipse(eyeX + 75, y - 5, 35);

  ellipse(eyeX - 35, y - 5, 35);//left eye

  //pupils

   fill(0);

    let eyeY = map(mouseX, 0, width, -20, 0);

  eyeY = eyeY + width / 2; // center

  ellipse(eyeY + 75, y - 5, 16);

  ellipse(eyeY - 35, y - 5, 16);//left eye

}

​

​

​

​

​

​

function setup() {

  createCanvas(600,500);

  background('#9C27B0') ;

  //this is my self portrait interactive

  var x= 300

  var y= 200

  //hair back

  fill(0);

  rect(x-95, y-100, y- 10, y+70 , 50);

  //head

  noStroke()

   fill("#5E2C04");

  circle(x, y, y);

  //hair front

  fill(0);

  rect(x-85 , y-103 , y-30, 70, 70);

​

​

​

  //glasses 

  stroke("rgb(204,178,178)");

  strokeWeight(2);

  fill("rgba(185,122,165,0.25)");

  circle(x - 55, y - 5  , y - 147);

  circle(x + 55, y - 5  , y - 147);

​

  //nose

   noStroke();

  fill(202, 98, 89);

  circle(x , y + 20 , 20);

  //mouth

  fill(202, 100, 91);

  arc(x, y + 60, 50, 20, 12, PI + QUARTER_PI, OPEN);

​

  //interest

   //tablet

  fill('rgb(108,173,182)')

  rect(x - 60,y + 70,120,145,20)  

}

​

​