Простая анимация холста с использованием вращательных матриц - PullRequest
Новая
       27

Простая анимация холста с использованием вращательных матриц

1 голос
/ 05 июля 2019

Я пытаюсь повернуть форму холста, используя матричное умножение - в основном, чтобы проверить, правильно ли мое умножение матрицы.Как мне создать анимацию, чтобы продемонстрировать это вращение?

edit: Где-то в середине моего редактирования я, должно быть, сделал что-то не так в draw (), потому что форма холста больше не появляется.Может ли это быть из передачи параметров в moveTo () и lineTo () вместо значений?Как мне исправить эту проблему? 

function Main(){
  draw(40, 80, 60, 50, 50, 50,"red");

   let transformation_1 = matrix(40, 80, 60, 50, 50, 50, 100, 200, Math.PI/2);
   //animate();
}

/*function animate(){
    requestAnimationFrame(animate);
    draw();
}*/

function draw(p1x, p2x, p3x, p1y, p2y, p3y, color){
   var canvas = document.getElementById("myCanvas");
   var ctx = canvas.getContext("2d");
   //ctx.save();
   ctx.beginPath();
   ctx.moveTo(p1x,p1y);
   ctx.lineTo(p2x,p2y);
   ctx.lineTo(p3x,p3y);
   ctx.fillStyle = color;
   ctx.fill();
   // ctx.restore();
   console.log("sanity check");
}

function matrix(p1x, p2x, p3x, p1y, p2y, p3y, distanceX, distanceY, t){

   const A = [ [Math.cos(t), -Math.sin(t), distanceX],
            [Math.sin(t), Math.cos(t), distanceY],
            [0,0,1],
         ];

   const B =[ [p1x, p2x, p3x],
           [p1y, p2y, p3y],
           [1,1,1],
         ];

   C = [];

   for (var i =0; i< A.length; i++){
      C[i] = [];
      for (var j =0 ; j< B[0].length; j++){
          //console.log(A[i][j]);
          C[i][j] = 0;
          for (var y = 0 ; y < A[0].length ; y++){
              C[i][j] += A[i][y] * B[y][j];
          }
      console.log(C[i][j] + "[" + i + "," +j+"] is in the resultant matrix");
     }
   }
  console.log(JSON.stringify(C)); //print out resultant matrix as an array
  return C;
}
...