sketch.js

var H = 0;
var h = 0;
var M = 0;
var m = 0;
var S = 0;
var s = 0;
var c = 0;


function setup() {
  createCanvas(110, 100);
  frameRate(100);
  textSize(22);
}

function mousePressed() {
  if (mouseX>15 && mouseX<45&&mouseY>60&&mouseY<90) {
    pause();
  }

  if (mouseX>65 && mouseX<95&&mouseY>60&&mouseY<90) {
    background(0);
    reset();
    draw_r();
    display();
    if (c > 0) {
      noLoop();
      c = !c;
    }
  }
}

function keyPressed() {
  pause();
}
function draw() {
  background(0);
  draw_r();

  if (s != 9) {
    s++;
  } else if (S != 9) {
    S++;
    s = 0;
  } else if (m != 9) {
    m++;
    s = 0;
    S = 0;
  } else if (M != 5) {
    M++;
    s = 0;
    S = 0;
    m = 0;
  } else if (h != 60) {
    h++;
    s = 0;
    S = 0;
    m = 0;
    M = 0;
  } else if (H != 60) {
    H++;
    s = 0;
    S = 0;
    m = 0;
    M = 0;
    h = 0;
  }

  display();
}

function reset() {
  s=0;
  S=0;
  m=0;
  M=0;
  h=0;
  H=0;
  if (c) {
    noLoop();
    c = !c;
  }
}

function pause() {
  if (c > 0) {
    noLoop();
    c = !c;
  } else {
    loop();
    c = !c;
  }
}
function draw_r() {
fill(255);
rect(15, 60, 30, 30);
rect(65, 60, 30, 30);
}


function display() {
text(H+h+";"+M+m+";"+S+s,10,33);
}