Storing Animation Frames in 2d Array

Currently creating an animation that responds on sound. The animation has 10 loops and 375 frames per loop. these frames are .jpg so to load them in i use a 2d array

for( int i=0; i<Phase; i++)
    for( int j=0; j<Frames; j++)
      visuals[i][j] = loadImage("forest ("+frameFill+").jpg");

After loading them i draw the images dependant on a phase check and a frame check

image(visuals[phaseCheck][frameCheck], 0, 0, 1080, 1080);

however when my first loop starts it tends to crash with an OutOfMemoryError. I’ve already upped the RAM useage to 6144mb but this isn’t well optimized.

What is the best way to decrease memory usage?

1 Like

Storing the images as byte arrays may help a little, but jpeg should already be fairly compressed. Otherwise, simply maintain fewer images in memory at any one time. 3750 (1080px) images is a lot to store in memory at once.

You could build a smaller (say, size=1000) pool of images around something like a LRUMap:

A Map implementation with a fixed maximum size which removes the least recently used entry if an entry is added when full.

In your case, the map would hold mappings of imageFileNameString → PImage. Look up the desired filename string in the map; if it is there, retrieve the associated image; otherwise load the image from disk and insert a mapping for it.

The most appropriate approach would ultimately depend on how phaseCheck and frameCheck vary per frame. If, for example, these values cycle incrementally, then an LRUMap wouldn’t be appropriate because an image would always need to be loaded again whenever it is next needed.

1 Like

Hello @GloriousZero,

What are the dimensions (width x height) of each image?
How many are you loading at one time?

I am assuming they are all the same so that will be easier to answer.


The idea of the code is that we have loops and if a certain volume threshold is met it advances to the next loop. It is also possible to go back 1 loop (but not more) if the volume is very low. I would think with that in mind there should be 3 loops pre loaded (the one looping and the one next and before it). Which counts to about 1125 images.

I am fairly new to Java and Processing so I’m trying to figure LRUMap out, but do you think it would work with this setup?

Every image is a square of 1280px, and currently i am testing it with 750 images.


just out of curiosity…
What are those images ?
Wouldn’t it be easier to generate that ie. effect/animation depending on the volume on demand instead of pre-generating masses of jpegs to use !?

— mnse

The images are exports from After Effects.

I’m currently figuring out how to get 3 loops ready at all times and removing the ones we pass while adding the next ones. But no luck in actually getting that to work.

1 Like