# Help! Clocks! - Minutes & For Loops

**URL:** https://discourse.processing.org/t/help-clocks-minutes-for-loops/4527
**Category:** Coding Questions
**Created:** [October 16, 2018, 6:39am UTC](https://discourse.processing.org/t/help-clocks-minutes-for-loops/4527 "2018-10-16T06:39:27Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![madiMcD](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@madiMcD](https://discourse.processing.org/u/madiMcD)
#### Post date: [October 16, 2018, 6:39am UTC](https://discourse.processing.org/t/help-clocks-minutes-for-loops/4527/1 "2018-10-16T06:39:27Z")

</div>

Hello!

I’m in the process currently of trying to make a program that runs a type of clock. I am using images in my program, but for the purposes of my question, I have substituted ellipses. I understand how to use a nested loop to draw 60 circles, which represent the minutes, but I can’t figure out how to make them appear as the minutes go up.

For example, if it was 11:36 pm on your computer, I would want the program 36 ellipses. It would then draw a new one to add to the minute count each time the minute changed: 11:36 pm \> 36 ellipses, 11:37pm \> 37 ellipses.

I want the ellipses to stay in the same layout as my 60 ellipses nested for loop, but only having as many visible as the minutes.

Here is what I have:

```auto

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

void draw(){
  for(int xPosition = 0; xPosition < 1000; xPosition = xPosition + 100){
    for(int yPosition = 0; yPosition < 600; yPosition = yPosition + 100){
         ellipseMode(CORNER);
         ellipse(xPosition, yPosition, 100, 100);
        } 
      }
}

 

```

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [October 16, 2018, 8:08am UTC](https://discourse.processing.org/t/help-clocks-minutes-for-loops/4527/2 "2018-10-16T08:08:56Z")

</div>

The solution is in two parts, first use background(…) to clear the display at the start of every frame otherwise you will not see any changes once all 60 pictures are shown. Use a counter to control the number of pictures visible like this

````auto
void setup() {
  size(1000, 600);
}

void draw() {
  background(230);
  int m = minute();
  for (int xPosition = 0; xPosition < 1000; xPosition = xPosition + 100) {
    for (int yPosition = 0; yPosition < 600; yPosition = yPosition + 100) {
      ellipseMode(CORNER);
      ellipse(xPosition, yPosition, 100, 100);
      m--;
      if (m == 0) break; // breakout of inner loop
    }
    if (m == 0) break; // breakout of outer loop
  }
}```
````

---

<div class="post-metadata">

### Author: ![madiMcD](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@madiMcD](https://discourse.processing.org/u/madiMcD)
#### Post date: [October 16, 2018, 8:58am UTC](https://discourse.processing.org/t/help-clocks-minutes-for-loops/4527/3 "2018-10-16T08:58:33Z")

</div>

Thank you so much! You’re a lifesaver!

Small thing: what’s the definition of “break”? is that the counter?

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [October 16, 2018, 1:26pm UTC](https://discourse.processing.org/t/help-clocks-minutes-for-loops/4527/4 "2018-10-16T13:26:39Z")

</div>

`break` is a Java keyword just like `if`, `for`, `int` …

In this context it means _leave the enclosing loop now_ effectively ending the for-loop.

So in this loop.

```auto
for(int i = 0; i < 10; i++){
  println(i);
  if (i == 5) break;
}

```

you will see the numbers 0 to 5 inclusive but `i` will never reach 6

In your code we need two such statements the first to exit the inner loop and the second to exit the outer loop.