​

function setup() {

  let cvs = createCanvas(700, 500); // Sets default size and ratio.

  cvs.canvas.style.width='100%';    // 100% width of available space

  cvs.canvas.style.height='auto';

}

​

let rArmAngle = 168;

let lArmAngle = 171;

let v1 = -0.2;

let v2 = 0.2;

​

function head() {

  // Head

  fill(250, 240, 230);

  ellipse(424, 178, 100);

​

  // Hair

  fill(40, 40, 30);

  arc(426, 162, 100, 135, 0, 0.8);

  arc(422, 167, 108, 106, radians(163), 0);

​

  // Ear

  fill(250, 240, 230);

  rotate(radians(-22.5));

  translate(-96, 95);

  rect(420, 221, 10, 24, 20);

  resetMatrix();

​

  // Lips

  fill(250, 200, 230);

  rect(397, 219, 6, 2, 20);

​

  // Glasses

  noFill();

  stroke(233, 233, 180);

  rotate(radians(-22.5));

  translate(-96, 95);

  rect(368, 217, 2, 29, 20);

  resetMatrix();

  strokeWeight(3);

  line(430, 167, 375, 190);

  strokeWeight(1);

  stroke("black");

}

​

function torso() {

  fill(190, 255, 245);

  rotate(radians(-9));

  translate(-50, 60);

  rect(420, 221, 64, 160, 20);

  resetMatrix();

}

​

function leftArm() {

  fill(190, 255, 245);

  rotate(radians(12));

  translate(50, -88);

  rect(420, 221, 28, 85, 20);

  resetMatrix();

}

​

function rightLeg() {

  fill(180, 235, 255);

  rect(385, 361, 33, 120, 20);

  resetMatrix();

}

​

function leftLeg() {

  fill(180, 235, 255);

  rotate(radians(26));

  translate(90, -70);

  rect(420, 221, 33, 120, 20);

  resetMatrix();

  rotate(radians(-9));

  translate(-95, 190);

  rect(420, 221, 110, 37, 20);

  resetMatrix();

}

​

function chair() {

  fill(180, 180, 180);

  rect(485, 390, 7, 87, 7);

  rect(414, 390, 7, 87, 7);

  fill("white");

  rect(404, 375, 105, 20, 10);

  rect(500, 390, 20, -150, 10);

}

​

function table() {

  fill(180, 180, 180);

  rect(300, 340, 15, 137);

  rect(258, 477, 94, 5);

  fill("white");

  rect(205, 332, 200, 15, 10);

}

​

function laptop() {

  fill(1, 1, 1);

  translate(width / 2, height / 2);

  rotate(radians(-12));

  rect(-80, -30, 4, 95, 2);

  resetMatrix();

  rect(286, 326, 95, 6, 3);

}

​

function animateRightArm() {

  fill(250, 240, 230);

  translate(width / 2, height / 2);

  translate(95, 47);

  rArmAngle += v1;

  if (rArmAngle >= 168 || rArmAngle <= 161) {

    v1 = -v1;

  }

  rotate(radians(rArmAngle));

  rect(0, 0, 100, 28, 20);

  resetMatrix();

}

​

function animateLeftArm() {

  fill(250, 240, 230);

  translate(width / 2, height / 2);

  translate(95, 63);

  lArmAngle += v2;

  if (lArmAngle >= 178 || lArmAngle <= 171) {

    v2 = -v2;

  }

  rotate(radians(lArmAngle));

  rect(0, 0, 100, 28, 20);

  resetMatrix();

}

​

function draw() {

  // print(mouseX,mouseY)

  background(220);

​

  animateRightArm();

  torso();

  animateLeftArm();

  leftArm();

  head();

  rightLeg();

  chair();

  leftLeg();

  table();

  laptop();

}

​

​