SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member Alterscape's Avatar
    Join Date
    Nov 2003
    Location
    NY, USA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    Thanks for your input!

  2. #2
    SitePoint Zealot tss68nl's Avatar
    Join Date
    Nov 2002
    Location
    Netherlands
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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)
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  4. #4
    SitePoint Member Alterscape's Avatar
    Join Date
    Nov 2003
    Location
    NY, USA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  5. #5
    SitePoint Zealot tss68nl's Avatar
    Join Date
    Nov 2002
    Location
    Netherlands
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Member Alterscape's Avatar
    Join Date
    Nov 2003
    Location
    NY, USA
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  7. #7
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Nice little opening page Alterscape......looks cool....
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •