​

var x = 200;

var y = 300;

​

var h = 350; //height

var h2 = h / 2;

var eyeSize = 40;

var eyeColor = "#795548";

​

let img;

function preload() {

  img = loadImage("assets/book.jpg");

}

​

function setup() {

  createCanvas(400, 600);

}

​

function mousePressed() {

  eyeSize = 100;

  eyeColor = "red";

}

​

function mouseReleased() {

  eyeSize = 40;

  eyeColor = "#795548";

}

​

function keyPressed() {

//  save('self-portrait-with-variables-and-image-Interaction.png')

}

​

function draw() {

  background("rgb(17,171,171)");

​

  fill("rgb(118,217,154)");

  noStroke();

  circle(200, 300, 400);

​

  //eyes

  // let eyeX = mouseX;

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

  eyeX = eyeX + width / 2; //center

  fill(eyeColor);

  ellipse(eyeX + 80, y - 50, eyeSize);

  ellipse(eyeX - 80, y - 50, eyeSize);

  //circle(x + 80, y - 50, 40);

  //circle(x - 80, y - 50, 40);

​

  //pupils

  stroke("#A07261");

  noFill();

  ellipse(eyeX + 80, y - 50, 10);

  ellipse(eyeX - 80, y - 50, 10);

  //ellipse(x + 80, y - 50, 10);

  //ellipse(x - 80, y - 50, 10);

​

  //glasses lens

  noStroke();

  fill(231, 207, 207, 100); //4th number is transparency

  circle(x + 80, y - 50, 100);

  circle(x - 80, y - 50, 100);

​

  //glasses frames

  stroke("black");

  strokeWeight(10);

  noFill();

  circle(x + 80, y - 50, 100);

  circle(x - 80, y - 50, 100);

​

  //glasses glass

  fill("rgba(0,4,128,0.37)");

  ellipse(x + 80, y - 50, 100);

  ellipse(x - 80, y - 50, 100);

​

  //glasses connector

  stroke("black");

  strokeWeight(10);

  noFill();

  line(170, 250, 230, 250);

​

  //smile

  stroke("brown");

  strokeWeight(13);

  arc(200, 390, 80, 80, 0, PI + QUARTER_PI, CHORD);

​

  //book image

  // imageMode(CORNER);

  // image(img, 100, 400, 200, 200);

​

  //text on top

  textSize(20);

  stroke("black");

  strokeWeight(1);

​

  line(0, 9, width, 9);

  textAlign(CENTER, TOP);

  text("How's the water today?", 25, 12, width);

​

  line(0, 37, width, 37);

​

  line(0, 59, width, 59);

  textAlign(CENTER, BASELINE);

  text("What's water?", 25, 62, width);

​

  line(0, 87, width, 87);

​

  //hair

  //var hairHeight =20; this is another way you can do the hair.

  var hairHeight = h / 20;

  strokeWeight(10);

  noFill();

  line(x - 100, y - h2 + hairHeight, x - 80, y - h2 - hairHeight);

  line(x - 60, y - h2 + hairHeight, x - 40, y - h2 - hairHeight);

  line(x - 20, y - h2 + hairHeight, x, y - h2 - hairHeight);

​

  // right side of hair

  line(x + 20, y - h2 + hairHeight, x + 40, y - h2 - hairHeight);

  line(x + 60, y - h2 + hairHeight, x + 80, y - h2 - hairHeight);

  line(x + 100, y - h2 + hairHeight, x + 120, y - h2 - hairHeight);

​

  //book image

  //imageMode(CORNER);

  image(img, frameCount, 450, 200);

  if (frameCount == 400) {

    frameCount = frameCount - 450;

  }

}

​