# Building a clock - I got stuck

**URL:** <https://discourse.processing.org/t/building-a-clock-i-got-stuck/5837>\
**Category:** Coding Questions\
**Created:** [November 22, 2018, 9:02pm UTC](https://discourse.processing.org/t/building-a-clock-i-got-stuck/5837 "2018-11-22T21:02:32Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![somaflaco](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/somaflaco/32/2489_2.png) [@somaflaco](https://discourse.processing.org/u/somaflaco)\
**Post date:** [November 22, 2018, 9:02pm UTC](https://discourse.processing.org/t/building-a-clock-i-got-stuck/5837/1 "2018-11-22T21:02:33Z")

</div>

Hey Guys,  
I’m completely new to processing and i’m trying to build a clock.

I want the top row to indicate the hours (12rects),

the second row to indicate the tens digits for the minutes (6rects),  
the third row to indicate the single digits for the minutes (10rects),

the second row to indicate the tens digits for the seconds (6rects) and  
the third row to indicate the single digits for the seconds (10rects).

But i can’t get it to work…  
I tried "if"s but failed.

Does anybody have any suggestions?

```auto
int xs = 0;
int s = second(); // Values from 0 - 59
int m = minute(); // Values from 0 - 59
int h = hour(); // Values from 0 - 23

void setup() {
  size (1200, 700);
}

void draw() {
  rectMode(CENTER);
  
  fill(255);
  rect(49, 49, 100, 100);
  rect(149, 49, 100, 100);
  rect(249, 49, 100, 100);
  rect(349, 49, 100, 100);
  rect(449, 49, 100, 100);
  rect(549, 49, 100, 100);
  rect(649, 49, 100, 100);
  rect(749, 49, 100, 100);
  rect(849, 49, 100, 100);
  rect(949, 49, 100, 100);
  rect(1049, 49, 100, 100);
  rect(1149, 49, 100, 100);

  rect(49, 249, 100, 100);
  rect(149, 249, 100, 100);
  rect(249, 249, 100, 100);
  rect(349, 249, 100, 100);
  rect(449, 249, 100, 100);
  rect(549, 249, 100, 100);
  rect(649, 249, 100, 100);

  rect(49, 349, 100, 100);
  rect(149, 349, 100, 100);
  rect(249, 349, 100, 100);
  rect(349, 349, 100, 100);
  rect(449, 349, 100, 100);
  rect(549, 349, 100, 100);
  rect(649, 349, 100, 100);
  rect(749, 349, 100, 100);
  rect(849, 349, 100, 100);
  rect(949, 349, 100, 100);

  rect(49, 549, 100, 100);
  rect(149, 549, 100, 100);
  rect(249, 549, 100, 100);
  rect(349, 549, 100, 100);
  rect(449, 549, 100, 100);
  rect(549, 549, 100, 100);
  rect(649, 549, 100, 100);

  rect(49, 649, 100, 100);
  rect(149, 649, 100, 100);
  rect(249, 649, 100, 100);
  rect(349, 649, 100, 100);
  rect(449, 649, 100, 100);
  rect(549, 649, 100, 100);
  rect(649, 649, 100, 100);
  rect(749, 649, 100, 100);
  rect(849, 649, 100, 100);
  rect(949, 649, 100, 100);

  fill(0);
  rect(xs, 649, 100, 100);
  if (s == 0) {
    xs = 49;
  } else if (s == 10) {
    xs = 49;
  }
}

```

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [November 22, 2018, 9:15pm UTC](https://discourse.processing.org/t/building-a-clock-i-got-stuck/5837/2 "2018-11-22T21:15:11Z")

</div>

You are doing the same thing over and over, with only a slightly different value each time. Thus, you should use some loops!

Also, you are assigning values to your h, m, and s variables only once, when the sketch starts. These values are not somehow magically tied to the functions! You will need to call those functions every time you redraw the clock to make sure you have the latest values.

Here is a finished, working example:

```auto
int h, m, s;
int[] max = { 12, 6, 10, 6, 10 };
int[] cur = { 0, 0, 0, 0, 0 };

void setup(){
  size(600,250);
}

void draw(){
  background(128);
  h = hour();
  m = minute();
  s = second();
  cur[0] = h % 12;
  cur[1] = m / 10;
  cur[2] = m % 10;
  cur[3] = s / 10;
  cur[4] = s % 10;
  
  for( int row = 0; row < 5; row++){
    for( int col = 0; col < max[row]; col++){
      fill(255);
      if( col < cur[row] ){
        fill(0);
      }
      rect(50*col+5, 50*row+5, 40, 40);
    }
  }
  
}

```

Make sure you take some time (sic) to understand how this works!

---

<div class="post-metadata">

**Author:** ![somaflaco](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/somaflaco/32/2489_2.png) [@somaflaco](https://discourse.processing.org/u/somaflaco)\
**Post date:** [November 22, 2018, 9:23pm UTC](https://discourse.processing.org/t/building-a-clock-i-got-stuck/5837/3 "2018-11-22T21:23:27Z")

</div>

thanks a lot. i’ll try to understand everything you just did. i hope it is okay if i get back at you if questions occur \<3

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [November 22, 2018, 9:27pm UTC](https://discourse.processing.org/t/building-a-clock-i-got-stuck/5837/4 "2018-11-22T21:27:21Z")

</div>

Please do! Questions on things are more than welcome!

I can anticipate your first one: “What does that % sign mean?!?”

That’s the modulo function. It gives you the remainder when you do integer division. So, for example, `17 % 4 = 1`, because `17 / 4 = 4`, but you have a remainder of 1. `18 % 4 = 2`, `19 % 4 = 3`, `20 % 4 = 0`, `58 % 10 = 8` You’ll get it.

---

<div class="post-metadata">

**Author:** ![somaflaco](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/somaflaco/32/2489_2.png) [@somaflaco](https://discourse.processing.org/u/somaflaco)\
**Post date:** [November 23, 2018, 11:33pm UTC](https://discourse.processing.org/t/building-a-clock-i-got-stuck/5837/5 "2018-11-23T23:33:24Z")

</div>

yep, that was my first one 😊  
okay my second one is:

> [@TfGuy44](#):
>
> cur[0] = h % 12;

in this line you tell the program for the integer “cur[0]” to have the value “h 12". so if it is 3 o'clock the value would be "3 12”. what is the remainder here and how do you get from having that value to the clock showing the hour at the right time?

thanks again for taking your time with me \<3

---

<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 24, 2018, 3:25am UTC](https://discourse.processing.org/t/building-a-clock-i-got-stuck/5837/6 "2018-11-24T03:25:11Z")

</div>

[https://processing.org/reference/modulo.html](https://processing.org/reference/modulo.html)  
just run

```auto
for (int i=0;i<25;i++) println("i:"+i+" mod "+i%12);

```

a other great thing is the  
[https://processing.org/reference/floor\_.html](https://processing.org/reference/floor_.html)

combined it is very easy make a GRID

```auto
int w = 20,ilong = 12;

void setup(){
  size(300,300);
  background(200,200,0);
  fill(0,0,200);
  for (int i=0;i<25;i++) println("i:"+i+" mod "+i%12);
  for (int i=0;i<25;i++) println("i:"+i+" floor(i/12) "+floor(i/12));

  for (int i=0;i<100;i++) text(i,w+(i%ilong)*w,w+floor(i/ilong)*w);
}

```

 ![snap-009](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7115252c123292fb503098a9e27a390811a909b5.png)  
or  
 ![snap-010](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/dec5ad75157376c7e701411cb67930e6a7737a33.png)

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [November 24, 2018, 4:13am UTC](https://discourse.processing.org/t/building-a-clock-i-got-stuck/5837/7 "2018-11-24T04:13:32Z")

</div>

How many times does twelve go into three? None. Zero.  
What’s the remained when you take 0 \* 12 away from 3? Three.

3 / 12 = 0  
3 % 12 = 3

3 is 0 \* 12 + 3

---

<div class="post-metadata">

**Author:** ![somaflaco](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/somaflaco/32/2489_2.png) [@somaflaco](https://discourse.processing.org/u/somaflaco)\
**Post date:** [November 24, 2018, 12:07pm UTC](https://discourse.processing.org/t/building-a-clock-i-got-stuck/5837/8 "2018-11-24T12:07:17Z")

</div>

as easy as that, thanks a lot for your help 🖤