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

edited April 2017 in Questions about Code

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

Answers

  • 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);
    
    }
    
  • 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.

  • edited April 2017
    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
      }
    }
    
  • edited April 2017 Answer ✓

    @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);
    }
    
  • @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.

  • Continued on the link above.

This discussion has been closed.