Javascript-форум - Почему подтормаживает анимация?

MrRiseYT,
setInterval(rotateFigure,1)
~~тут будет ссылка на картинку из оффтопа ...~~
картинка тут
код вентилятора ниже :)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Any title</title>
</head>
<body>
<canvas id="canvas" width="5000" height="5000"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function defineWay (x,y) {
  if ((y>0)||(y === 0)) {
    return Math.acos(x);
    } else
    return (2*Math.PI-Math.acos(x));
};
function radiansToDegrees (rad) {
  return rad/(Math.PI/180);
};

var square = {
  'name' : 'Square #1',
  'demension' : '2D',
  'coordinates' : [[200,0],[0,0],[0,200],[200,200]],
  'connecting' : [[0,1],[1,2],[2,3],[3,0]],
  'vertexes' : 4

};

var strange = {
  'name' : 'strange',
  'demension' : '2D',
  'coordinates' : [[600,100],[400,100],[400,0],[0,0],[0,200],[100,200],[100,600],[300,600],[300,500],[400,500],[400,400],[600,400]],
  'connecting' : [[0,1],[1,2],[2,3],[3,0]],
  'vertexes' : 12
};

var triangle = {
  'name' : 'triangle',
  'demension' : '2D',
  'coordinates' : [[200,200],[100,0],[0,200]],
  'connecting' : [[0,1],[1,2],[2,3],[3,0]],
  'vertexes' : 3
};

var house = {
  'name' : 'house',
  'demension' : '2D',
  'coordinates' : [[300,200],[200,0],[100,200],[100,400],[300,400]],
  'connecting' : [[0,1],[1,2],[2,3],[3,0]],
  'vertexes' : 5
};

function center (figure) {
  if (figure.demension === '2D') {
      var x_center = 0;
      var y_center = 0;
      var center = [];

      for (var i = 0; i<figure.vertexes; i++) {
        x_center+=figure.coordinates[i][0];
        y_center+=figure.coordinates[i][1];
      };

      x_center = x_center / figure.vertexes;
      y_center = y_center / figure.vertexes;

      center[0] = x_center;
      center[1] = y_center;

      return center;

    };
};
var circle = function (x, y, radius, fillCircle) {
 ctx.beginPath();
 ctx.arc(x, y, radius, 0, Math.PI * 2, false);
 if (fillCircle) {
 ctx.fill();
 } else {
 ctx.stroke();
 }
};
function distance2D (x1,y1,x2,y2) {
  return Math.sqrt((x1-x2)*(x1-x2)+ (y1-y2)*(y1-y2));
};

function drawFigure (figure,x,y) {
  ctx.beginPath();
  ctx.moveTo(figure.coordinates[0][0]+x,figure.coordinates[0][1]+y);
  for (var i = 1; i<figure.vertexes; i++) {
    ctx.lineTo(figure.coordinates[i][0]+x,figure.coordinates[i][1]+y);
  };

  ctx.lineTo(figure.coordinates[0][0]+x,figure.coordinates[0][1]+y);
  ctx.strokeStyle = 'red';
  ctx.stroke();
  ctx.strokeStyle = 'black';

};

function drawCircles (figure,x,y) {
for (var i = 0; i<figure.vertexes; i++) {
  ctx.beginPath();
  ctx.arc(center(figure)[0]+x,center(figure)[1]+y,distance2D(center(figure)[0]+x,center(figure)[1]+y,figure.coordinates[i][0]+x,figure.coordinates[i][1]+y),0,2*Math.PI,false);
  ctx.stroke();
  };
};

function reCenter (x0,y0,r,x1,y1) {
var localCenter = [];
localCenter[0] = (x1-x0)/r;
localCenter[1] = -1*(y1-y0)/r;
  return localCenter;
};

function reCenterBack (x0,y0,r,local1,local2) {
  var globalCenter = [];
  globalCenter[0] = local1*r+x0;
  globalCenter[1] = -1*local2*r+y0;

  return globalCenter;
};

