let dial = true;

let metranome = false;

let metranome2 = false;

let still = true;

​

function setup() {

  createCanvas(600, 600);

  rectMode(CENTER);

  //angleMode(DEGREES);

  //frameRate(60);

}

​

function draw() {

  background(210);

  //let fc = frameCount;

  let m = millis();

​

  //metranome body

  push();

  fill(170);

  noStroke();

  quad(140, 490, 460, 490, 380, 160, 220, 160);

  pop();

  push();

  fill(140);

  noStroke();

  quad(200, 370, 400, 370, 360, 180, 240, 180);

  pop();

  push();

  fill(150);

  noStroke();

  triangle(220, 140, 380, 140, 300, 110);

  pop();

  push();

  fill(160);

  noStroke();

  rect(300, 150, 160, 20);

  pop();

  push();

  fill(120);

  noStroke();

  quad(290, 370, 310, 370,  310, 180, 290, 180);

  pop();

​

 if (metranome){

  push();

  translate(300, 370);

  rotate((sin(m * 0.004)));

  //ticker

  fill(80);

  noStroke();

  rect(0, 0, 10, 380);

  pop();

}

 if (metranome2){

  push();

  translate(300, 370);

  rotate((sin(m * 0.005)));

  //ticker

  fill(80);

  noStroke();

  rect(0, 0, 10, 380);

  pop();

}

​

  if (still){

    push();

    fill(80);

    noStroke();

    rect(300, 270, 10, 180);

    pop();

  }

  //ticker cover

    push();

  fill(210);

  noStroke();

  rect(300, 550, 600, 400);

  pop();

  push();

  fill(140);

  noStroke();

  rect(450, 440, 20, 10);

  pop();

  push();

  fill(170);

  noStroke();

  quad(140, 490, 460, 490, 426, 350, 174, 350);

  pop();

  push();

  fill(140);

  noStroke();

  rect(300, 492, 320, 5);

  quad(170, 490, 200, 490, 195, 515, 175, 515);

  quad(400, 490, 430, 490,  425, 515, 405, 515);

  pop();

   /*coordinates

  push();

   strokeWeight(1);

  fill(0)

text("(" + mouseX + ", " + mouseY + ")", mouseX, mouseY);

  pop();

  */

  push();

  fill(140);

  noStroke();

  pop();

  push();

  fill(210);

  stroke(140);

  strokeWeight(8);

  ellipse(475, 440, 30, 15);

  pop();

    if(dial) {

    fill(210);

    stroke(140);

    strokeWeight(8);

    ellipse(475, 440, 30, 30);

  }

}

​

function mousePressed() {

   if (mouseX < 495 && mouseX > 455 && mouseY > 420 && mouseY < 460){

  if(dial === true) {

    dial = false

  }else{

    dial = true;

  }

     if(still === true) {

    still = false

  }else{

    still = true;

  }

     if(metranome === false) {

    metranome = true

  }else{

    metranome = false;

  }

   }

}