javascript - Make an object's dimensions oscillate in size using canvas -

i'm playing around canvas , want make square when clicked gets initial burst of energy (for lack of better word) causes grow , shrink on both x , y axis, energy degrade on time until animation stops.

i can javascript bit need function can calculate multiplier use scale objects dimensions.

so ideally here pseudo-code use:

var scale = 1, previousscale = 1;  function draw() {     previousscale = scale;     scale = recalculatescale(); // can't write magic function      var x = x * scale       , y = y * scale;      // draw code here      // if scale hasn't changed since last redraw we're done     if (scale === previousscale) {         window.requestanimationframe(draw());     } }  draw(); 

if tell me names of methods using calculate value appreciate that.

var now_value = new number(); //this global var.    function recalculatescale(indice) {  if (!indice) var index = 0; else {var index = indice;}  var limit = (3/2)*(3.14); //this when sin function starting growing again (more or less when index 3.14+1.57, after has been decreasing time, , think should stop. free choose according easing   scale = math.sin(index);  now_value = scale; console.log(now_value)  if (index < limit) { settimeout(function() { recalculatescale(index+0.1) //you can change 0.1 value want, according how linear want animation }, 20) //you can change 20 values, these milliseconds } else {console.log('animation finished'); now_value = 0;}  } 

just call function recalculatescale() when want animation start, each time need value of scale var now_value, global , modifying during transition. when transition finishes, come original value, 0.

please note example values of now_value value 0 1 in 1/3 of time, 1 - 1 in 2/3 of time.

could't test it, hope it'll work or help.

-edit-- yes works, these explained output:

0.09983341664682802 vm571:15 0.19866933079506113 vm571:15 0.29552020666133944 vm571:15 0.38941834230864997 vm571:15 0.47942553860420295 vm571:15 0.5646424733950346 vm571:15 0.6442176872376908 vm571:15 0.7173560908995221 vm571:15 0.7833269096274824 vm571:15 0.8414709848078963 vm571:15 0.8912073600614339 vm571:15 0.9320390859672261 vm571:15 0.9635581854171918 vm571:15 0.9854497299884593 vm571:15 0.9974949866040542 vm571:15 0.9995736030415037 vm571:15 0.9916648104524685 vm571:15 0.9738476308781938 vm571:15 0.9463000876874136 vm571:15 0.909297426825681 vm571:15 0.8632093666488722 vm571:15 0.8084964038195898 vm571:15 0.7457052121767187 vm571:15 0.67546318055115 vm571:15 0.5984721441039556 vm571:15 0.5155013718214626 vm571:15 0.4273798802338289 vm571:15 0.3349881501559032 vm571:15 0.23924932921398087 vm571:15 0.14112000805986563 vm571:15 0.04158066243328894 vm571:15 -0.05837414342758142 vm571:15 -0.15774569414324974 vm571:15 -0.2555411020268329 vm571:15 -0.35078322768962117 vm571:15 -0.4425204432948536 vm571:15 -0.5298361409084947 vm571:15 -0.6118578909427198 vm571:15 -0.6877661591839753 vm571:15 -0.7568024953079285 vm571:15 -0.8182771110644106 vm571:15 -0.8715757724135881 vm571:15 -0.916165936749454 vm571:15 -0.9516020738895161 vm571:15 -0.9775301176650958 vm571:15 -0.9936910036334636 vm571:15 -0.9999232575641003 vm571:15 -0.9961646088358395 

the first call index = 0.1, output value 0.09983341664682802 (sin(0) = 0). when index around pi/2 (1.57 more or less), sin function values 1, , starts decreasing - 1, when index value 3/2*pi. total time is: (limit put / interval choose) * milliseconds, in our case (((3/2)*pi)/(0.1))*20.

it's enough @ graph of sin function understand how index , now_value related.

pi 3.14.