# Adding a stopwatch to a clock

**URL:** <https://discourse.processing.org/t/adding-a-stopwatch-to-a-clock/5973>\
**Category:** Coding Questions\
**Created:** [November 26, 2018, 8:53pm UTC](https://discourse.processing.org/t/adding-a-stopwatch-to-a-clock/5973 "2018-11-26T20:53:00Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![yamiyugi](https://avatars.discourse-cdn.com/v4/letter/y/df788c/32.png) [@yamiyugi](https://discourse.processing.org/u/yamiyugi)\
**Post date:** [November 26, 2018, 8:53pm UTC](https://discourse.processing.org/t/adding-a-stopwatch-to-a-clock/5973/1 "2018-11-26T20:53:00Z")

</div>

Hi!  
I’m trying to add a stopwatch to my clock. When I start the program the clock shows the current time and I want to add a stopwatch that starts when the mouse is clicked. The clock itself works but I can’t get my stopwatch to work, I want the clockhands to go to 12 and that the digital clock resets to 0 and starts counting until i click again and the current time is displayed again. Here’s what I have so far:

```auto
int i = 0;
int h = hour();
int m = minute();
int s = second();
boolean stopwatch = false;

void setup()
{
  size(500, 500);
}

void draw()
{
  background(255);
  clock();
  lines();
  clockhands();
  digitalclock();
  
  if (stopwatch)
  {
    s++;
    int s = second();
    int m = minute();
    int h = hour();
  }
  else
  {
    int s = second();
    int m = minute();
    int h = hour();
  }
}  

void clock()
{
  translate(width/2, height/2);
  stroke(0);
  fill(255);
  strokeWeight(2);
  ellipse(0, 0, 300, 300);
  strokeWeight(8);
  stroke(0);
  point(0, 0);
}
 
void lines()
{
  pushMatrix();
  for (int i = 0; i < 60; i++)
  {
    if (i % 5 == 0)
    {
      stroke(0);
      strokeWeight(2);
      line(0, -140, 0, -145);
    }
    else
    {
      stroke(0);
      strokeWeight(1);
      line(0, -140, 0, -145);
    }
    rotate(radians(6));
    }
  popMatrix();
}

void clockhands()
{
  int h = hour();
  int m = minute();
  int s = second();

  pushMatrix();
  rotate(radians(h*30));
  stroke(0); // hours
  strokeWeight(3);
  line(0, 0, 0, -100);
  popMatrix();
  
  pushMatrix();
  rotate(radians(m*6));
  stroke(150); // minutes
  strokeWeight(2);
  line(0, 0, 0, -140);
  popMatrix();
  
  pushMatrix();
  rotate(radians(s*6));
  stroke(229, 79, 55); // seconds
  strokeWeight(1);
  line(0, 0, 0, -140);
  popMatrix();
}

void digitalclock()
{
  pushMatrix();
  int h = hour();
  int m = minute();
  int s = second();
  PFont digital;
  digital = loadFont("PingFangHK-Ultralight-48.vlw");
  textFont(digital, 25);
  fill(0);
  text(h + ":" + nf(m, 2) + ":" + nf(s, 2), -45, 110); 
  popMatrix();
}

void mousePressed()
{
  stopwatch = !stopwatch;
}

```

I’m not good with boolean and events since I just started learning, hopefully you can give me some tipps for my problems. Thanks!!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 27, 2018, 5:31am UTC](https://discourse.processing.org/t/adding-a-stopwatch-to-a-clock/5973/2 "2018-11-27T05:31:09Z")

</div>

hi @yamiyugi

i already started from your code to make that add START/STOP functionality  
but just closed it, without saving…

pls. allow me some critic notes to your code:

- -a- pls. move the 3 lines about the font loading and declaring  
from draw to setup

- -b- the variable scope is a big thing and need some planning in a already modular  
code like yours

- 
  - make global like

> int now\_h, now\_m, now\_s;

and make a

> time\_update() {}

function called from the beginning of draw.

and use that as variables in the other functions.  
not much use to make _**int h = hour();**_ again in every function  
as a kind of local variable ( hm. did you think a update is required?? )

for the Start Stop you require minimum

- a long type variable  
long start,stop; … start = millis(); …  
stop = millis();  
int delta\_seconds = int((stop - start)/1000)

- or the luxury version need

```auto
int start_h,start_m,start_s,stop_h,stop_m,stop_s;

```

where you save the now\_… to at the click moments.

```auto
int delta_seconds = (stop_h*60*60+stop_m*60+stop_s ) - (start_h*60*60+start_m*60+start_s )

```

the good thing would be that you can show exact start & stop time and elapsed seconds  
( until next start…)

mouse click or a key entry for operation is ok,  
much more nice would be a (toggle type ) button  
means it changes its text depending on its status, so it shows “start” or “stop”  
add even change background color.

for the mouse operation would need a  
boolean function over\_button(mouseX,mouseY)…

i recommend to try that operation button as a extra project first.

* * *

also why not just take a look at some great examples:

> **[Clock / Examples](https://processing.org/examples/clock.html)**
>
> The current time can be read with the second(), minute(), and hour() functions. In this example, sin() and cos() values are used to set the position of the hands.

> **[Button / Examples](https://processing.org/examples/button.html)**
>
> Click on one of the colored shapes in the center of the image to change the color of the background.