Brand new to processing and coding, and sure there is a better way to accomplish what I am trying

raxmand

I am new to coding with processing. I am trying to make a sort of clock. I want to add an image for every second in a minute and then have it clear and start over as the new minute begins. This is the code I have, which if i continue would be the correct outcome, but I am sure there must be a better way to do this. Let me know the best way to go about this. Thank you.

PImage img;

void setup() {
  size(1000, 200);
 img = loadImage("seed.png");
}

void draw() {
  background(204);
  int s = second();  // Values from 0 - 59
  int m = minute();  // Values from 0 - 59
  int h = hour();    // Values from 0 - 23
  //Seconds
  if (s >= 1) {
    image(img, 5, 3);
  }

  if (s >= 2) {
    image(img, 30, 3);
  }

  if (s >= 3) {
    image(img, 55, 3);
  }
  if (s >= 4) {
    image(img, 80, 3);
  }
  if (s >= 5) {
    image(img, 105, 3);
  }
  if (s >= 6) {
    image(img, 130, 3);
  }
  if (s >= 7) {
    image(img, 155, 3);
  }
  if (s >= 8) {
    image(img, 180, 3);
  }
  if (s >= 9) {
    image(img, 205, 3);
  }
  if (s >= 10) {
    image(img, 230, 3);
  }
  if (s >= 11) {
    image(img, 255, 3);
  }
  if (s >= 12) {
    image(img, 280, 3);
  }
  if (s >= 13) {
    image(img, 305, 3);
  }
  if (s >= 14) {
    image(img, 330, 3);
  }
  if (s >= 15) {
    image(img, 355, 3);
  }
  if (s >= 16) {
    image(img, 380, 3);
  }
  if (s >= 17) {
    image(img, 405, 3);
  }
  if (s >= 18) {
    image(img, 430, 3);
  }
  if (s >= 19) {
    image(img, 455, 3);
  }
  if (s >= 20) {
    image(img, 480, 3);
  }
  if (s >= 21) {
    image(img, 505, 3);
  }
  if (s >= 22) {
    image(img, 530, 3);
  }
  if (s >= 23) {
    image(img, 555, 3);
  }
  if (s >= 24) {
    image(img, 580, 3);
  }
  if (s >= 25) {
    image(img, 605, 3);
  }
  if (s >= 26) {
    image(img, 630, 3);
  }
  if (s >= 27) {
    image(img, 655, 3);
  }
  if (s >= 28) {
    image(img, 680, 3);
  }
  if (s >= 29) {
    image(img, 705, 3);
  }
  if (s >= 30) {
    image(img, 730, 3);
  }
  
}

kfrajer

Notice that for every second, you increase your image X position by 25 pixels. Then you can do this below.

Kf

final int stepX=25;

PImage img;
int startPosX;

void setup() {
  size(1000, 200);
  img = loadImage("seed.png");
  startPosX=5;
}

void draw() {
  background(204);

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

    image(img, startPosX+stepx*(s-1), 3);

}

Lord_of_the_Galaxy

While that is a better version of your code, it still isn't enough. You wish to clear only when the minute is over. So firstly, you need to remove the call to background(). Also, you need to put in background somewhere, which would be called each time a minute is over.

A simple method to do that would be to add a variable, int pm = 0; In draw(), you need to check if m > pm. If so, you call background() and set pm = m.

Lord_of_the_Galaxy

final int stepX=25;

PImage img;
int startPosX;
int pm = 0;

void setup() {
  size(1000, 200);
  img = loadImage("seed.png");
  startPosX=5;
}

void draw() {
  //background(204); - not needed anymore

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

  image(img, startPosX+stepx*(s-1), 3);

  if(m > pm){
    pm = m;
    background(204);//here it comes
  }
}

jeremydouglass

@raxmand -- an addition approach:

If you want the second images to "pile up" on the screen, like in the original example, but ALSO there is some other reason that background() needs to clear the screen each frame (such as a changing text display), then:

Replace your list of 60 if statements in the original code example with a for loop that checks if 60 times:

void draw() {
   background(204);
   int s = second();  // Values from 0 - 59
   //Seconds
   for(int i; i<60; i++){
     if (s > i){
       image(img, 5+25*i, 3);
     }
   }
   text(s,20,20);
}

...or, a slightly simpler way that produces the same effect:

Run the for loop a variable number of "s" times based on the current value of seconds, generating the series of image() statements with no if required.

void draw() {
   background(204);
   int s = second();  // Values from 0 - 59
   //Seconds
   for(int i; i<s; i++){
     image(img, 5+25*i, 3);
   }
   text(s,20,20);
}

raxmand

@jeremydouglass -- This helped me out a lot. I'm just working on adding on to it a little. I can't figure out how to split the minute in half so that the first 30 seconds(and 30 images) are on one line, while the next set of 30 are shown below it. What would be the best way to do this. Thank you.

kfrajer

I believe I addressed your last question here: https://forum.processing.org/two/discussion/22051/new-to-programming-and-processing#latest

Kf

koogs

Continued on the link above.