saveFrame not advancing frame count

Processing Coding Questions
1

Good morning. My processing has been acting up. First, it didn’t follow the size command and was creating sketches at 4K no matter what. I fixed this by opening an older version of Processing and running the sketch, then I closed it and opened Processing 3.5.3

Now, I’m trying to save how a sketch is created, I’m using saveFrame, but it tries to save everything over the same image…it does not advance… am I missing something?

Thanks in advance.

PFont myFont;

void setup()
{frameRate(24);
  size(1920,1080);
  myFont =
    createFont("Arial", 48);
    background(255);
    frameCount = 0000;
}

void draw(){
  for(int i=0; i<width;i=i+20){
    
    

    for(int j=0;j<height;j=j+20){
      saveFrame("output/frames####.png");  
      fill(0,0,0,random(i,150));
        textFont(myFont, random(i,255));
        text("A", i,random(j));
        
      }
      
    }
    noLoop();
}
1 Like
2

Hey there PixelMx,

Not entirely sure what you’re aiming for, but seeing you want to save your images as frame####.png I assume you want to save an image each frame. In your second for loop you could add the following:

println(frameCount);
saveFrame("output/frames####.png");

When you take a look at Processing’s console output, do you understand what’s causing the ‘single image save’ issue?

1 Like
3

It’s printing 1 for every loop, I thought it should advance automatically. How can I increase the frameCount?

Thanks for this tip

4

Hi,

That’s normal behavior since you are actually never changing frame.

Everything is happening in your for...loop. And since you added that noLoop() at the end, the draw() function is called only once hence the 1 that you get over and over.

If you want it to work, you need to restructure your code in order to get rid of that for...loop

This should work:

PFont myFont;
int i = 0;
int j = 0;

void setup() {
  frameRate(24);
  size(1920, 1080);
  myFont = createFont("Arial", 48);
  background(255);
}

void draw() {
  fill(0, 0, 0, random(i, 150));
  textFont(myFont, random(i, 255));
  text("A", i, random(j));
  
  saveFrame("output/frames####.png");  

  j += 20;
  if (j >= height) {
    j = 0;
    i += 20;
    if (i >= width) {
      noLoop();
    }
  }
}
2 Likes
5

Thanks a bunch. So, when does a frame advances to the next one? is it after each instruction? loops being counted as a single instruction?

6

When your sketch has executed all lines of code within void draw(), it starts a new frame and runs the entire void draw() again. So when you set the framerate in your setup to 24 it aims to execute the entire draw() block of code 24 times a second which results in 24 frames. In your original code however you called for a noLoop. This prevents the sketch from looping void draw() over and over again.

Yet your original code took, at least on my computer, way longer than a second to go through the entire void draw(). That isn’t so strange, since you instructed it to do the following within a single run:

// each 20 pixels, so 96 times
for(int i=0; i<width;i=i+20) {
    
    // each 20 pixels, so 54 times
    for(int j=0;j<height;j=j+20){
         ...      
     }

In a single frame you instructed it to save the frame, make calculations, and plot something on your screen (96 x 54 =) 5184 times. This might have created the illusion of going through frames, while in reality it was still busy processing everything within a single frame.

To get a better understanding of frames I recommend you to check out simple animation examples. In addition you could check out Daniel Shiffman his tutorial videos, where he explains the basics in a clear and understanding way. I believe there are some animation related videos there as well.

Best of luck!

2 Likes
7

Thanks again! really appreciate it!