​

function preload() {

  //preloading background image

  bgImg = loadImage(

    "https://images.unsplash.com/photo-1664048322440-7df65ca19151?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"

  );

}

​

function setup() {

  createCanvas(500, 500);

  background(bgImg);

  //to give a tilted feeling

  rotate(radians(3))

  translate(18, -20)

  //ears

  fill("#F1C27D")

  ellipse(405, 276, 20, 30);

  ellipse(315, 276, 20, 30);

​

  //face

  fill("#FFDBAC")

  arc(360, 250, 100, 240, 0, PI, OPEN);

​

  //eyes

  fill(color(255))

  ellipse(337, 275, 30, 20);

  ellipse(382, 275, 30, 20);

  //eyeballs

  fill(color(0))

  circle(338, 278, 13);

  circle(381, 278, 13);

​

  //mouth

  fill("#FFDBAC")

  arc(360, 315, 60, 60, 0 +radians(25), PI - radians(25));

​

  //nose

  fill("#F1C27D")

  triangle(360, 290, 370, 317, 351, 317);

​

  //head

  fill(color(0))

  arc(355, 250, 110, 80, PI, 0, OPEN);

​

  //dropping hair

  noStroke();

  triangle(300, 250, 365, 247, 301, 280);

}

​

function draw() {

  //   useful for finding coordinated on the canvas

  // print(mouseX, mouseY)

}

​