6.3. Remembering shapes to be drawn

One of the main challenges to overcome once you've got an animation loop up and running is remembering exactly what you want to draw, and exactly where you want to draw it. We touched on this briefly in the last section by placing a variable outside of the loop, which held a value that described the position of the object to be drawn. Coupled with the fillRect call, within the loop that used the position variable, you have enough information to know what you're drawing, and where to draw it. But what if you want to animate multiple shapes? What if you don't even know how many shapes you're going to be animating when you create the loop? A slightly more robust approach is needed.

6.3.1. The wrong way

You might be tempted to store the position values for each shape as a separate variable outside of the animation loop. Why not? It worked for one shape, so why wouldn't it work for multiple shapes? And you'd be right — it would work, it would just be ugly, it would duplicate code, and it would be complicated to modify shapes in the future.