# How can I add an object every minute?

**URL:** <https://discourse.processing.org/t/how-can-i-add-an-object-every-minute/19191>\
**Category:** Coding Questions\
**Created:** [March 30, 2020, 1:50pm UTC](https://discourse.processing.org/t/how-can-i-add-an-object-every-minute/19191 "2020-03-30T13:50:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sandyveer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sandyveer/32/8578_2.png) [@sandyveer](https://discourse.processing.org/u/sandyveer)\
**Post date:** [March 30, 2020, 1:50pm UTC](https://discourse.processing.org/t/how-can-i-add-an-object-every-minute/19191/1 "2020-03-30T13:50:01Z")

</div>

Hii, I’m relatively new to processing and am currently trying to recreate this abstract clock: [https://www.youtube.com/watch?v=93Jf32V1\_FU](https://www.youtube.com/watch?v=93Jf32V1_FU)

I am lost as to how to add a new square randomly on the canvas every minute. And how to add another circle (a size larger than the one that’s there) for every hour. Thanks so much!

So far I have this code:

```auto
void setup() {
  size (600,600);
  smooth ();
  
  background(255,211,153);
}

void draw() {
  
  //background(255,211,153);

  int s = second(); // 0 to 59
  String seconds = nf(s,2); // nf makes it two characters 2 = 02
  
  int m = minute(); // 0 to 59
  String minutes = nf(m,2);
  
  int h = hour(); // 0 to 24
  String hours = nf(h,2);
  
  
  
   // code below controls the second as rectangles 
   strokeWeight(20);
   stroke(255,168,200);
   fill(255,211,153);
   float ws = map(s, 0, 59, 0, height); // map(value, start, end, target start, target end) 
   rect(100, 0, 60, ws); // x, y, width, height
   
   strokeWeight(20);
   stroke(255,168,200);
   fill(255,211,153);
   float ws2 = map(s, 0, 59, 0, height); // map(value, start, end, target start, target end) 
   rect(210, 0, 60, ws2); // x, y, width, height
   
   strokeWeight(20);
   stroke(255,168,200);
   fill(255,211,153);
   float ws3 = map(s, 0, 59, 0, height); // map(value, start, end, target start, target end) 
   rect(330, 0, 60, ws3); // x, y, width, height
   
   strokeWeight(20);
   stroke(255,168,200);
   fill(255,211,153);
   float ws4 = map(s, 0, 59, 0, height); // map(value, start, end, target start, target end) 
   rect(440, 0, 60, ws4); // x, y, width, height
   
   // code below controls the minutes as squares 
   stroke(222,255,196);
   noFill();
   float wm = map(m, 0, 59, 0, height); // map(value, start, end, target start, target end) 
   rect(40, 100, 10, 10); // x, y, width, height

 

  // code below controls the hours as circles
   strokeWeight(5);
   stroke(87,98,255);
   smooth ();
   noFill();
   float hm = map(h, 0, 24, 0, width); // map(value, start, end, target start, target end) 
   circle(400,400,20); // x, y, size
  

   
  
 
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 30, 2020, 2:37pm UTC](https://discourse.processing.org/t/how-can-i-add-an-object-every-minute/19191/2 "2020-03-30T14:37:16Z")

</div>

Hello,

There are many ways to do this…

I wrote this quickly as an exercise; “state” changes were used but you can adapt as required.

Code is simple enough for you to glean some insight:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0188aa335bfe259a8f011d4d2a2dae82de96845c.png)

`:)`

---

<div class="post-metadata">

**Author:** ![sandyveer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sandyveer/32/8578_2.png) [@sandyveer](https://discourse.processing.org/u/sandyveer)\
**Post date:** [March 30, 2020, 4:33pm UTC](https://discourse.processing.org/t/how-can-i-add-an-object-every-minute/19191/3 "2020-03-30T16:33:57Z")

</div>

Thanks so much! I actually figured it out until this point (check code below). But now I’m wondering how I can change the circles into this where it adds a new ring of the circle for every hour instead of randomly placing circles around the canvas.

 ![Screen Shot 2020-03-30 at 18.32.24](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5aef4c62939ac51742e8455ed44ca3b1a8a5a01c.jpeg)

```auto
// these variables keep track of how many hours, minutes or seconds have passsed
int last_m = 0;
int last_h = 0;

// one is for minutes
PGraphics pg_m;
// and this one is for the hours
PGraphics pg_h;

void setup() {
  size (600,600);
  smooth ();
  background(255,211,153);
  
   // code for minutes
   pg_m = createGraphics(width, height);
    int m = minute(); // Values from 0 - 59
  
   pg_m.beginDraw();
    pg_m.fill(222,255,196);
    pg_m.stroke(222,255,196);
    for (int i=0; i < m; i++) {
      pg_m.rect(random(width), random(height), 20, 20);
    }
    pg_m.endDraw();
      last_m = m;
  
   // code for hours
   pg_h = createGraphics(width, height);
    int h = hour(); // Values from 0 - 23
    
    pg_h.beginDraw();
      //pg_h.noFill();
      pg_h.strokeWeight(5);
      pg_h.stroke(87,98,255);   
      pg_h.fill(87,98,255); 
      for (int i=0; i < h; i++) {
        pg_h.circle( random(width), random(height), 50); 
    }
    pg_h.endDraw();    
    
    // save it also for the hours
    last_h = h;
      
}

void draw() {
  
  int s = second(); // 0 to 59
  String seconds = nf(s,2); // nf makes it two characters 2 = 02
  
  int m = minute(); // 0 to 59
  String minutes = nf(m,2);
  
  int h = hour(); // 0 to 24
  String hours = nf(h,2);
  
  background(255,211,153);
  
  textSize(20);
  fill(0);
  
  // text , horizontal , vetical
  text(hours, 10, 590); 
  text(minutes, 40, 590);
  text(seconds, 70, 590);
  
  image(pg_m.get(0,0,width,height),0,0);

  
   // code below controls the second as rectangles 
   strokeWeight(10);
   stroke(255,168,200);
   fill(255,211,153);
   float ws = map(s, 0, 59, 0, height); // map(value, start, end, target start, target end) 
   rect(100, 0, 60, ws); // x, y, width, height
   
   strokeWeight(10);
   stroke(255,168,200);
   fill(255,211,153);
   float ws2 = map(s, 0, 59, 0, height); // map(value, start, end, target start, target end) 
   rect(210, 0, 60, ws2); // x, y, width, height
   
   strokeWeight(10);
   stroke(255,168,200);
   fill(255,211,153);
   float ws3 = map(s, 0, 59, 0, height); // map(value, start, end, target start, target end) 
   rect(330, 0, 60, ws3); // x, y, width, height
   
   strokeWeight(10);
   stroke(255,168,200);
   fill(255,211,153);
   float ws4 = map(s, 0, 59, 0, height); // map(value, start, end, target start, target end) 
   rect(440, 0, 60, ws4); // x, y, width, height

  // code below controls the minutes as squares 
    if (m != last_m) {
      
      pg_m.beginDraw();
      pg_m.rect(random(width), random(height), 20, 20);
      pg_m.endDraw();

      last_m = m;

      if (m == 0) {
        pg_m.clear();
      }
      
    }
 

    // code below controls the hours as circles
    if (h != last_h) {
      
      pg_h.beginDraw();      
      pg_h.circle( random(width), random(height), 50); 
      pg_h.endDraw();

      last_h = h;
      
      if (h == 0) {
        pg_h.clear();
      }
      
    }

// here we draw images with the buffers we filled above
    image(pg_h.get(0,0,width,height),0,0);
    // this says: draw an image with everything you get from buffer pg_m
    image(pg_m.get(0,0,width,height),0,0);
    // this does the same for the seconds.
    //image(pg_s.get(0,0,width,height),0,0);

}

```