Frame and for loop

edited April 2014 in Hello Processing

Hi all,

Quick question.

I am a complete beginner in Processing. From what I understood, the frame is updated once draw() runs from top to bottom. Once it gets to the bottom, the frame is updated. i.e 1st frame is 1 loop through draw(), from the code at the top, to the bottom. 2nd frame is the second run through draw(). FrameRate is number of frames per second. So with the default 60, it means 60 frames per second. So 60 runs through draw() in a second?

When we have a for loop, is it after the for loops have finished looping, and the function existing, does the frame become updated? i.e is the first frame after 1 run of the for loop, or after the for loop has finished running?

I hope this makes sense.

Answers

  • Answer ✓

    So 60 runs through draw() in a second?

    It attempts to! We can set a diff. target FPS w/ frameRate().

    Is the first frame after 1 run of the for loop, or after the for loop has finished running?

    I don't know which for loop you're talking about!
    Everything is drawn into a PGraphics referenced by variable g.
    At the end of draw(), that content is finally rendered to the screen!

  • Okay thanks, let me try to get this right! I am so slow...

    • By default, frameRate() is set to 60 frames per second. This means that every second, the code in draw() is run 60 times. 60 runs through draw(). So every second, content (the result of the code in draw() being executed) is drawn to PGraphics 60 times, so content is rendered to the screen 60 times in a second. So every second, you are seeing the results of the 60th frame (60th time draw() is run) on the screen?

    • A frame is 1 run of draw(), the code from the top to the bottom. As draw() runs, it draws to PGraphics. When it reaches the bottom of the code, all that was drawn to PGraphics, is then shown on the screen. In the case of draw() containing a for loop, what is drawn to the PGraphics? The result of one run of the for loop, or the result of the last run of the for loop? Does this make sense? So for every frame, would you see the result of a single run of the for loop, or the result of the final run of the for loop?

  • For example:

    void draw() {
      background(255);
    
      // Shift array values
      for (int i = 0; i < xpos.length-1; i ++ ) {
        // Shift all elements down one spot. 
        // xpos[0] = xpos[1], xpos[1] = xpos = [2], and so on. Stop at the second to last element.
        xpos[i] = xpos[i+1];
        ypos[i] = ypos[i+1];
      }
    }
    

    Is 1 frame, 1 run through the for loop, i.e xpos[0]=xpos[1] and ypos[0] = ypos[1] ?

    Or 1 frame is when the for loop completes it's run? i.e, all the elements shifted?

  • edited April 2014 Answer ✓

    EVERYTHING that is in the draw() loop gets executed in order on EVERY FRAME. Only once it reaches the end is the frame finished. It could be a triple-nested for loop. If you put it in draw() it will be executed EVERY FRAME. It will not skip anything that is in the draw() loop. If you put heavy calculations, delays or infinite loops in there, it will slow down or maybe even never finish (and thus never even display the frame, basically crashing your program).

    For a practical example run this code. You will see the same complete for loop is run on each frame.

    void draw() {
      print("\nframe: " + frameCount + " | ");
      for (int i = 0; i < 10; i ++ ) {
        print(i);
      }
    }
    

    Frames trump frameRate in Processing. This means it will correctly finish each single frame. If draw() takes longer (than 1/60 of a second) to compute, the frameRate will drop. If draw() due to many calculations and whatnot takes a full second to compute, then your frameRate will become 1 frame per second (instead of 60 frames per second).

  • Thank you very much Amnon & GoToLoop!

  • Answer ✓

    "So for every frame, would you see the result of a single run of the for loop, or the result of the final run of the for loop?"
    Neither. You see the cumulative result of all the runs of the loop.

    int pos;
    
    void setup()
    {
      size(800, 800);
    }
    
    void draw()
    {
      background(100);
      for (int i = 0; i < 10 + ((pos / 10) % 7); i++)
      {
        text(str(i), pos + i * 5, i *20);
     }
      pos++;
    }
    
  • edited April 2014 Answer ✓

    A simpler example which I hope can make things clearer.
    The example below runs 3 background(), which clears the whole canvas w/ the specified color,. each 1 w/ a diff. color:
    http://processing.org/reference/background_.html

    void draw() {
      background(#FF0000);  // red
      background(#008000);  // green
      background(#0000FF);  // blue
    }
    

    As you'll notice, we end up seeing only the last issued color. That is, blue #0000FF.
    No flashing color shifts at all! (~~)
    B/c at the end of draw(), that's the latest color of the canvas' PGraphics state! *-:)

  • Yes, fully understood. Thank you guys!! :)>-

Sign In or Register to comment.