function powerfulDefineStrange (x,y) {
return radiansToDegrees(defineWay(reCenter(300,300,distance2D(x,y,300,300),x,y)[0],reCenter(300,300,distance2D(x,y,300,300),x,y)[1]));
};

function powerfulDefine (figure,x,y) {
return radiansToDegrees(defineWay(reCenter(center(figure)[0],center(figure)[1],distance2D(x,y,center(figure)[0],center(figure)[1]),x,y)[0],reCenter(center(figure)[0],center(figure)[1],distance2D(x,y,center(figure)[0],center(figure)[1]),x,y)[1]));
};
var x1 = x2 = x3 = x4 = y1 = y2 = y3 = y4 = 0;

var n = 0;
function drawRotatingSquare () {

x1 = Math.cos(Math.PI/4+n*Math.PI/10); //Верхняя левая
y1 = Math.sin(Math.PI/4+n*Math.PI/10);

x2 = Math.cos((3*Math.PI)/4+n*Math.PI/10); //Верхняя правая
y2 = Math.sin((3*Math.PI)/4+n*Math.PI/10);

x3 = Math.cos((5*Math.PI)/4+n*Math.PI/10); //Нижняя правая
y3 = Math.sin((5*Math.PI)/4+n*Math.PI/10);

x4 = Math.cos((7*Math.PI)/4+n*Math.PI/10); //Нижняя левая
y4 = Math.sin((7*Math.PI)/4+n*Math.PI/10);

x1 = reCenterBack(100,100,distance,x1,y1)[0];
y1 = reCenterBack(100,100,distance,x1,y1)[1];

x2 = reCenterBack(100,100,distance,x2,y2)[0];
y2 = reCenterBack(100,100,distance,x2,y2)[1];

x3 = reCenterBack(100,100,distance,x3,y3)[0];
y3 = reCenterBack(100,100,distance,x3,y3)[1];

x4 = reCenterBack(100,100,distance,x4,y4)[0];
y4 = reCenterBack(100,100,distance,x4,y4)[1];
ctx.clearRect(0,0,1000,1000);
ctx.beginPath();
ctx.moveTo(x1+200,y1+200);
ctx.lineTo(x2+200,y2+200);
ctx.lineTo(x3+200,y3+200);
ctx.lineTo(x4+200,y4+200);
ctx.lineTo(x1+200,y1+200);
ctx.stroke();
n = n + 0.01
drawCircles(square,200,200);
};
//drawFigure(strange);
//drawCircles(strange);

//setInterval(drawRotatingSquare,1);



function rotateFigure(figure) {
figure = strange;
var figureCenterX = center(figure)[0];
var figureCenterY = center(figure)[1];

  var degreesArray = [];
  if (degreesArray.length === 0) {
  for (var i = 0; i<figure.vertexes; i++) {
    degreesArray[i] = (Math.PI/180)*powerfulDefine(figure,figure.coordinates[i][0],figure.coordinates[i][1]);
  };
  };

  for (var i = 0; i<figure.vertexes; i++) {
  var distance = distance2D(figureCenterX,figureCenterY,figure.coordinates[i][0],figure.coordinates[i][1]);
  figure.coordinates[i][0] = Math.cos(degreesArray[i] + n*Math.PI/10);
  figure.coordinates[i][1] = Math.sin(degreesArray[i] + n*Math.PI/10);

  figure.coordinates[i][0] = reCenterBack(figureCenterX,figureCenterY,distance,figure.coordinates[i][0],figure.coordinates[i][1])[0];
  figure.coordinates[i][1] = reCenterBack(figureCenterX,figureCenterY,distance,figure.coordinates[i][0],figure.coordinates[i][1])[1];
  };
    ctx.clearRect(0,0,1000,1000);
    drawFigure(figure,200,200);
    //drawCircles(figure,200,200);
    n = 1;
};


function figureDegrees (figure) {
  var degreesArray = [];

  for (var i = 0; i<figure.vertexes; i++) {
    degreesArray[i] = (Math.PI/180)*powerfulDefine(figure,figure.coordinates[i][0],figure.coordinates[i][1]);
  };

  return degreesArray;
};
setInterval(rotateFigure,1000/60)


</script>
</body>
</html>