Processing 1.0 - Processing Discourse - Scrolling a very large map

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

Index › Programming Questions & Help › Programs › Scrolling a very large map

‹ Previous Topic | Next Topic ›

Pages: 1

Scrolling a very large map (Read 842 times)

softhook

Scrolling a very large map
Aug 27^th, 2007, 10:07pm

Hi there. I would love some advice for the best way to scroll a very large map.

The map starts of as a vector graphic so I tried loading it in as a SVG but seemed very slow to draw every frame.

I also tried to moving a huge 10meg rasterised graphic around but thats also very slow.

Is tiling bitmaps the way to go? Would that be much quicker to move? What would be the best way to load just the tiles in the viewport?

I have seen this example http://workshop.evolutionzone.com/2006/10/11/code-imagestitcherpde/

but not sure how to implement it for scrolling. Any help or code examples?

Thanks very much
Christian

seltar

Re: Scrolling a very large map
Reply #1 - Aug 27^th, 2007, 11:06pm

I'd recommend making a grid, with something like the window size as the size for each cell.
Then display images from the 1 cell you are viewing, and the 8 surrounding cells.
Clear loaded cells, and reload new cells when you move close to the end of the loaded cells.. You shouldn't need to update more than 3 cells..

But perhaps making a multidimensional boolean array which has a true/false value for if the image is displayed or not.. Then writing a function to display all images where value is true, and another function to set all cells surrounding the cell you are viewing to true, whilst setting all others back to false.

Could possibly increase performance by decreasing the
cell-size, but that's for you to figure out Wink

Good luck..

seltar

I'm bored, therefore I program
http://seltar.org > seltar's special place
http://snippet.seltar.org > seltar's snippet palace
http://libraries.seltar.org > seltar's libraries

ewjordan

Re: Scrolling a very large map
Reply #2 - Aug 27^th, 2007, 11:59pm

One thing confuses me about this - from my testing (and in theory), moving a very large graphic around should not slow down that much in any of the renderers, as I'm pretty sure they are all optimized to clip properly (I'm absolutely positive that P3D is, and Java2d really should be). Once the graphic is loaded, as long as it's not altered, the time it takes to draw should be proportional to the number of pixels actually drawn to the screen rather than to the size of the image - internally, the pixels outside of the screen should never be encountered thanks to the pre-draw clipping of the rectangle. Are you perhaps doing something processor intensive like reloading the image every frame? Otherwise I can't quite see why the scale of the image should matter that much.

That said, what are the dimensions of the image you're using? I just tested a 7000x600 PNG and it seems to go perfectly smoothly (~60 fps) without any sort of tricks being employed (furthermore, it seems to go no slower than a 640x480 image filling the screen, which suggests that it's really the drawn pixels that are the bottleneck). If you're talking about something far bigger than that, maybe the real issue is that the amount of memory the image itself is taking up is causing the garbage collector to freak out every frame, or something like that - in that case the solution will be tough, because the graphic is just eating up too much memory, so you'd have to break it up and load it in pieces as you need them.

BTW, if performance is a real issue, speed for OpenGL in Processing scales (unless you _really_ tax the graphics card) per polygon rather than per pixel, so you could always try using that, though on my graphics card the max texture resolution is 2048x2048, so you'll definitely need to do some tiling.

V Senior Member Offline Posts: 430 portugal	Re: Scrolling a very large map Reply #3 - Aug 28^th, 2007, 11:21am having really big textures isnt really a good idea. tile your map and like said before draw the visible ones only
	Victor Martins \| www.pixelnerve.com/v

softhook YaBB Newbies Offline Posts: 46	Re: Scrolling a very large map Reply #4 - Aug 28^th, 2007, 3:28pm Thanks very much everyone for all the advice. Does anyone have any example code to help me get going with scrolling tiles? Thanks Christian

seltar

Re: Scrolling a very large map
Reply #5 - Aug 28^th, 2007, 5:42pm

