window.onload = function() {

  var stop = true;

  var img = document.querySelector("img");

  var canvas = document.querySelector("canvas");

  var ctx = canvas.getContext("2d");

​

  var width = canvas.width;

  var height = canvas.height;

​

  var cx = width / 2;

  var cy = height / 2;

​

  ctx.fillRect(0, 0, width, height);

  ctx.fillStyle = "white";

​

​

  // Parameters

  var imgs = [];

​

  var l = 40;

  for (var i = 0; i < l; i++) {

    imgs.push({img: i % 16, pos: (100 * i / l)});

  }

​

  var TO = 30;

  var step = 0.003;

​

  var ra = 0;

​

  var fps = 0;

​

  function draw() {

    ctx.clearRect(0, 0, width, height);

    for (var t = 0; t < imgs.length; t++) {

      ctx.save();

      computeTransform(imgs[t].pos);

      drawImage(imgs[t].img);

      ctx.restore();

      imgs[t].pos += 20 * step;

    }

    if (imgs[imgs.length - 1].pos >= 100) {

      var n = imgs.pop();

      n.pos = 0;

      imgs.unshift(n);

    }

​

    ra += step;

    xradius = 40 + Math.cos(ra) * 12;

    yradius = 40 + Math.sin(ra) * 12;

​

    fps++;

    if (!stop) setTimeout(draw, TO);

  }

​

​

  var fpsInterval = setInterval(checkFPS, 1000);

​

  var totalfps = 0;

  var count = 0;

  var computeMean = false;

  function checkFPS() {

    var aFps = fps > 60 ? "60+" : fps;

    console.log(aFps+ " FPS");

    if (computeMean) {

      count++;

      totalfps += fps;

    }

    fps = 0;

  }

​

  setTimeout(draw, 0);

  window.go = function () {

    stop = false;

    setTimeout(draw, 0);

    setTimeout(goFast, 3000);

  };

​

  var lasts = 20;

  var s_step = (0.03 - 0.003) / lasts;

  var s_TO = 30 / lasts;

  function goFast() {

    var i = 0;

    var interval = setInterval(function() {

      step += s_step;

      TO -= s_TO;

      i++;

      if (i == lasts) {

        computeMean = true;

        clearInterval(interval);

        setTimeout(end, 7000);

      }

    }, 100);

  }

​

  function goSlow() {

    var i = 0;

    var interval = setInterval(function() {

      step -= s_step;

      TO += s_TO;

      i++;

      if (i == lasts) {

        clearInterval(interval);

        stop = true;

      }

    }, 40);

​

  }

​

  function end() {

    goSlow();

    clearInterval(fpsInterval);

    var meanFps = Math.round(totalfps / count);

    if (meanFps > 60) meanFps = "60+";

    alert(meanFps);

  }

​

  var start = -10;

  var length = 29;

  var a = 1.2;

  var xradius = 50;

  var yradius = 50;

  function r(t) {return Math.pow(a, t);}

  function x(t, _t) {return _t * Math.cos(t);}

  function y(t, _t) {return _t * Math.sin(t);}

  function computeTransform(t) {

    t = (t / 100) * length + start;

    var _t = r(t);

    var _x = x(t, _t);

    var _y = y(t, _t);

    ctx.translate(cx + xradius * _x, cy + yradius * _y);

    ctx.rotate(t);

    ctx.scale(_t / 2, _t / 2);

  }

​

  function drawImage(idx) {

    idx = idx % 16;

    var offset = (485 * idx);

    ctx.drawImage(img, 0, offset, 640, 480, 0, 0, 64, 48);

  }

​

  go();

};