title: Spinable turn dial: Calculate angle between two vectors, moving the reference line each time
body: <p>I have made the below spin dial, using <a href="https://popmotion.io/api/pointer/" rel="nofollow noreferrer">popmotion</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const {
    listen,
    styler,
    pointer,
    value,
    transform,
    spring,
    inertia,
    calc
  } = window.popmotion;
  const { pipe } = transform;
  
  const dial = document.querySelector(".dial");
  const dialStyler = styler(dial);
  const dialRotate = value(0, dialStyler.set('rotate'));
  
  const dialRect = dial.getBoundingClientRect();
  const dialY = dialRect.top + window.scrollY + (dialRect.height / 2);
  const dialX = dialRect.left + window.scrollX + (dialRect.width / 2);
  // console.log(dialX, dialY);
  
  const pointA = {x: dialX, y: dialY};
  // let pointB = {x: 0, y: 0};
  // let angle = 0;
  // let prevAngle = 90;
  // Angle between origo and pointer
  const pointerAngle = o =&gt; pointer( o ).pipe(v =&gt; {
    const pointB = {x: v.x, y: v.y};
    const angle = calc.angle(pointA, pointB) + 90;
    // console.log('pointA: ', pointA);
    // console.log('pointB: ', pointB);
    // console.log('angle: ', angle);
    // console.log('prevAngle: ', prevAngle);
    // console.log('angle - prevAngle: ', angle - prevAngle);
    return angle;
  });
  
  listen(dial, "mousedown touchstart").start(e =&gt; {
    e.preventDefault();
    // prevAngle = angle;
    pointerAngle().start(dialRotate);
  });
  
  listen(document, "mouseup touchend").start(() =&gt; {
    dialRotate.stop();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
    width: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/popmotion/dist/popmotion.global.min.js"&gt;&lt;/script&gt;
  
  &lt;img class="dial" src="https://greensock.com/wp-content/uploads/custom/draggable/img/knob.png"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can i get the dial to start at the same location each time i let go and re-click?</p>
  
  <p>The way it works now, it moves to the cursor/finger position when clicking/touching. I would like it to instead start from the exact place it is currently at, and calculate the angle from there.</p>
  
  <p>This is probably trigonometry related, but I have not been able to figure it out.</p>