title: How to add inertia to animations tracking mouse move?
body: <p>I'm trying to rotate a triangle around an origin point using mouseMove event.<br>
  I'm getting the <em>touch start point</em> and the <em>current touch point</em> using <code>touchstart</code> and <code>touchmove</code> events, then I'm finding the angle of direction easily using:</p>
  
  <pre><code>alpha = y2 - y1 / x2 - x1;     // alpha is the tangent of the angle
  beta= atan(alpha);      // beta is the angle in radians
  </code></pre>
  
  <p>Then I'm rotating the element in <code>PIXI</code>:</p>
  
  <pre><code>function animTriangle (beta) {
  
    // initially clear the previous shape
    myTriangle.clear();
  
  
    // draw a new shape in new positions
    myTriangle.beginFill(0x000000, 0.1);
    myTriangle.moveTo(origin.x, origin.y);
    myTriangle.lineTo(origin.x - 100, 0);
    myTriangle.lineTo(origin.x + 100, 0);
    myTriangle.lineTo(origin.x, origin.y);
    myTriangle.endFill();
    myTriangle.rotation = beta;
  
  }
  </code></pre>
  
  <p>I'm managing my paintings using <code>RequestAnimationFrame</code> loop.<br></p>
  
  <p>The problem is the animation is choppy and I need inertia in rotation. How could fix this function?</p>