JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<div class="point_one point"></div>
<div class="point_two point"></div>

CSS

.point {
  position:absolute;
  width:10px;
  height:10px;
  background-color:#000000;
}

.point_one {
  left:25px;
  top:59px;
}

.point_two {
  left:36px;
  top:40px;
}

JavaScript

// working with angles
var P1_y = parseInt($('.point_one').css('top'), 10);
var P1_x = parseInt($('.point_one').css('left'), 10);
var P2_y = parseInt($('.point_two').css('top'), 10);
var P2_x = parseInt($('.point_two').css('left'), 10);

var deltaY = P2_y - P1_y;
var deltaX = P2_x - P1_x;

console.log(Math.atan2(deltaX,deltaY) * 180 / Math.PI);

// point1 x 1
// point1 y 1

// point2 x 2
// point2 y 2


//http://stackoverflow.com/questions/7586063/how-to-calculate-the-angle-between-two-points-relative-to-the-horizontal-axis


/*deltaY = P2_y - P1_y
deltaX = P2_x - P1_x
Then calculate the angle.

angleInDegrees = arctan(deltaY / deltaX) * 180 / PI
If your language includes an atan2 function it becomes the following instead:

angleInDegrees = atan2(deltaY, deltaX) * 180 / PI


// working with angles
var P1_y = 1;
var P1_x = 1;
var P2_y = 25;
var P2_x = 25;

var deltaY = P2_y - P1_y;
var deltaX = P2_x - P1_x;

console.log(Math.atan2(deltaX,deltaY) * 180 / Math.PI);

// point1 x 1
// point1 y 1

// point2 x 2
// point2 y 2


//http://stackoverflow.com/questions/7586063/how-to-calculate-the-angle-between-two-points-relative-to-the-horizontal-axis*/