How can I add an object every minute?

Processing Coding Questions
1

Hii, I’m relatively new to processing and am currently trying to recreate this abstract clock: 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:

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
  

   
  
 
}
1 Like
2

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
image614×909 41.5 KB

:)

3

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
Screen Shot 2020-03-30 at 18.32.241134×1120 325 KB 

// 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);

}
1 Like