title: Find vector properties after canvas rotation
body: <p>EDIT: I did a video to explain what I wan't to do <a href="https://youtu.be/-6I503Urhvg" rel="nofollow">https://youtu.be/-6I503Urhvg</a></p>
  
  <p><strong>Objective</strong>: Find initial X,initial Y,final X and final Y points on canvas after rotation.</p>
  
  <p><strong>Problem</strong>: Formula is not working in my code and I need to find out what am I doing wrong.</p>
  
  <p><strong>Question:</strong> I would like to know if the formula I am using is right and how to use it properly to find <strong>objective</strong>.</p>
  
  <p>Formula I am using is: </p>
  
  <blockquote>
    <p>nX = x * Math.cos(-angle) - y * Math.sin(-angle)</p>
    
    <p>nY = x * sin(-angle) + y * Math.cos(-angle)</p>
  </blockquote>
  
  <p>The Formula seems to almost  work as it closely follows the rotation of the vector. I am using little squares to see what is the position that the formula is giving me.</p>
  
  <p>Formula in code: </p>
  
  <pre><code>this.nix = this.ix * Math.cos(-(rotation * (Math.PI / 180))) - this.iy * Math.sin(-(rotation * (Math.PI / 180)));
          this.niy = this.ix * Math.sin(-(rotation * (Math.PI / 180))) + this.iy * Math.cos(-(rotation * (Math.PI / 180)));
          this.nfx = this.fx * Math.cos(-(rotation * (Math.PI / 180))) - this.fy * Math.sin(-(rotation * (Math.PI / 180)));
          this.nfy = this.fx * Math.sin(-(rotation * (Math.PI / 180))) + this.fy * Math.cos(-(rotation * (Math.PI / 180)));
          ctx.fillRect(this.nix,this.niy,5,5);
          ctx.fillRect(this.nfx,this.nfy,5,5);
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*GLOBAL*/var check,lineSquare,rotation,lineRotate;
  rotation = 0;
  check = false;
  lineRotate = false;
  function lineRotateBtn(){
      lineRotate = true;
  }
  function setRotate(){
      var intervalo2 = setInterval(function(){rotation += 0.01;},1000/60);
  }
  function load() {
      var canvas = document.getElementById('box');
      var ctx = canvas.getContext('2d');
  
      function player(x, y, width) {
          this.x = x;
          this.y = y;
          this.width = width;
  
          this.vx = 3;
          this.vy = 3;
  
          this.up = false;
          this.down = false;
          this.left = false;
          this.right = false;
  
          this.drawn = function () {
              ctx.fillStyle = "black";
              ctx.fillRect(this.x, this.y, this.width, this.width);
              if (this.up) {
                  this.y -= this.vy;
              }
              if (this.down) {
                  this.y += this.vy;
              }
              if (this.left) {
                  this.x -= this.vx;
              }
              if (this.right) {
                  this.x += this.vx;
              }
          }
      }
  
      var players = new player(100, 100, 20);
  
      var keyUp, keyDown, keyLeft, keyRight;
      keyUp = 87;
      keyDown = 83;
      keyLeft = 65;
      keyRight = 68;
      window.addEventListener("keydown", checkKeyDown, false);
      function checkKeyDown(event) {
          if (event.keyCode == keyUp) {
              players.up = true;
          } else if (event.keyCode == keyDown) {
              players.down = true;
          } else if (event.keyCode == keyLeft) {
              players.left = true;
          } else if (event.keyCode == keyRight) {
              players.right = true;
          }
      }
  
      window.addEventListener("keyup", checkKeyUp, false);
      function checkKeyUp(event) {
          if (event.keyCode == keyUp) {
              players.up = false;
          } else if (event.keyCode == keyDown) {
              players.down = false;
          } else if (event.keyCode == keyLeft) {
              players.left = false;
          } else if (event.keyCode == keyRight) {
              players.right = false;
          }
      }
  
      document.onmousemove = mouseMove;
      function mouseMove(event) {
          event = event || canvas.event
          mouseX = event.pageX;
          mouseY = event.pageY;
          mouseX = mouseX - 11;
          mouseY = mouseY - 13;
          document.getElementById('test2').innerHTML = mouseX + " " + mouseY;
      }
  
      function line(ix, iy, fx, fy) {
          this.ix = ix;
          this.iy = iy;
          this.fx = fx;
          this.fy = fy;
  
          this.update = function () {
              this.nix = this.ix * Math.cos(-(rotation * (Math.PI / 180))) - this.iy * Math.sin(-(rotation * (Math.PI / 180)));
              this.niy = this.ix * Math.sin(-(rotation * (Math.PI / 180))) + this.iy * Math.cos(-(rotation * (Math.PI / 180)));
              this.nfx = this.fx * Math.cos(-(rotation * (Math.PI / 180))) - this.fy * Math.sin(-(rotation * (Math.PI / 180)));
              this.nfy = this.fx * Math.sin(-(rotation * (Math.PI / 180))) + this.fy * Math.cos(-(rotation * (Math.PI / 180)));
              ctx.fillRect(this.nix,this.niy,5,5);
              ctx.fillRect(this.nfx,this.nfy,5,5);
  
              var v1 = {}; //Player
              v1.vx = players.vx;
              v1.vy = players.vy;
              v1.m = Math.sqrt(v1.vx * v1.vx + v1.vy * v1.vy);
              v1.dx = v1.vx / v1.m;
              v1.dy = v1.vy / v1.m;
              var v2 = {ln: {}}; //Line;
              v2.ix = this.ix;
              v2.iy = this.iy;
              v2.fx = this.fx;
              v2.fy = this.fy;
              v2.vx = v2.fx - v2.ix;
              v2.vy = v2.fy - v2.iy;
              v2.m = Math.sqrt(v2.vx * v2.vx + v2.vy * v2.vy);v2.dx = v2.vx / v2.m;
              v2.dy = v2.vy / v2.m;
              v2.ln.vx = v2.vy;
              v2.ln.vy = -v2.vx;v2.ln.dx = v2.ln.vx / v2.m || 0;
              v2.ln.dy = v2.ln.vy / v2.m || 0;
              var v3 = {};
              v3.vx = v2.ix - players.x;v3.vy = v2.iy - players.y;
              var dp1 = v3.vx * v2.dx + v3.vy * v2.dy;
              var dp2 = v3.vx * v2.ln.dx + v3.vy * v2.ln.dy;
  
              if (dp1 &gt; -v2.m &amp;&amp; dp1 &lt; 0) {
                  if (dp2 &lt;= 2 &amp;&amp; dp2 &gt;= 0) {
                      console.log('colision');
                      if (players.up &amp;&amp; players.right){
                          players.x -= players.vx*2;
                          players.y += players.vy*2;
                      }
                      players.x -= players.vx;
                      players.y += players.vy;
                  }
                  if (dp2 &lt; -1 &amp;&amp; dp2 &gt;= -4) {
                      console.log('colision');
                      if (players.down &amp;&amp; players.left){
                          players.x -= players.vx*2;
                          players.y += players.vy*2;
                      }
                      players.x += players.vx;
                      players.y -= players.vy;
                  }
              }
              ctx.save();
              ctx.translate(this.ix + v2.vx / 2, this.iy + v2.vy / 2);
              ctx.rotate(rotation * (Math.PI / 180));
              ctx.translate(-(this.ix + v2.vx / 2), -(this.iy + v2.vy / 2));
  
              ctx.beginPath();
              ctx.moveTo(this.ix, this.iy);
              ctx.lineTo(this.fx, this.fy);
              ctx.stroke();
  
              ctx.restore();
  
              document.getElementById('test1').innerHTML = "dotProduct1: " + dp1 + "v2.m: " + (-v2.m) + "&lt;br&gt;" + dp2;
          }
      }
      var linez = new line(300,300,400,400);
  
      var intervalo = setInterval(animation, 1000 / 60);
      function animation() {
          check = true;
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          players.drawn();
          linez.update();
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#box {
   border: 1px solid black;
  }
  #button {
   border: none;
   background-color: gray;
   width: 70;
   height: 50;
  }
  canvas {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  }
  html {
   background-color: white;
   color: black;
   font-family: courier new;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
   &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/estilo.css"&gt;
    &lt;script src="js/main.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body onload="load()"&gt;
    &lt;canvas id="box" width="1330" height="500"&gt;&lt;/canvas&gt;
    &lt;button onclick="setRotate()"&gt;Rotate&lt;/button&gt;
    &lt;h2 id="test1"&gt;&lt;/h2&gt;
    &lt;h2 id="test2"&gt;&lt;/h2&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>