Angle

calculate angle

by Grzegorz Matyszewski

HTML

<div id="main"></div>
<div id="log"></div>

SCSS

#main {
    width: 200px;
    height: 200px;
    background: #eee;
    position: relative;
    margin: 50px;
    
    &::before,
    &::after{
        position: absolute;
        background: black;
        left: 50%;
        top: 50%;
    }

    &::before {
        content: "a";
        width: 1px;
        height: 200px;
        margin-top: -100px;
    }

    &::after {
        width: 200px;
        height: 1px;
        margin-left: -100px;
        content: "b";
    }
}

#log {
    font-family: monospace;
}

JavaScript

var logEl = document.getElementById('log');
function log() {
	var args = Array.prototype.slice.call(arguments, 0);
	logEl.innerHTML = args.join().toString();
}

var main = document.getElementById('main');
var offset = {
	x: main.offsetLeft,
    y: main.offsetTop,
};

var width = main.offsetWidth;
var height = main.offsetHeight;

var convertToAngle = function(x,y){
    	
    var angle = Math.atan(y/x) * 180 / Math.PI;
    
    if (x > 0) {
    	angle += 90;
    } else if (x < 0) {
        angle += 270;
    }

    return Math.round(angle);
};

main.onmousemove = function(e) {
    var x =  e.clientX - offset.x - width * 0.5;
    var y = e.clientY - offset.y - height * 0.5;
    log(x, y, convertToAngle(x, y) + '°');
}