CODEWITHSUNDEEP
javascripthtmlmathtrigonometry
Francesco
Francesco

Reputation: 25239

Math&JS: sinusoidal animation

given incremental values form 0 to infinite I'd like to get back a value that increase, then decrease, then increase, then decrease...like a sine

I'm basically trying to get an animation of a ball that goes up and down, based on input values that are only linearly increasing (this value is given by scrolling the page for example to from 0px to TBD +1)

what the math function should I use?

thanks

Upvotes: 0

Views: 1305

Answers (1)

Ethan Brown
Ethan Brown

Reputation: 27282

Well, JavaScript has a sine function:

var y = Math.sin( Math.PI );   // returns 0

Math.sin() takes its argument in radians.

If you want to "slow down" the oscillation, what you have to do is stretch out the input parameter: just divide what you're passing into the sine function by some constant. For example, if x is your input parameter, and you want the animation to go half as fast, do this:

var y = Math.sin( x / 2 );

Also keep in mind that sine goes negative; its range is [-1,1]. So if you want to avoid the negative values, you'll have to add 1 to the output of the function:

var speed = 0.5;  // 2=2x speed, 0.5=half speed, etc.
var y = (Math.sin( x * speed ) + 1)/2;
// y will range from [0,1]

See this jsfiddle for a demonstration: http://jsfiddle.net/r8yRN/

Upvotes: 1

Related Questions