Light mouse over atan2

by Konstantin Cryman

HTML

<canvas id="test"></canvas>

JavaScript

var p1 = { x: 0, y: 0 }
var p2 = { x: 0, y: 10 }

var Rad = Math.atan2( p2.y - p1.y, p2.x - p1.x );

console.log( Rad );


var  can=  document.getElementById('test');
can.width = 400;
can.height = 400;
var ctx = can.getContext('2d');

var Mouse = { x: 0, y: 0 };
var Center = { x: 100, y: 100 }


function placeOverCenter( centerX, centerY, radius, angleInRad ){
		return {
			x: centerX + radius * Math.sin(angleInRad),
      y: centerY + radius * Math.cos(angleInRad)
    }
}



var animate = function(){

	ctx.clearRect( 0, 0, can.width, can.height );
	
  var _c = placeOverCenter( Center.x, Center.y, 70, Math.atan2( Mouse.x - Center.x, Mouse.y - Center.y ) );
  
  ctx.fillRect( Center.x, Center.y, 5, 5 );
  ctx.fillRect( _c.x, _c.y, 5, 5 );
  ctx.stroke();

	requestAnimationFrame( animate );
}

animate();


window.addEventListener('mousemove', function( event ){
		Mouse.x = event.offsetX;
		Mouse.y = event.offsetY;
}, false);