musicman Posted May 25, 2016 Share Posted May 25, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted May 25, 2016 Share Posted May 25, 2016 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 comment Share on other sites More sharing options...
musicman Posted May 26, 2016 Author Share Posted May 26, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted May 26, 2016 Share Posted May 26, 2016 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 comment Share on other sites More sharing options...
musicman Posted May 26, 2016 Author Share Posted May 26, 2016 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 comment Share on other sites More sharing options...
Ingolme Posted May 26, 2016 Share Posted May 26, 2016 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. 1 Link to comment Share on other sites More sharing options...
musicman Posted May 26, 2016 Author Share Posted May 26, 2016 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 comment Share on other sites More sharing options...
musicman Posted June 2, 2016 Author Share Posted June 2, 2016 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 comment Share on other sites More sharing options...
justsomeguy Posted June 2, 2016 Share Posted June 2, 2016 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. 1 Link to comment Share on other sites More sharing options...
Ingolme Posted June 2, 2016 Share Posted June 2, 2016 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. 1 Link to comment Share on other sites More sharing options...
musicman Posted June 3, 2016 Author Share Posted June 3, 2016 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 comment Share on other sites More sharing options...
musicman Posted June 3, 2016 Author Share Posted June 3, 2016 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 comment Share on other sites More sharing options...
Ingolme Posted June 3, 2016 Share Posted June 3, 2016 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 comment Share on other sites More sharing options...
musicman Posted June 3, 2016 Author Share Posted June 3, 2016 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now