javascript - How to ease between two y-coordinates? -

for school assignment have make graph in javascript. teacher see animated graphs. build graph tweets in 1 week, cannot find how ease between 2 y-coordinates.

you can find project here on jsfiddle, or on website.

var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var form = document.getelementbyid("form"); var data = []; var huidigeypos = []; var nieuweypos = []; var count = []; var snelheid = 0;  function init(){     ctx.fillstyle="rgb(255,255,255)";     ctx.fillrect(0,0,canvas.width,canvas.height);     ctx.translate(0, 445);      for(var = 0; < 7; i++){         data[i] = form[i].value*30;     }      draw(); }  function draw(){     ctx.fillstyle="rgb(255,255,255)";     ctx.fillrect(0,0,canvas.width,-canvas.height);     ctx.beginpath();         ctx.moveto(0,0);     for(var = 0; <= 750; += 125){         ctx.lineto(i,-data[i/125]);         huidigeypos.push((data[i/125]));     }     if(huidigeypos.length > 7){         huidigeypos.splice(0, 7);     }     ctx.lineto(750,0);     ctx.closepath();     ctx.fillstyle="#0084ff";         ctx.fill(); }  function invullen(){     for(var = 0; < 7; i++){         data[i] = form[i].value*30;     }     draw(); }  function drawrandomgraph(){       for(var = 0; < 7; i++){         form[i].value = math.round(math.random()*10);         nieuweypos.push(form[i].value*30);     }     if(nieuweypos.length > 7){         nieuweypos.splice(0, 7);     }     invullen(); }  init(); 

thanks in advance!

you can use interpolation in combination easing-function. standard interpolation between 2 points, aka lerping, simple enough:

p = p1 + (p2 - p1) * t 

where t in range [0, 1]

by injecting easing-function t, in [0, 1] range, can ease transition:

... y = y1 + (y2 - y1) * easeinout(t); ...  function easeinout(t) {return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1} 

there several variations of easing functions, above cubic. can find more here popular penner versions.

for case update y2 new target value use old y2 y1, lerp/ease between them each x point using same t value.

the demo below shows how use these, integrate want.

example

var ctx = document.queryselector("canvas").getcontext("2d"),      y1 = 10, y2 = 140,                   // source , destination positions      current = 0, max = 50, delta = 1;    // counters calculating/animating t    (function loop() {      // calc t    current += delta;    var t = current / max;                 // normalize [0, 1]    if (t <= 0 || t >= 1) delta = -delta;  // ping-pong animation demo        // calc lerp linear    var yl = lerp(y1, y2, t),              // linear        ye = lerp(y1, y2, easeinout(t));   // easing        // draw graphics show (linear : easing)    ctx.clearrect(0, 0, ctx.canvas.width, ctx.canvas.height);    ctx.fillrect(20, yl - 10, 20, 20);    ctx.fillrect(50, ye - 10, 20, 20);        requestanimationframe(loop);  })();    function lerp(p1, p2, t) {    return p1 + (p2 - p1) * t  }    function easeinout(t) {    return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1  }

<canvas></canvas>