Generating a smooth sine wave transition from one set of value to another with Javascript

Question

What I'm trying to do is have a smooth transition from sine wave with a given set of values to another wave with a different value without introducing a kink into the sin wave. I'm at the fringes of my Maths knowledge so it anyone has any idea how to achieve this it would be greatly appreciated. I have looked at other questions and I have a gut feeling the answer is in a signal processing question.. phase vs time, instead of speed (or frequency) vs time. Just not sure how to adapt it to suit my code.

This link (bottom of the page) shows a working example of showing a waveform continously changing on the fly without any jumps in the wave when you change the value page link

Its all to generate the wing beats of a butterfly in after effects (which uses javascript) by changing the y axis angle on a graphic of a wing.

I used this formula: amplitude * Math.sin(time*speed)+bias

• amplitude being the variation in angle I want the wing to move
• speed is the speed of the wings beating
• time is the timeline (a value in seconds) of the animation
• bias being used to shift the angle (amplitude 45, bias 0, wing moves from -45 to 45 degrees. Change the bias to 45 and the wing moves from 0 to 90 degrees)

It all works fine until I need to change any of the key values amplitude, speed and bias. The animation has a jump in it or a flicker. I found some graph representations of what's happening, but not quite sure how to fix it in the code to create a smooth transition.

This image shows one of the kinks I'm getting

This image shows another kink in the wave

This image shows the smooth transition of what I'm trying to achieve

Many thanks for your time and any feedback you may have.

Answer 1

Your objective of creating a 'smooth' transition is not a well defined mathematical description. To simply make the wave form continuous and correctly ascending or descending during the transition, one simple way would be to wait for the next time the waveform is zero and then change the amplitude and frequency instantaneously at that point in time, and calculate a new phase P.

For example, suppose your wave form is

f(t) = a*sin(w*t + p)

and at time t_0 such that w*t_0 + p = n*pi, you want the amplitude a to change to A, the radians per second to change from w to W, then you need to calculate a new P so they join up at t = t_0.

n = ceil((w*t + p)/pi)

t_0 = (n*pi - p) / w

P = n*pi - W*t_0

so for t >= t_0

f(t) = A*sin(W*t + P)