Performance displaying multiple jpegs

General Discussion Other

richyho

Performance displaying multiple jpegs

in General Discussion • Other • 11 months ago

Good morning

I'd appreciate some advice on the best (or a better) way of displaying multiple resized images on-screen. I'm writing a rack planning application for modular synthesizers. Take a look at the image below:

You can see that there are 18 fairly large jpegs being displayed, each of which uses another small overlayed image of a screw 4 times. The example above runs pretty well at around 20fps, but when zoomed in so that the majority of the screen is filled with the images, this can drop down to below 10fps.

This is running in a 'standard' window in Processing 1.5.1. If I switch to OpenGL then I get a constant 60fps on my works laptop which has a powerful graphics card. The problem is that on a lesser laptop with nono-dedicated graphics then I still get the high frame rate, but the quality of the drawn curves really breaks down and it all 'goes jaggy' so I really need a 'standard mode' solution.

The sketch first checks to see if a each image is on-screen before drawing it. The jpegs are all resized on load to a maximum of 400px high. This keeps the detail nice on zooming-in. The screen is then scaled and transformed to show the area of interest.

I was considering a re-write to somehow only update the screen with moving elements, but am concerned that if I write all the existing images to one big image then that'll degrade performance even more.

Are there any back-buffering tricks that might help? Or any other advice ondrawing many (potentially 100's of) images to the screen.

Thanks

Replies(4)

kevinwork..

Re: Performance displaying multiple jpegs

11 months ago

The first thing you should do is make sure you aren't doing any loading in your paint code or in a loop anywhere. Can you post a small example program that demonstrates the basic flow of your program?

akiersky

Re: Performance displaying multiple jpegs

11 months ago

It sounds like you could greatly benefit from using a PGraphics object.

They are like image holders for things that are not changing much in your display. The idea is that you load the image and draw it, along with the other images (the various panels, and even the screws) to the PGraphics object. Then you can draw the PGraphics to the screen just like an image()

check the link above for an example, but this should save from having to draw (and position) everything every draw loop. They save a lot of overhead in general.

otherwise, kevin is right, code always gets more helpful responses.

good luck!

richyho

Re: Performance displaying multiple jpegs

11 months ago

Thank you both for your suggestions. I'm not loading anything in a loop anywhere, but I am resizing and translating everything to whatever scale my scene is set to (to enable pan and zoom on an area bigger than the window size) - something along the lines of:

void draw()
{
smooth();
background(colorBackground);
scale(myScale);
translate(translateX, translateY);
//draw everything here
translate(-translateX, -translateY);
scale(1 / myScale)
}

I'll look into PGraphics as another way of doing things. Thanks for the advice.

Rich

richyho

Re: Performance displaying multiple jpegs

11 months ago

After a bit of experimentation it would seem that it's not actually the drawing of the images that's slowing the app down - rather it's the double scale and translate on every draw loop. I will think of a way around this.

Top Reply