Fast drawing of lots of rectangles, zoomable

Question

Hey all,
I need to build a zoomable Canvas onto which I need to draw around half a million small rectangles. Ideally,
it should be possible to zoom/pan into this canvas interactively, e.g. with low lag. The dimensions of the canvas
are quite large, e.g. it will be about 0.5 billion units in height and a few hundred million units in width.
A friend of mine recommended the use of OpenGL for this, but I am hoping that I can use some "standard"
stuff to do this (and the Java2D pipeline is said to be OGL-accelerated nowadays anyways, right ?)
Does anyone have any suggestions ? I don't mind looking at commercial components, too, if they are easily
redistrbutable...

Answer 1

ThomasDullien wrote:
But the users is used to a lot of pain :-P...well, when it comes to inflicting pain on the users you can never do enough, which makes this even more interesting :-)
Thinking about it again, I think it's not a good idea to draw the entire thing as a BufferedImage and them copy components...
Memory consumption alone will be at least 0.5bn * a few million, e.g. more RAM than we have. This is correct, it will consume a huge amount of ram. You should, however, keep in mind that swing will internally double-buffer everything in order to provide smooth scrolling. You might need to turn it off for your JPanel using JPanel#setDoubleBuffered(false).
I guess what I need is:
A rectangle describing the entire area, a rectangle describing the sub-area that is currently visible, and the size (in pixels height/width) for
the sub-area.
Then, to draw, naive, without any optimiztions:
Iterate through all rectangles
calculate if the rectangle overlaps with the visible sub-area
if no, next
if yes, calculate the rectangle's pixel size, draw it
Does that make sense so far ? Or was this what you meant when you said "mind the clip" ?Pretty much. As the previous poster pointed out, you can always ask a Graphics object for its clip bounds. It is a common mistake to assume that Graphics will do the clipping for you - well, it will, but at a much higher cost compared to you doing it manually. Still, considering the amount of rectangles, you might want to optimize your clipping routine rather than just iterating over millions of rectangles with each repaint. I'd suggest you use a technique usually used for collision detection (this is a grossly oversimplified view):
Create an array of your rectangles and sort it by their x values. A rectangle will not be visible if its x value is larger than clip.x+clip.width, or if rectangle.x+rectangle.width is smaller than clip.x. Now, you can detect the last rectangle you need to consider using a binary search for clip.x+clip.width. All rectangles 'right' of this one in the array don't even have to be checked in the first place. Assuming that your rectangles are of equal width, you'll simply need to go 'left' while the rectangle you're looking at still fulfills the condition (rectangle.x+rectangle.width < clip.x). This will ideally give you a very small subset of rectangles to examine (you'll still have to check the y values, but you can apply the same approach here as well). Theoretically, this ought to be a lot faster than naive iteration.
Cheers,
ThomasGood luck :-)