title: Calculate angle based on x, y position
body: <p>I am trying to calculate the angle for an arrow on a ball, based on the position where it is going to.
  The arrow moves, but in a total unexplainable direction, can anybody give some pointers?</p>
  
  <p>Codepen available: <a href="https://codepen.io/rayio/pen/LYYjGON" rel="nofollow noreferrer">Codepen</a></p>
  
  <p>I added the full code on here (EDITED based on input):
  I added a step to make the difference bigger for the angle calculation, not sure if that is the right way to go, but it seems a bit more functional. Plus added the +/- 90 in the angle method, but that doesnt seem to fix it. It is still feeling odd.</p>
  
  <pre><code>
  class Throwable {
  
    constructor(){
      this.throwObject = null;
      this.canDrag = null;
      this.initialDiffX = 0;
      this.initialDiffY = 0;
      this.previousX = 0;
      this.previousY = 0;
      this.intervalCounter = 0;
    }
  
    set x(input) {
      this.throwObject.style.left = input + 'px';
    }
  
    set y(input) {
      this.throwObject.style.top = input + 'px';
    }
  
    set rotation(input) {
      this.throwObject.style.transform = `rotate(${input}deg)`;
    }
  
    init(){
      this.throwObject = document.querySelector('.throwable');
      this.throwObject.addEventListener('mousedown', this.activateDrag.bind(this));
      this.throwObject.addEventListener('mouseup', this.deactivateDrag.bind(this));
      document.addEventListener('mousemove', this.drag.bind(this));
    }
  
    activateDrag(event) {
      this.canDrag = true;
      this.initialDiffX = event.clientX - this.throwObject.offsetLeft;
      this.initialDiffY = event.clientY - this.throwObject.offsetTop;
    }
  
    deactivateDrag() {
      this.canDrag = false;
    }
  
    drag(event) {
      if(this.canDrag === true) {
        if(this.intervalCounter &gt;= 30) {
           this.intervalCounter = 0;
        }
        if(this.intervalCounter === 0) {
          this.previousX = event.clientX;
          this.previousY = event.clientY;
        }
        this.intervalCounter++;
        this.y = event.clientY- this.initialDiffY;
        this.x = event.clientX - this.initialDiffX;
        this.rotation = this.angle(event.clientX, event.clientY, this.previousX, this.previousY);
      }
    }
  
    angle(ex, ey, cx, cy) {
      var dy = ey - cy;
      var dx = ex - cx;
      return Math.atan2(dy, dx) * 180 / Math.PI + 90;
    }
  
    // Untility
    log(logObject) {
      let logStr = '';
      for(let key in logObject) {
        logStr += `${key}: ${logObject[key]}&lt;br&gt;`;
      }
      document.getElementById('log').innerHTML = logStr;
    }
  }
  
  let throwable = new Throwable();
  throwable.init();
  </code></pre>
  
  <p>I made a mistake in comparing two different values, I fixed that, it is working way better, still have some odd behavior sometimes, seems like it doesnt know where to go in some points. But working better than before.</p>