Optimizing isometric drawing function

Question

I need help optimizing my Draw(); function to draw only what is visible in the viewport. Currently I'm drawing the whole Map array in a diamond shape. How can I make my function store only what is visible?

Here is an image explaining it better: Black tiles are X axis, White tiles Y axis. Green tiles are what I would like the function to store, and the Orange rectangle is the viewport.

I'll include the relevant part of my code aswell:

for(i=0;i<Map.length;i++) {
for (j=0;j<Map[i].length;j++) {
tileX = (i - j) * (tile.width / 2);
tileX += (canvas.width /* 2*/) - (tile.width / 2);
tileY = (i + j) * (tile.height / 2);
tileY -= (canvas.height /* 2*/);

    c.drawImage(tile, tileX, tileY);
}
}

I've been trying to figure out how to solve this, but since I'm no genius I can't. Help appreciated.

Answer 1

(migrated from comments) This is kind of a duplicate of a previous answer I gave to How do I find which isometric tiles are inside the camera's current View.

The way I handle this is by iterating over horizontal/vertical rows and columns. I'll call these axes A/B instead of X/Y (which you're already using for the diagonal axes in your isometric view).

Translating X,Y to A,B is as simple as A = X+Y, B = X-Y. The reverse transformation is X = (A+B)/2, Y = (A-B)/2. If you choose a rectangle such that min<A<max, and min'<b<max', then it corresponds to a particular rectangular viewpoint.

Here is the jsfiddle: http://jsfiddle.net/kAFVB/3/

Here are a couple examples of how different choices of A and B change the dimensions of the viewable area (the shaded rectangle is the same rectangle in both pictures)

Answer 2

This may not be the optimal solution, but a simple optimization would be just to figure out the span of X and Y values and draw everything in between that range.

As in, find the max and min for X and Y in your orange area, and then draw the space if it's X and Y are within the area.

If drawing areas not in your viewport is not an issue, than this should work fine. You may want to increase the max/min boundaries by one [tile size], depending on how you determine the X/Y of you tiles.

The shaded area is the area drawn.

Edit: A slightly more complicated (and computationally heavy) method would be to useout the distance from the center of your viewport to the location you want to draw it [tileX,tileY]. If your viewport's ratio is fixed to what it is now, you could just check if it's within 3 tile widths and 3 tile heights lengths (so if abs(tileX-viewportCenter.X )/tile.width <=3 and abs(tileY-viewportCenter.Y)/tile.height <=3), then draw).

If it isn't fixed, you can figure out the distance from the center to a corner (or use the diagonal distance of the viewport and divide by 2). Then check each tile location's distance the the middle of the screen. This will draw all the required tiles, plus a few extra on the sides (making a circular shape).