var mo = 0

// var tx = 360

// var ty = 280

// translate(tx,ty) 

let cnv;

​

function setup() {

  cnv = createCanvas(500, 500);

  fill("black")

  cnv.mouseOver(start);

​

}  

function draw() {

  background("LightGrey");

  if (mo < 1){

    howto(0,0)

  } else {

  YouLose(0,0)

  }

  desktop(0,0)

  portrait(0,0)

  // posturecheck(0,0)

  // var tx = 360

  // var ty = 280

  // translate(tx,ty) 

  arms(0,0)

//     translate(200, 200);

//   // a = map(mouseX, 0, width, 0, PI * 2);

//   rotate(a);

//   rect(0, -5, 200, 10);

//   a += 0.01;

}

function start() {

  mo += 1

}

​

function arms() {

  var a = 0    

  var tx = 360

  var ty = 280

  translate(tx,ty)    

  var mb = 60

  a = map(mouseX - mb, 0, width - 2*mb, 0, PI/2, true );

  rotate(a);

  fill("#384C69");

  stroke("Black");

  strokeWeight(1);

  beginShape();        

  curveVertex(420 - tx, 375 - ty);

  curveVertex(420 - tx, 350 - ty);

  curveVertex(400 - tx, 300 - ty);

  curveVertex(360 - tx, 280 - ty);

  curveVertex(340 - tx, 300 - ty);

  curveVertex(350 - tx, 330 - ty);

  curveVertex(370 - tx, 360 - ty);

  curveVertex(385 - tx, 370 - ty);

  curveVertex(398 - tx, 373 - ty);

  endShape(CLOSE);

//   Arm lower

  // stroke("Green")

  noStroke();

  fill("tan")

  beginShape();

  curveVertex(420 - tx, 370 - ty);

  curveVertex(420 - tx, 370 - ty);

  curveVertex(400 - tx, 390 - ty);

  curveVertex(280 - tx, 370 - ty);

  curveVertex(250 - tx, 370 - ty);

  curveVertex(250 - tx, 350 - ty);

  curveVertex(330 - tx, 350 - ty);

  curveVertex(380 - tx, 350 - ty);

  endShape(CLOSE);

//   Hand

  ellipse(235-tx,360-ty, 50, 20);

  ellipse(225-tx,355-ty, 50, 15);

  ellipse(210-tx,355-ty, 50, 15);

  translate(-tx,-ty)

  rotate(-a);

  }      

function desktop() {

  //Mouse

  strokeWeight(.5);

  stroke("Black");

  fill("Gray");

  circle(205, 365, 15);

  ellipse(220,375, 60, 30)

    //Table

    strokeWeight(.5);

    fill("silver");

    rect(250, 405, 20, 95); 

    rect(0, 405, 10, 95);

    fill("#3A3A3A");

    rect(0, 380, 300, 25);

​

    //Monitor

    strokeWeight(2);

    fill("#252525")

    rect(40, 180, 10, 160)

      //Stand

      noStroke();

      beginShape();

      vertex(5, 255);

      vertex(40, 245);

      vertex(40, 270);

      vertex(25, 275);

      vertex(30, 380);

      vertex(0, 380);

      endShape(CLOSE);      

      rect(0,375, 70,5);

    //Keyboard

    stroke("Black");

    strokeWeight(1);

    fill("silver");

    beginShape();

    vertex(168, 360);

    vertex(245, 370);

    vertex(245, 380);

    vertex(165, 380);

    endShape(CLOSE);

      //Keys

      fill("black");

      beginShape();

      vertex(165, 365);

      vertex(250, 375);

      vertex(255, 380);

      vertex(165, 380);

      endShape(CLOSE);

      //Keyoard wire

      noFill();

      strokeWeight(3);

      beginShape();

      curveVertex(200, 450);

      curveVertex(170, 370);

      curveVertex(0, 375);

      curveVertex(-400, 305);

      endShape();

}

