javascript - Rotating an equilateral triangle with a rotation matrix on canvas -

so pretty sure derping massively here on math somewhere, because checks out on paper.... but... triangle rotating right off page haha. trying rotate equilateral triangle counter-clockwise forever, origin(center of triangle, ie 3 lines, 1 each vertex towards middle, meet how defining center of triangle) not move. here math summary incase there error here:

v1(x1,y1),v2(x2,y2),and v3(x3.y3) represent vertexes in triangle. first calculate center of triangle: x=(x1+x2+x3)/3, y=(y1+y2+y3)/3. next create 3 new vertices subtracting values of center each vertex. multiply each new vertex rotational matrix 30 degrees, , add center new rotated vertex.

i tried best read on , make sure made sense.

here code:

function calcverts() {      var xorig = (x1 + x2 + x3)/3;      var yorig = (y1 + y2 + y3)/3;            x1 -= xorig;      x2 -= xorig;      x3 -= xorig;      y1 -= yorig;      y2 -= yorig;      y3 -= yorig;         x1 = (x1 * math.cos(-(1/6)*math.pi)) - ((math.sin(-(1/6)*math.pi))*y1);      y1 = (x1 * math.sin(-(1/6)*math.pi)) + ((math.cos(-(1/6)*math.pi))*y1);      x2 = (x2 * math.cos(-(1/6)*math.pi)) - ((math.sin(-(1/6)*math.pi))*y2);      y2 = (x2 * math.sin(-(1/6)*math.pi)) + ((math.cos(-(1/6)*math.pi))*y2);      x3 = (x3 * math.cos(-(1/6)*math.pi)) - ((math.sin(-(1/6)*math.pi))*y3);      y3 = (x4 * math.sin(-(1/6)*math.pi)) + ((math.cos(-(1/6)*math.pi))*y3);            x1 += xorig;      x2 += xorig;      x3 += xorig;      y1 += yorig;      y2 += yorig;      y3 += yorig;   }  function drawscreen() {      context.clearrect(0, 0, context.canvas.width, context.canvas.height); //clear canvas before each repaint            // triangle      context.beginpath();      context.moveto(x1, y1);      context.lineto(x2, y2);      context.lineto(x3, y3);      context.closepath();      base++;      // outline      context.linewidth = 10;      context.strokestyle = '#666666';      context.stroke();            calcverts();  }    thecanvas = document.getelementbyid("mycanvas");  context = thecanvas.getcontext("2d");  var speed = 5;  var base = 400;  var height = 346.4;  var x1 = base-200;  var x2 = base-400;  var x3 = base;  var y1 = height-346.4;  var y2 = height;  var y3 = height;    function drawloop() {      window.settimeout(drawloop, 500);      drawscreen();  }  drawloop();

<div align="center">      <canvas id="mycanvas" width="500" height="500"></canvas>  </div>

edit1: jason catching typo no longer spinning off page, instead triangle shrinking on each rotation. edit: y3 = (x4 * math.sin(-(1/6)*math.pi)) + ((math.cos(-(1/6)*math.pi))*y3); y3 = (x3 * math.sin(-(1/6)*math.pi)) + ((math.cos(-(1/6)*math.pi))*y3);

they work great, miss point. (and x4).

   x1 = (x1 * math.cos(-(1/6)*math.pi)) - ((math.sin(-(1/6)*math.pi))*y1);    y1 = (x1 * math.sin(-(1/6)*math.pi)) + ((math.cos(-(1/6)*math.pi))*y1);    x2 = (x2 * math.cos(-(1/6)*math.pi)) - ((math.sin(-(1/6)*math.pi))*y2);    y2 = (x2 * math.sin(-(1/6)*math.pi)) + ((math.cos(-(1/6)*math.pi))*y2);    x3 = (x3 * math.cos(-(1/6)*math.pi)) - ((math.sin(-(1/6)*math.pi))*y3);    y3 = (x3 * math.sin(-(1/6)*math.pi)) + ((math.cos(-(1/6)*math.pi))*y3); 

you update value of x1, x2, x3 using again after.

you have use same buffer, down math , updates values like:

var x1_ = (x1 * math.cos(-(1/6)*math.pi)) - ((math.sin(-(1/6)*math.pi))*y1),     y1_ = (x1 * math.sin(-(1/6)*math.pi)) + ((math.cos(-(1/6)*math.pi))*y1),     x2_ = (x2 * math.cos(-(1/6)*math.pi)) - ((math.sin(-(1/6)*math.pi))*y2),     y2_ = (x2 * math.sin(-(1/6)*math.pi)) + ((math.cos(-(1/6)*math.pi))*y2),     x3_ = (x3 * math.cos(-(1/6)*math.pi)) - ((math.sin(-(1/6)*math.pi))*y3),     y3_ = (x3 * math.sin(-(1/6)*math.pi)) + ((math.cos(-(1/6)*math.pi))*y3);  x1 = x1_; x2 = x2_; x3 = x3_; y1 = y1_; y2 = y2_; y3 = y3_;