频率动态变化时，使振荡平滑增减

Question

I'm modeling the resonance effect with html5 canvas to animate spring when its reach the resonance. Also got jquery ui slider (max ranged) that changes frequency (w) of the oscillations dynamically during the animation. The problem is when its changed, for some reason sine wave brokes at some points and the animation is not smooth. This is only happens when changing frequency, with amplitude its much better. my main function to render each frame is this:

function doSways() {
var spring = springs[0],
        a = 0,
        A = params.standParams.A,
        w = params.standParams.w;

animIntervalId = setInterval(function() {
    ctx.clearRect(0, 0, cnvW, cnvH);
    A = params.standParams.A;       
    w = params.standParams.w;                       

    /*if (w < params.standParams.w) { // with this expression and commented <w = params.standParams.w> it works a bit smoother but still some issues can be noticed, for example sharp increases just after the new change of the frequency (w) on the slider
        w += 0.01;
    }*/

    stand.y = A*Math.sin(a*degToRad*w) + offsetY;       

    stand.draw();
    spring.draw(stand.y, A, w);

    if (a++ >= 360) {           //  avoid overflow
        a = 0;
    }
},
25);
}

here's how I change frequency(w) on the slider and assign it to params.standParams.w

$( "#standfreq_slider" ).slider({
    range: "max",
    min: 1,
    max: 25,
    step: 1,
    value: 5,
    slide: function( event, ui ) {
      params.standParams.w = parseInt(ui.value);

    }
  });
 );

That if expression in doSways function kinda work but it casues another problem, I need to know the direction of sliding to determine wether I need to += or -= 0.01.. How to make everything work ideal ?

problem illustration live jsfiddle

Answer 1

based on the basic formula for sinusoids:

V = V0 + A * sin(2 * pi * f * t + phi)

Where:

• V: current value
• V0: center value
• A: amplitude
• f: frequency (Hz)
• t: time (seconds)
• phi: phase

We want the current value (V) to be the same before and after a frequency change. In order to do that we will need a frequency (f) and phase (phi) before and after the change.

First we can set the first equation equal the the second one:

V0 + A * sin(2 * pi * f1 * t + phi1) = V0 + A * sin(2 * pi * f2 * t + phi2)

do some cancelling:

2 * pi * f1 * t + phi1 = 2 * pi * f2 * t + phi2

solve for the new phase for the final formula:

phi2 = 2 * pi * t * (f1 - f2) + phi1

More mathy version:

edited:

check out modified fiddle: https://jsfiddle.net/potterjm/qy1s8395/1/

Answer 2

Well the pattern i explain below is one i use quite often.
( It might very well have a name - please SO people let me know if so-. )

Here's the idea : whenever you need to want a property evolving in a smooth manner, you must distinguish the target value, and the current value. If, for some reason, the target value changes, it will only affect the current value in the way you decided.

To get from the current value to the target value, you have many ways :

• most simple : just get it closer from a given ratio on every tick :

current += ratio * (target-current); 

where ratio is in [0, 1], 0.1 might be ok. You see that, with ratio == 1, current == target on first tick.
Beware that this solution is frame-rate dependent, and that you might want to threshold the value to get the very same value at some point, expl :

var threshold = 0.01 ;
if (Math.abs(target-current)<threshold) current = target;

• You can also reach target at a given speed :

var sign = (target - current) > 0 ? 1 : -1;
current  += sign * speedToReachTarget * dt;

Now we are not frame-rate dependent (you must handle frame time properly), but you will have 'bouncing' if you don't apply a min/max and a threshold also :

if (Math.abs(target-current)<0.01) {
      current = target;
      return;
} 
var sign = (target - current) > 0 ? 1 : -1;
current  += sign * speedToReachTarget * dt;
current = (( sign > 0) ? Math.min : Math.max )( target, current);

• and you might use many other type of interpolation/easing.