Вращение равностороннего треугольника с матрицей поворота на холсте

Question

Итак, я уверен, что я все-таки держусь здесь по математике, потому что он проверяет на бумаге .... но ... мой треугольник вращается сразу страница haha. То, что я пытаюсь сделать, это вращать равносторонний треугольник против часовой стрелки навсегда, где начало координат (центр треугольника, IE три строки, по одному от каждой вершины к середине, где они встречаются, как я определяю центр треугольника) не движется. Итак, вот моя сводка математики, здесь есть ошибка:

v1 (x1, y1), v2 (x2, y2) и v3 (x3.y3) представляют вершины в треугольнике. Сначала вычислим центр треугольника: x = (x1 + x2 + x3)/3, y = (y1 + y2 + y3)/3. Затем я создаю три новые вершины, вычитая значения центра из каждой вершины. Затем я умножаю каждую новую вершину на вращательную матрицу на 30 градусов и добавляю центр к новой повернутой вершине.

Я попытался изо всех сил прочитать это и убедиться, что это имеет смысл.

Вот мой код:

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: Благодаря Джейсону поймать опечатку я больше не закручивая от страницы, но вместо того, чтобы треугольник сужается на каждом вращение. редактирование: 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

Они отлично работают, но вы пропустите точку. (и 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); 

обновить значение x1, x2, но использовать его снова только после того, как.

вы должны использовать тот же буфер, вниз вашей математики и обновляет значения, как:

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_;