Building A Great DHTML Chaser - DHTML Lab | 6
DHTML in GreatEqualizer.com, 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,
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
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.
-
amplitude of the sine wave, or how far our object travels.
-
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. -
The x-axis offset of the sine wave, or the clock time when our animation starts.
-
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
URL: https://www.webreference.com/dhtml/column37/6.html
Find a programming school near you