HTML and CSS Reference
In-Depth Information
// Draw the earth
ssContext.fillStyle = "green";
ssContext.beginPath();
ssContext.arc(0, 0, 10, 0, Math.PI * 2, true);
ssContext.fill();
ssContext.restore()
8.
save your changes and press F5 to start the application. now you should see the
earth make its way around the sun as shown in Figure
10-11
.
Figure 10-11.
Adding the earth to the drawing
9.
now you'll show the moon revolving around the earth, which will demonstrate
the real power of using transformations. The specific position of the moon is
based on two moving objects. While it's certainly possible to compute this using
some complex formulas (scientists have been doing this for centuries) with
transformations, you don't have to. The drawing context was rotated the appropriate
angle based on current time (number of seconds). It was then translated by the
radius of the orbit so the earth is now at the origin of the context. It doesn't really
matter where the earth is, we can simply draw the moon relative to the current
origin.
10. You will now draw the moon just like you drew the earth. Instead of the origin
being at the sun and rotating the earth around the sun, the origin is on the earth
and you'll rotate the moon around the earth. The moon will rotate around the
sun approximately once each month, or in other words, it will complete about
12 revolutions for each earth orbit. so you'll need to rotate 12 times faster. The
anglePerSecond
is now computed as
12 * ((Math.PI * 2) / 60)
. Add the
code shown in bold in Listing 10-9.
