How to deal with image arrays?

Hello everyone,
I need your suggestions.
I know no one likes people who use images for animation or rotating knobs but i am still one of those people who use images :slight_smile:

I really need your help to create the best and fastest and safest template to manage these images. Generally i create a new class for such knobs. I use imageCache to load images. Then i put these images into an image array. I initialize it only once in my constructor. In my drawslider method i call the corresponding index of that image array according to my slider value. For knobs this works well for me. None of those images will be refreshed as long as the slider values are not changed.
But when i start using the same array filled with a LED images (generally 20-30 images) from turned off situation to full bright situation, and try to call the images by using a timercallback,(it does not stop blinking until the plugin is closed) it becomes a very fragile system. Timer callback is not very accurate. I have experienced this many times. When i try to click on a button successively it effects the callback or paint function of the led class.

I can’t expect anyone to spend his time and review my whole code.
So, Could you please tell me a little bit about your methods or technics to manage animations (for example blinking animations) with images in juce? Which class is the better to store such images?
In some cases, I also experienced that the repaint or paint functions of my components are not being called until i move my mouse cursor over them or their components. This generally happens when i try to draw an image(s) successively.
Is there anyone else that experienced at least one of these problems? Or similar to these problems?

The standard way of using images for animation is to use a filmstrip image, which you then simple access a portion of the image depending on which frame of the filmstrip. You calculate the offset into the image by multiplying the frame number by the width (or height, depending on the frame orientation). One image per animation, multiple frames of animation in the image. I suggest you shift to this approach for the most robust implementation.

1 Like

Oh, and I am not sure how you are handling the images is the cause of your performance issues.

1 Like

Thank you for your answer. It is worth to try. I need modify my images and turn them into a filmstrip image.

You can use imagemagick to do that FWIW

convert -append knob*.png knobStrip.png


Thank you :slight_smile: This will help a lot.

A word about ImageCache: You don’t need to keep an image yourself. The ImageCache keeps the images. The image data is shared, so copying the Image object is very lightweight. And looking up is just comparing the hash value (for filenames a string, for BinaryData objects just an integer address).

But in turn, if you ever modify an image shared with the cache, you will change that image in the cache for the rest of the runtime. If you want to modify it, call duplicateIfShared() beforehand.

1 Like

Thank you very much @daniel , I also read this while checking the classes. I am calling duplicateIfShared() before modifying the image.

I didn’t see any mention of modifying the images in your original post. It sounded like you just wanted to use a series of images as a source of animation frames. May I ask what modifications you are making?

Sorry for the late reply. Yeah actually that is what I am trying to do but for some images, I need to rescale them. Can this be considered as modifying?

Yes, resize is modifying. Depending on your requirements, you could do leave the images the original size, and handle scaling in the drawing.

1 Like