Load a single image every frame


I’ve looked into the threaded image loader. But afaik it is only handy when you know what images you want to load.

I have connected my app to a mysql database with the (local) urls of thousands of images. These images have a set of variables in the database. As live input I receive the conditions of the variables, I let mysql do its thing and I receive the url of the image I need to show that frame.

I’ve tried simple tests with an ofImage which loads a different url every update(). Takes 90% of my cpu.

Not looking for direct code, but more of advice how you would handle this?

Maybe an array of 25 ofImage’s. Grabbing a new ofImage to load an image in and than set it to visible. So that 24 of them can “cool off”.

Maybe image threading is the way?

There is no way to preload any image, since it’s completely unpredictable which image is going to be next.

Thanks in advance,

You might take a look at ofxThreadedImageLoader. If you could load 25 or so images at once you can buffer them up and then display the loaded ones first.


Sorry but you havent really read the post, have you? :slight_smile:

I can not predict which images are coming, so buffering I not possible.

I guess I assumed that you were trying to display them at a realtime video speed, simply because this is something that comes up a fair amount here. If there’s no way to buffer them ahead of time then you’re going to be dealing with a display lag of several frames at minimum while you load new images, so you’ll read them into an array or other container structure as they’re received and display them when they’ve been loaded. Conceptually it’s the same thing as a buffer basically.

Using the threading image loader will still allow you to do display on your main thread while other threads are loading images and allocating memory for the pixels. Making an array of ofImage instances isn’t going to help because all the memory allocation will still be happening on the same thread and all those TCP calls to load the images are probably blocking calls.

I also might be not understanding what you’re trying to do, so perhaps someone else can be more helpful.

use vectors, and make a logical algorithm. it’s a horrible idea to have a simple load images from a server inside update…

If you can find a way to make your program understand when an image is done loading from the server that can solve loads of your problems maybe by using a combination of ofImage::isAllocated and a bool startAllocation- if you can’t do it with just ofImage, use ofxFastIOImage
or an object that is designed to download stuff from internet, it’s in the forum. I’ve seen it look for it…

find the url - start loading the image - when loading is done push it back,

display them in an animation by using something like

frame = (frame+1) % pictures.size();

This will create a smooth animation with only loaded images

then put an if statement inside your code so that if (picture.size()>LIMITUP)picture.erase(picture.begin());

Hi K!

Sorry my bad, the app completely runs offline, the database with pictures is local. No internet access.

I’ve set the framerate to 30 fps. This works, but I am now running into a problem that the app leaks memory. Looking into away of erasing the previous image nicely from memory before loading the new one.

running the app in slower framerate can “solve” the problem,
how do you create the leak?
can you be more specific on your code? do you have a [font=Verdana]new[/font] operator inside a loop?

if you are just loading upon an allocated ofImage, ofImage should automatically release the previous pixels

for example calling an ofImage.load inside a loop shouldn’t create a leak…

but if it does just use vectors


vector <ofImage> pictures; //in .h  

void testApp::setup(){  
    ofImage im;  
void testApp::keyPressed(int key){  
        ofImage im;  

Hi K,

Other project came in the way, but here goes part 2.

Basically the flow of the program: I have a database with pictures with float-properties. Per frame, I have input floats, I check in database if I have an image with similar floats, if so, return image url, load image, draw image. If not, draw camera image, save image, insert image with floats into database.

These are the important parts of the code:

ofImage videoRot;  
ofVideoGrabber vidGrabber;  
setup() {  
    videoRot.allocate( 1280, 720, OF_IMAGE_COLOR );  
update() {  
    string imgname = dbc.retrieve( floats );  
    if( imgname != "NOIMAGE" ) {  
        if( imgname != previousImage ) {  
            videoRot.loadImage( "images/" + imgname + ".jpg" );  
            exporting = false;  
            previousImage = imgname;  
    } else {  
        exporting = true;  
draw() {  
    if( exporting ) {  
        videoRot.setFromPixels( vidGrabber.getPixelsRef() );  

The videograbber only gets updated when needed. The export function is not being called every frame or even once every second.