Processing Large Image Sequences, Saving Frames

Processing Coding Questions
1

Hi!

I am looking for a way to load a large number of images (PNG files extracted from a video, all inside a folder in the .pde file’s directory) in a sequence:

  1. Load the first image in the sequence (for example: “abc00001.png”, from a folder called “Sequence”)
  2. Apply transformations to a PShape object based on the data in the pixel[] of that image
  3. Save an image of the transformed PShape (maybe using saveFrame()? )
  4. Load the next image in the sequence (“abc000002.png”)
    … etc

I have looked at similar questions, but most of them deal with a relatively small number of images (so they do not scale to what I hope to use this application for). I know there are some libraries that can play image sequences, but they also seem to preload everything before playback.

Appreciate any help or advice!

1 Like
2

Your basic outline should work! If your images are all sequentially-named, you should be able to load/save them with a single for loop:

for (int i=0; i<numImages; i++) {
  String inputFilename = "Sequence/" + "abc" + nf(i, 5) + ".png";
  PImage frame = loadImage(inputFilename);
  
  // do your processing here
  
  String outputFilename = "Output/" + "abc" + nf(i, 5) + ".png";
  save(outputFilename);  
  // or frame.save(outputFilename), depending on what you're doing
}

The nf() command adds the leading zeroes you have in your question. If you do this in setup() instead of draw(), it will run faster since it doesn’t need to display each frame onscreen.

You might also want to optimize your code – commands like red() are slower than bit-shifting, which can really add up!

3 Likes
3

Thank you very much for your help, I am looking forward to trying this out in my code.

I have considered implementing bit-shifting; need to go through the documentation to make sure I understand everything.

Take care!

1 Like
4

Happy to help!

Bit shifting looks weird but is pretty easy once you get the hang of it. These two do the same thing…

color myColor = color(255, 150, 0);
float r = red(myColor);
float r = myColor >> 16 & 0xFF;    // both give you a value of 255

Same for green and blue…

float b = myColor >> 8 & 0xFF;
float g = myColor & 0xFF;

Once you memorize the expressions, it becomes natural to start using them instead of red() etc.

2 Likes
5

Both the image loading/ saving loop and the bit-shifting worked great. Thank you again!

I did not notice much difference in performance when using bit-shifting (though I only tested this on a small sequence of images). After a bit of research, I suspect the following line (from a Processing tutorial) slows the program down quite a bit:

color myColor = frame.pixels[loc];

Is there a way to optimize this further?

6

Yeah, I’ve found that sometimes the usual red() command is just as fast – hard to predict in my experience. Looking up the color value should be pretty quick. There’s a point where image processing is just going to be slow, especially compared with other languages like C or shaders. Can you post you sketch so far?