I was originally trying build an effect that pans and rotates around an infinite world of repeating background images. To do this I was using an image the size of the viewing area, of course to panning around will often require drawing parts of several images. If we are panning along the x and y axis we will need to display, at most, four images.
When the camera reaches one of the edges, it jumps back an entire image size along the same axis. As the images are the same, moving any direction by an entire image size results in exactly the view.
Adding rotating made everything a little more complicated. Now up to six images can be visible at times.
Playing around I worked out that with nine tiles I could make sure all the tiles that could be visible were drawn. This also made it possible handle the infinite panning in a very similar way as before.
Another complication was I wanted the world to rotate around the view, not around the worlds origin. I posted about my struggles with that earlier.
I got this working and had achieved what I was trying to do, but I wanted to take it a little further. Rather than just infinite repeating images, I wanted to make an infinite world. All I had to do was keep track of where the view was in this infinite world and instead of drawing the same image everywhere, I would choose each image to draw by where it was in world.
It was after I got this working that I realised adding the ability to scale the view of this tiled world would be pretty straight forward. If the view was zoomed out 100% then the view would be the size of exactly four images or tiles. Adding another tile of padding around those four tiles would be enough to ensure all the tiles possible in the view would be drawn.
Zooming out 200% would mean the view was the size of nine tiles, adding another tile of padding would again ensure all the tiles in the view would be displayed. Clearly there is a pattern here.
Putting all this together and adding some controls and debugging information I came up with this. Note there is no limit on how far you can zoom or pan, but zooming out far enough will eventually bring any browser to it knees.
Move left [h]/right [l] and up [k]/down [j]. Rotate clockwise [d] and anti-clockwise [f]. Zoom in [z] and out [x]
I have some ideas about what I would like to do with this from here.
If you have some ideas let me know or grab the source and start hacking. I also published the not-so-pretty source for the diagrams in this post.