Previously we animated a rotating rectangle. This time we animate not only one, but four rectangles.
To rotate an object around its own center we must move the origin and rotate the axes. This works fine when there is only one object, but to rotate more than one object is tricky, because each time translate() and rotate() are called, the effect adds to previous calls to translate() and rotate(). To solve this we introduce resetMatrix(), which removes previous changes to the origin and axes rotation.
Basically we do 1. translate(), 2. rotate(), 3. draw something, 4. resetMatrix() to undo the effects produced by 1 and 2. Then repeat 1, 2, 3 and 4 for other rotating objects.