How to use "time" transitions in a Canvas animation

Asked

Viewed 206 times

1

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

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

For example: It takes a long time between applying the medicine and waiting for it to go through the whole process to check the results. So I created this button that "does the time pass" at twice the speed.

  • Although initially WORKED (And the graph is 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 this example of Codepen where I used an example of Jquery-Flot

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

for this I simply divided the times of the variables..


This is the part of the code that creates the wave Sine

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 as 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>";
};




Then here is my doubt, why does the code work in one situation, and not in the second? since all variables are the same?

what am I not seeing? where I have to pay attention?

1 answer

1


I realized where my mistake lay,

A var "medicineTime1Temp" which is the time when "should last" the transition, was being adjusted only "before" the animation start....

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

Browser other questions tagged

You are not signed in. Login or sign up in order to post.