Building A Great DHTML Chaser - DHTML Lab | 6 | WebReference

Building A Great DHTML Chaser - DHTML Lab | 6


DHTML in, I:
Building A Great DHTML Chaser

Alright, I warned you... if you're looking at this page, be prepared to think a little . If you're still here, you might be wondering why sine waves are good for describing deceleration. Well, take a look at the graph of the most basic example, y = sin( x ):

If you look at just the first quarter of this graph - from 0 to /2, you've got an arc that starts out steep and gets shallower and shallower -- a pretty good representation of something slowing down. It makes more sense if you label the y-axis "position", and the x-axis "time"; which is precisely what I've done in the next picture:

Only problem is that the curve pictured above is special; it lives at 0,0 on the coordinate plane; and it is only 1 unit high. Our sine waves will be at all kinds of weird locations on the coordinate plane, and we'll need them to go much higher than 1.

Fortunately, the ancient Greeks already figured this out, so we should be able to remember (from high school trig!) that we can modify the curve with the following terms: A, B, C, and D -- so that the finished equation looks like:

y = Asin[B(x-C)] + D.

Each letter we added to the equation has a specific purpose, as described below.

  1. amplitude of the sine wave, or how far our object travels.

  2. period multiplier of the sine wave, which has an inverse relationship with the period (length of animation for us) of the sine wave. The default (1) yields an animation length of /2, so to get the length we want - we'll call it "x," we supply A, where A equals /2x. If we want a length of 10, we set A equal to /20.

  3. The x-axis offset of the sine wave, or the clock time when our animation starts.

  4. The starting position of our object.


Here's a graph of the complete formula:

Now that we have all these concepts figured out, we should be able to put them together to build our chaser. Go on to the next page to see it happen!

Produced by Aaron Boodman and

All Rights Reserved. Legal Notices.
Revised: Sept 19, 2000