Rotating an equilateral triangle with a rotation matrix on canvas

Question

So I am pretty sure that I am derping massively here on the math somewhere, because it checks out on paper.... but... my triangle is rotating right off the page haha. What I am trying to do is rotate an equilateral triangle counter-clockwise forever, where the origin(center of triangle, IE three lines, one from each vertex towards the middle, where they meet is how I am defining the center of the triangle) does not move. So here is my math summary incase there is an error here:

v1(x1,y1),v2(x2,y2),and v3(x3.y3) represent the vertexes in the triangle. First I calculate the center of the triangle: x=(x1+x2+x3)/3, y=(y1+y2+y3)/3. Next I create three new vertices by subtracting the values of the center from each vertex. Then I multiply each new vertex by the rotational matrix for 30 degrees, and add the center to the new rotated vertex.

I tried my best to read over this and make sure that it made sense.

Here is my 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 // the triangle context.beginPath(); context.moveTo(x1, y1); context.lineTo(x2, y2); context.lineTo(x3, y3); context.closePath(); base++; // the 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: Thanks to Jason catching the typo I am no longer spinning off the page, but instead the triangle is shrinking on each rotation. the edit: y3 = (x4 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y3); to y3 = (x3 * Math.sin(-(1/6)*Math.PI)) + ((Math.cos(-(1/6)*Math.PI))*y3);

Answer 1

They work great, but you miss a point. (and the 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 the value of x1 , x2 , x3 but using it again just after.

you have to use same buffer, down your math and updates the 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_;