# Processing Large Image Sequences, Saving Frames

**URL:** https://discourse.processing.org/t/processing-large-image-sequences-saving-frames/19938
**Category:** Coding Questions
**Created:** [April 19, 2020, 6:49pm UTC](https://discourse.processing.org/t/processing-large-image-sequences-saving-frames/19938 "2020-04-19T18:49:45Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![derivativejojomemes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/derivativejojomemes/32/8899_2.png) [@derivativejojomemes](https://discourse.processing.org/u/derivativejojomemes)
#### Post date: [April 19, 2020, 6:49pm UTC](https://discourse.processing.org/t/processing-large-image-sequences-saving-frames/19938/1 "2020-04-19T18:49:45Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![jeffthompson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeffthompson/32/743_2.png) [@jeffthompson](https://discourse.processing.org/u/jeffthompson)
#### Post date: [April 20, 2020, 7:08pm UTC](https://discourse.processing.org/t/processing-large-image-sequences-saving-frames/19938/2 "2020-04-20T19:08:18Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![derivativejojomemes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/derivativejojomemes/32/8899_2.png) [@derivativejojomemes](https://discourse.processing.org/u/derivativejojomemes)
#### Post date: [April 25, 2020, 2:26pm UTC](https://discourse.processing.org/t/processing-large-image-sequences-saving-frames/19938/3 "2020-04-25T14:26:52Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![jeffthompson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeffthompson/32/743_2.png) [@jeffthompson](https://discourse.processing.org/u/jeffthompson)
#### Post date: [April 25, 2020, 2:55pm UTC](https://discourse.processing.org/t/processing-large-image-sequences-saving-frames/19938/4 "2020-04-25T14:55:44Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![derivativejojomemes](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/derivativejojomemes/32/8899_2.png) [@derivativejojomemes](https://discourse.processing.org/u/derivativejojomemes)
#### Post date: [April 25, 2020, 4:44pm UTC](https://discourse.processing.org/t/processing-large-image-sequences-saving-frames/19938/5 "2020-04-25T16:44:38Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![jeffthompson](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeffthompson/32/743_2.png) [@jeffthompson](https://discourse.processing.org/u/jeffthompson)
#### Post date: [April 25, 2020, 8:27pm UTC](https://discourse.processing.org/t/processing-large-image-sequences-saving-frames/19938/6 "2020-04-25T20:27:49Z")

</div>

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?