​

function portrait() {  

​

//   Facial Translations

  var facex = 0               //Translate left/right

  var facey = 6               //Translate up/down

  // var z = 1                //Facial Scaling           not what I thought, do not use

  noStroke();

​

//   Neck

  fill("tan");

  beginShape();

  vertex(330,250);

  vertex(350,260);

  vertex(330,290);

  vertex(290,280);

  endShape(CLOSE);

//   Head

  fill("tan");

  circle(290,230, 90);

  // triangle(245,230, 255,300, 315,268);

  beginShape();

  curveVertex(245 + 50,230);

  curveVertex(247,225);

  curveVertex(258,290);

  curveVertex(315,268);

  curveVertex(315 - 50,268);

  endShape();

//   Nose 

  translate(facex, facey)          // Translate face

  // scale(z)                 // Scaling

  beginShape();

  curveVertex(250, 240)

  curveVertex(250, 240)

  curveVertex(240, 260)

  curveVertex(250, 260)

  curveVertex(250, 260)

  endShape(CLOSE);

  // scale(1/z)                 //Unscaling

  translate(-facex, -facey)        // Untranslate face

//   Hair

  fill("#1D0202")

  ellipse(290,210, 90,60);

  ellipse(320,225, 40,65);

  rect(275,230, 15, 30, 5);

//   Beard

  fill("#2B1209");

  beginShape();

  curveVertex(275, 180);

  curveVertex(275, 260 - 3);

  curveVertex(250, 270);

  curveVertex(250, 280);

  curveVertex(255, 300);

  curveVertex(280, 285);

  curveVertex(290, 260 - 3);

  curveVertex(290, 260 -80);

  endShape();

​

  translate(facex, facey)          //Translating face

//   Eyes

  fill("White");

  stroke("gray")

  strokeWeight(0.25)

  triangle(245,235, 250,240, 245,245)

  noStroke()

  ellipse(245,240, 3, 10)

  fill("#506616")

  ellipse(244, 240, 1, 3)

//   Eyebrows

  fill("#1D0202");

  // square(243,225, 5)

  beginShape();

  vertex(243 - 1,225 + 1);

  vertex(250 ,227 + 1);

  vertex(250 ,230 + 2);

  vertex(243 - 1,228 + 2);

  endShape(CLOSE)

  translate(-facex, -facey)         //Untranslating body

​

// Ideal Gaming Posture

  fill("#384C69")

  stroke("Black");

  strokeWeight(1);

  beginShape();

  curveVertex(460, 500);

  curveVertex(460, 500);

  curveVertex(460, 400);

  curveVertex(430, 300);

  curveVertex(360, 250);

  curveVertex(325, 310);

  curveVertex(360, 390);

  curveVertex(360, 500);

  curveVertex(360, 500);

  endShape();

}

​

function posturecheck() {

  fill("#white")

  rect(75,20, 350,150, 30)

  fill("black")

  textSize(60)

  textFont("Helvetica")

  textStyle('bold')

  text("POSTURE", 100, 90)

  text("CHECK", 150, 150)

}

​

function YouLose() {

  fill("#white")

  rect(75,20, 350,150, 30)

  fill("black")

  textSize(80)

  textFont("Helvetica")

  textStyle('bold')

  text("DEFEAT", 90, 120)  

  fill("red")

  textSize(70)

  text("D", 94, 116)

  text("E", 152, 116)

  text("F", 205, 116)

  text("E", 255, 116)

  text("A", 307, 116)

  text("T", 358.5, 116)

  // text("LOSE", 150, 150)

}

​

function howto() {

  // fill("#white")

  // rect(75,20, 350,150, 30)

  fill("black")

  textSize(12)

  textFont("Helvetica")

  textStyle('bold')

  text("Mouse over the canvas to lose the game!", 10, 10)

  // text("LOSE", 150, 150)

}