# Blending Sine Curve Motions

• Nov 25, 2003, 15:39
Alterscape
Blending Sine Curve Motions
[appologies for the double-post, but this is different enough in subject matter from the other that I don't think combining them into one thread would've been a good idea..]

I'm looking for a low-overhead algorithm implemented in Javascript for blending between two sine-curves defining distance as a function of time for DHTML animation.

The "primary" motion is described by the equation (1/2)-(1/2)cos(pi*time), which creates 1/2 a cosine curve normalized on (0,1) on both axes, which is useful because I can multiply the amplitude at any given time by the total pixel motion needed to get how far along the movement the object being moved should be at any given time. What I've accomplished so far can be viewed at http://ryan.octospider.com/dev/

The final default behavior of the script will be to cycle through all 6 images endlessly. However, when the user mouses over one of the menu buttons to the left of the design, I want the images to smoothly transition to a faster scroll (the same curve as before, but over a shorter time) without stopping and accelerating again from zero velocity, that carries it to the selected image.

This's easy enough to work out with calculus -- unfortunately, I don't know how to perform the multiple derivatives needed in Javascript in a timely manner.. myself and an engineer friend have been poking at this problem for a while, thinking about weighted averages (with the weights changing linearly over time) and such, but if this has been done, I'd like to know how, to save myself a lot of trial-and-error effort.

• Nov 25, 2003, 16:24
tss68nl
How about speeding up the time? Dont feed the time directly into the function, but let it pass through a filter....once you need to have it run faster, start multiplying the added clock ticks.
• Nov 25, 2003, 16:49
Markdidj
just have the variable in the set-timeout;

curveTimer=setTimeout("function()",speed)

If you have IE and WMP look at www.unitingrhythms.co.uk, it has a drummer that changes tempo using a similar method. ( a scrollbar contols the tempo)
• Nov 25, 2003, 17:30
Alterscape
Quote:

Originally Posted by Markdidj
just have the variable in the set-timeout;

curveTimer=setTimeout("function()",speed)

If you have IE and WMP look at www.unitingrhythms.co.uk, it has a drummer that changes tempo using a similar method. ( a scrollbar contols the tempo)

The motion is calculated based on elapsed time, not # of runs of the function in order to ensure the animation takes the same time on all machines, no matter how fast they refresh. So changing the speed variable would only change the maximum framerate.

<edit>nevermind.. google helped me figure out the difference between setInterval and setTimeout</edit>
• Nov 25, 2003, 18:31
tss68nl
Mark didn't quite get what I mean. You take the variable 'time' in your function. So if you place a layer between the actual time, and the time the function uses, you can make time run faster for the function, hence speeding it up. All it takes is one variable to store the 'time' var, and normally just add up the elapsed amount of milliseconds from the system clock...however, if you want to speed it up, you just keep track of a second function using the system clock, and based on that, you multiply the amount of time that gets added up to the time variable that the original function uses.

Simple way to combine the two functions, without having to fiddle with multiple derivatives.
• Nov 25, 2003, 21:53
Alterscape
Oooh, I see. It'll take a little doing to code up the substitution that'd make that tick (need to control the multiplier with an onmouseover, and reset it at the end of every animation) but that's a damn spiffy idea. Thank you!
• Nov 28, 2003, 18:51
Markdidj
Nice little opening page Alterscape......looks cool....