How to use "time" transitions in a Canvas animation

1

Sequencing the post " How to generate a Sine curve , where I made some adjustments:

I am still working on this ECG (electrocardiogram) simulator, and now I need to "manipulate" the times inside the simulator,

For example: It takes too long between applying the medication and waiting for it to go through the whole process, to check the results. So I created this button that "makes the time to pass" with double the speed.

  • Although initially it is WORKED (and the chart looks similar), WHEN I change the speed and ONLY then apply the medicine.
  • But if I change this speed "DURING" the transition, crazy things happen in the results.
  • please check out this CodePen example where I used an example of Jquery-flot

That is, no matter what the speed of time, the graph should always be the same.

To do this, simply divide the times of the variables ..

  

Here's the part of the code that creates the Sine wave

if(isRunning==true){
                    if( medicineTime1 >= 1 ){
                        medicineTime1--;
                        if( medicineTime1 < 1 ){ medicineTime1 = .1; }
                        //
                        // o  "high2Temp e linear", transformando em "seno"...
                        //
                        // criar o  "envelope" apra ancorar o coeficiente.
                        high2Target  = high2TargetPhase1; 
                        high2Final   = high2Target + high2Temp;
                        high2FinalSum= high2Final / medicineTime1 ;
                        high2Temp    = high2Temp - high2FinalSum; 
                        // criar o coeficiente.
                        coefficient =  ( high2FinalSum / high2TempTimeG );
                        //  para dividir em 2  (metades), durante o tempo de "de subida". 
                        if( !isMedicineTime1Temp ){ 
                            medicineTime1Temp = medicineTime1; 
                            // assumindo que sempre partiremos de  "Normal ECG"
                            // high2Inicial = 70; 
                            high2Inicial = high2;
                            isMedicineTime1Temp = true;
                        } 
                        //  primeira metade
                        if( medicineTime1 > medicineTime1Temp / 2 ){
                            apple = apple + coefficient;    
                            high2 = high2 - apple;
                        }                           
                        //  segunda metade
                        if( medicineTime1 < medicineTime1Temp / 2 ){
                            apple = apple - coefficient;    
                            high2 = high2 - apple;
                        }
                        //
                        // a frequencia sempre sera  linear...
                        //
                        frequency2Target  = frequency2TargetPhase1/frequency2Factor;
                        frequency2Final   = frequency2Target-frequency2;
                        frequency2FinalSum= frequency2Final/medicineTime1 ;
                        frequency2        = frequency2 + frequency2FinalSum;
                        if(medicineTime1<1){
                            //high2 = high2TargetPhase1 * -1; 
                            frequency2         = frequency2TargetPhase1/frequency2Factor;
                            medicinePhase1     = false;
                            medicinePhase2     = true;
                            isMedicineTime1Temp= false;
                        }
                    }
}

  

And here's how I divide the variables:

document.getElementById('buttonTime1').onclick = function(){
    updateInterval = updateInterval*2;
    medicineTime1 = medicineTime1*2;
    high2TempTimeG = 50;
    document.getElementById("log").innerHTML = "tempo = 1 ";
};
document.getElementById('buttonTime2').onclick = function(){
    updateInterval = updateInterval/2;
    medicineTime1 = medicineTime1/2;
    high2TempTimeG = 25;
    document.getElementById("log").innerHTML = "<font color=red> tempo = 5 </font>";
};




About us So here's my doubt, why does the code work in one situation, not the second? since all the variables are the same?

What am I not seeing? Where do I have to pay attention?

    
asked by anonymous 01.12.2016 / 12:04

1 answer

1

I realized where my mistake was,

The var "medicineTime1Temp" which is the time it should "last" the transition, was being set only "before" the animation started ....

If the speed is changed "during the amination", it should also be adjusted, but I had forgotten.

    
06.12.2016 / 06:13