Building a clock - I got stuck

Processing Coding Questions
1

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?

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;
  }
}
1 Like
2

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:

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!

2 Likes
3

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

4

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.

2 Likes
5

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

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

6

https://processing.org/reference/modulo.html
just run

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

combined it is very easy make a GRID

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
snap-009.png695×681 74.2 KB

or
snap-010
snap-010.png791×545 75.6 KB

2 Likes
7

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

2 Likes
8

as easy as that, thanks a lot for your help :black_heart: