Jump to content

Recommended Posts

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 by musicman
Link to post
Share on other sites

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';
Link to post
Share on other sites

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 by musicman
Link to post
Share on other sites

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);
Link to post
Share on other sites

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!

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites
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.

Link to post
Share on other sites

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!

 

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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!

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...