HTML and CSS Reference
In-Depth Information
The canvas drawing API is discussed in detail in Chapter 4, but you should have fun seeing the various
waves you can draw with it. The sine wave is upside down again because the y axis is reversed in the
canvas element.
Circles and ellipses
Now that you've mastered sine waves, let's move on to their lesser-known cousins, cosine waves . These
are formed in the same way as sine waves, but use the cosine function instead of sine. If you recall from
the earlier discussion about how sine and cosine basically end up being the inverse of each other, you
won't be surprised to learn that the two waves form the same shape, but in a different position. Figure 3-19
shows a cosine wave.
This shows that the cosine of 0 is 1. As it moves to 2 pi radians, or 360 degrees, it goes to 0, -1, 0, and
then back to 1. It's essentially the same curve as produced by the sine wave, just shifted over a bit.
1
1
0
0
0
90
180
270
360
-1
Figure 3-19. A cosine wave
Circular movement
You can use cosine in place of sine in just about any situation where all you need is an oscillating motion.
But cosine has a much more common and useful function when used in coordination with sine: moving an
object in a circle. Figure 3-20 shows an object at several points as it moves around a circle.
 
Search WWH ::




Custom Search