Rendering a long animation to file, not real time

Processing Beginners
1

I’m just getting started with Processing. I have a background in coding though extremely rusty. I’ve run the examples and coded some fun stuff but I really want to render a long animation, say 30 minutes. If I did it frame by frame I feel like it wouldn’t work with the thousands and thousands of files. I could edit them together which I suppose isn’t the worst thing.

The real question I have, is there a way to render the animation to a file that would be processed during the draw() function? I’d like to just render versus letting the Processing program run for half an hour. I’ve looked through the docs but nothing is immediately obvious to my dumb brain. Any help or suggestions is appreciate, thanks!

2
2 Likes
3

Thanks for the reply! I’ve gotten saveFrame() method to work, I suppose I’ll just make a long example and see if it crashes ffmpeg.

As far as rendering without going through the draw() loop I guess I can do all of the image processing work and either comment out the draw or put some logic in there to skip the on screen drawing. With long animations I was hoping there was some best practice to follow that was in the library or used by the community

1 Like
4

Hello @MichaelMean ,

Ignore below if you want to tackle this yourself.
Your post inspired me and I cooked this up this morning!

Related:
Movie Maker: Time gap between movie and its audio file - #2 by glv

This is a version of above that does rendering outside of draw():

/**
 * MovieMaker Frame Generator for Testing
 * 
 * Author:  glv
 * Date:    2025-07-23
 * Version: 1 0 0
 *
 * Generates frames for testing without draw():
 */

int marker_10s;

void setup()
  {
  //size(1920, 1080);
  size(600, 600); 
    
  int t0 = millis();
  
  int videoTimeSecs = 60;      // Must be in seconds 
  int desiredFrameRate = 60;   // For MovieMaker!
  int framesToSave = videoTimeSecs*desiredFrameRate;
  
  // frameRate(1000);             // Make this 1000 and let the rendering fly!  
  
  marker_10s = 10*desiredFrameRate;
  println("marker_10s:", marker_10s);
  println();
  println("It's show time!");
  println();
  println("videoTimeSecs:", videoTimeSecs);
  println("desiredFrameRate", desiredFrameRate);
  println("framesToSave", framesToSave );
  delay(1000);
  println();
  
  // Common to all text:
  textAlign(CENTER, CENTER);
  textSize(96);
  fill(0);
 
// If using drawFrame()
  for (int i = 0; i < framesToSave ; i++) 
    {
    drawFrame(i);
    //println(i);  // Fills console!

    if (i%100 == 0)  // Every 100!
      println(i);    
    
    saveFrame("frames/frame-" + nf(i, 5) + ".tga"); //tga is fast! png is slow...
    //saveFrame("frames/frame-" + nf(i, 5) + ".png"); //tga is fast! png is slow...
    }
  
   background(255, 255, 0); 
   text("Done!", width/2, height/2);  // Adjusted so starts at 0
  
  int t1 = millis();
  int dt = t1-t0;
  println("Total time:", nfs(dt/1000.0, 0, 2) + "s");
  println("Average frame:", nfs( (float) dt/framesToSave, 0, 2) + "ms");  
    
  //exit(); // Automatically close Processing window
  noLoop();
  }
  
void drawFrame(int frame)  
  {
  if(frame > marker_10s)
    {
    background(255, 0, 0);
    }  
  else
    background(255, 255, 0);
    
  text(frame, width/2, height/2);  // Adjusted so starts at 0
  }

It may need finessing.

:)

1 Like
5

Yes! That’s about what I was thinking, thank you! I’m still getting my coding chops back, this would have sadly taken me days :grinning_face_with_smiling_eyes:

1 Like
6

Hello @MichaelMean,

I may have done this before or it just dawned on me to use saveFrame() to save the state of the display window at that exact moment it is called.

The references say:

  • Saves a numbered sequence of images, one image each time the function is run. < This would be at the at that exact moment it is called!
  • To save an image that is identical to the display window, run the function at the end of **draw()**

It seems to work with more complex animations as well!

References:

Source here if you want to dig deeper:

processing4/core/src/processing/core/PApplet.java at main · processing/processing4 · GitHub

They will come back!
And here to help along the way!

Have fun!

:)