I have just added a new animation program to the logo area of this site. I have been working on variants of this system for a while. First, I wrote a JavaScript program that uses a drawing method similar to Google Maps. It uses square tile graphics, arranges them in a grid, and then moves them inside a scrolling area.

When a tile moves off the edge of the scrolling area, it is moved to the opposite side of the area. Before it is moved, the tile graphic is updated with the graphic that is appears on the opposite side that is scrolling into the scrollable area.

After I got a basic tile scrolling engine working, I made it work with several layers of tiles that can scroll at different rates. I then added the ability to make additional layers of objects that can be positioned anywhere. The animation at the top of this page uses this object layer system. I will make more interesting scenes as the engine becomes more sophisticated.