Sine Wave math

[musicman]

Hi,

I saw following function:

var banner = document.querySelector( '.stage div' ), 
a = 50,
b = 50,
c = 0;

function sine(){

    banner.style.top = a * Math.sin( start ) + b + 'px';
    banner.style.left = c + "px";

    c += 0.1;

}

window.setInterval( sine, 50 );

It is to make a sine motion in js; it works. Does anyone know the original equation of this in math that similar to:

y = a sin c + b, x = c ?

 

Thanks!

Edited May 25, 2016 by musicman

[Ingolme]

You have a variable "start" that is not being created or modified anywhere.

 

The equation is:

A*sin(ωt) + k

 

A: Amplitude, in pixels

ω: Angular velocity, or "what angle is covered in one second?" in radians. PI would be half a circle, 2 * PI would be a full circle.

t: Time, in seconds

k: Offset the center of the sine wave vertically, in pixels

 

On every frame you need to update t, which Javascript provides in milliseconds using the date object, so you'll need to divide by 1000. When the program begins, store the current timestamp in a variable, each time the function is called get a new timestamp and subtract the first one from it.

var start = (new Date()).getTime();

function sine() {
  ...
  var t = (new Date()).getTime() - start;
  t = t / 1000;
  ...
}

Another problem you might face is the ambiguity of the + operator. You should separate mathematical operations from string operations. Do the math first, store it in a variable, then work with the string on another line.

var position = [equation here];
banner.style.top = position + 'px';

[musicman]

Awesome! thanks @Ingolme. This is great for animation understanding base.

 

How would you write the Angular Velocity and the "t", like this?

Math.radians = function(degrees) { return degrees * Math.PI / 180; };
A * Math.sin( Math.radians( av ) * t ) + k + "px";

--------------------------------------------

 

You have a variable "start" that is not being created or modified anywhere.

 

My bad, it should be the "c" variable I found this on the web.

Edited May 26, 2016 by musicman

[Ingolme]

I would recommend not bothering with degrees, really, radians are much easier to manage once you understand them

 

Calling a function to convert radians on every frame is a waste of processing, do calculations before you begin the animation loop.

 

Once again, you're mixing the mathematical + with the concatenation +:

A * Math.sin( Math.radians( av ) * t ) + k + "px";

Either use parentheses to resolve ambiguities or split it into two lines of code.

 

Here's how I would do it:

// Just for making measurements easier
var CIRCLES = 2 * Math.PI;

// Parameters
var A = 100; // Amplitude
var v = 0.5 * CIRCLES; // Half a circle per second
var start = (new Date()).getTime();
var k = 100; // Offset

function animation() {
  var t = ((new Date()).getTime() - start) / 1000;
  var posY = A * Math.sin(v*t) + k;
  element.style.top = posY + "px";
}

setInterval(animation, 50);

[musicman]

Calling a function to convert radians on every frame is a waste of processing, do calculations before you begin the animation loop.

Once again, you're mixing the mathematical + with the concatenation +

 

I'll remember that, thanks!

 

how about the t, should we use Date() or we can use fixed number and increment?

 

Thank you for your time for this @Ingolme!

[Ingolme]

Using Date is more accurate, since incrementing time by a fixed number relies on the time interval always being the same (which it is not, it varies by a few milliseconds)

 

To be even more precise you could research requestAnimationFrame(). It offers timestamps with microsecond precision and is also more efficient, since it lets the browser decide when is the best moment to run the function.

[musicman]

Using Date is more accurate, since incrementing time by a fixed number relies on the time interval always being the same (which it is not, it varies by a few milliseconds)

 

I tested it, it made the motion awkward. I will play around with this and find more math! this is great.

[musicman]

Hi,

 

I added some workaround for sine and ellipse motion to CODY. I used another math equation of sinusoidal function:

 

y = A sin [b (x - C)] + D

 

In my case:

 

y = y1 + A sin [b (x - C)] + D

 

Please find the html here; once you're there, please click Snippets (the book icon) and choose "Animation Motion".

 

Both sine and ellipse motion looks great. But I still have question about relationship between Math and js/html canvas.

 

How the 'Period' value (x) affect the speed of the animation in the canvas?

 

also, do you have suggestion to improve the animation snippet, please drop some advice here.

 

Thanks!

 

[justsomeguy]

The period is a multiplier, so the higher the multiplier the faster the animation goes. Period looks like it's actually the frequency in hertz, so the value of the period looks like the number of cycles per second.

[Ingolme]

This equation you're presenting y = A sin [b (x - C)] + D is practically the same as the previous one, the only difference is that ωt is represented as x and a phase shift "C" has been added. Your parameter "y1" is actually the same thing as "D" in that equation, so nothing has changed.

 

I don't think a phase shift would make any noticeable difference, it just changes the starting value of x. Formally, the phase shift parameter is represented like this:

A*sin(ωt + φ) + k

Where φ is the starting angle in radians. 90 (half pi radians) degrees would mean starting at the top, 180 degrees (pi radians) would mean starting at the center and moving in the opposite direction as 0.

[musicman]

The period is a multiplier, so the higher the multiplier the faster the animation goes. Period looks like it's actually the frequency in hertz, so the value of the period looks like the number of cycles per second.

I understand now! html canvas animation can interpret the frequency very nicely on screen.

Thanks, @justsomeguy!

[musicman]

Yes, I agree. It's just the same sine equation. The y1 is required on the canvas to have the center point of the ball, if y1 is not defined, the ball always start at (0,0) of the canvas.

 

You guys rocks! I'm going to need a lot of beer discussing this with a math teacher. lol

[Ingolme]

Yes, I agree. It's just the same sine equation. The y1 is required on the canvas to have the center point of the ball, if y1 is not defined, the ball always start at (0,0) of the canvas.

 

You guys rocks! I'm going to need a lot of beer discussing this with a math teacher. lol

 

The thing is that in this equation ( y = y1 + A sin [b (x - C)] + D ) y1 and D do the exact same thing, you can get rid of one of them.

[musicman]

Oh I see. It said that :

 

D is the vertical midpoint between the maximum and minimum of a sinusoidal function.

 

so balls originY = D or can we have more descriptive sentence for this..

 

Thanks for pointing this.