Quick example with different colored cells:

Code:

 
// Scrolling a grid larger than the screensize
// by seltar
 
// GRID CELL PIXEL SIZE
int cellW = 100;
int cellH = 100;
 
// GRID SIZE IN CELLS
int gridW = 16;
int gridH = 14;
// SCREENSIZE IN CELLS
int screenW = 4;
int screenH = 3;
 
// ARRAY OF COLORS
int[][] gridC;
int gridX = 0, gridY = 0;
int startX = 4, startY = 4;
 
void setup()
{
  // SET SCREENSIZE
  size(cellW*screenW,cellH*screenH);
 
  // SET START PIXEL POSITION
  gridX = -(int)(startX*cellW);
  gridY = -(int)(startY*cellH);
 
  // SET DIFFERENT COLORS FOR ALL GRIDCELLS
  // You'll need to change this to make images work..
  gridC = new int[gridW][gridH];
  for(int i = 0; i < gridW; i++){
    for(int j = 0; j < gridH; j++){
	gridC[i][j] = color(random(255),random(255),random(255));
    }
  }
 
  // INITIALIZE OTHER STUFF
  noStroke();
}
 
void draw()
{
  background(0);
  if(mousePressed){
    println(gridX+","+gridY);
    gridX -= pmouseX-mouseX;
    gridY -= pmouseY-mouseY;
    if(gridX>0){
	gridX = 0;
    }
    else if(gridX<-(cellW*(gridW-screenW))){
	gridX = -(cellW*(gridW-screenW));
    }
    if(gridY>0){
	gridY = 0;
    }
    else if(gridY<-(cellH*(gridH-screenH))){
	gridY = -(cellH*(gridH-screenH));
    }
  }
 
  // DRAW GRID
  int cellX = min(gridW,max(0,-(int)(gridX/100)));
  int cellY = min(gridH,max(0,-(int)(gridY/100)));
 
  pushMatrix();
  translate((gridX),(gridY));
  for(int i = max(0,cellX-1); i < min(cellX+screenW+1,gridW); i++){
    for(int j = max(0,cellY-1); j < min(cellY+screenH+1,gridH); j++){
	// FILL WITH THE COLOR FROM THE COLOR GRID
	fill(gridC[i][j]);
	rect(i*cellW,j*cellH,cellW,cellH);
    }
  }
  popMatrix();
}

best,
seltar

I'm bored, therefore I program
http://seltar.org > seltar's special place
http://snippet.seltar.org > seltar's snippet palace
http://libraries.seltar.org > seltar's libraries

softhook YaBB Newbies Offline Posts: 46	Re: Scrolling a very large map Reply #6 - Aug 28^th, 2007, 6:02pm wow seltar, thanks very much thats super useful to get me started

ewjordan

Re: Scrolling a very large map
Reply #7 - Aug 30^th, 2007, 7:19am

crmx - I'm curious, what is it that becomes a problem when holding one very large texture as opposed to a large array of smaller textures? I totally understand why you wouldn't want to send a huge texture out to the graphics card, but apart from that I'm a little confused. As I've never actually used any huge graphics in projects, I don't know exactly what goes wrong. To me it seems that you're using the same amount of memory either way, and drawing almost exactly as fast. Or does Java2d prefer to send the whole texture to the card rather than clipping in software?

BTW, I 100% agree that as a general rule it is a very bad idea to be drawing much stuff that's not on the screen, the only reason I am confused is that when I actually try it out, I'm not seeing the performance penalty that I expected to see. I know from ample experience that when you're creating your own procedural graphics you absolutely need to apply a gridding strategy almost exactly as described (I'm a total dork for doing graphics by algorithm, not by image - probably because I have zero artistic talent!). But I'm curious as to what type of thing I'd have to do to actually see such slow performance when drawing a bitmap, as I don't doubt that softhook ran into it as mentioned in the first post.

Pages: 1

‹ Previous Topic | Next Topic ›