CM05 - Arctangent

by Ehsan Ziya

HTML

<canvas id='canvas'></canvas>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;
var centerX = w / 2;
var centerY = h / 2;
var distanceX = 0;
var distanceY = 0;
var angle = 0;

function render() {
  ctx.clearRect(0, 0, w, h);
  ctx.save();
  ctx.translate(centerX, centerY);
  ctx.rotate(angle);

  ctx.beginPath();
  ctx.moveTo(20, 0);
  ctx.lineTo(-20, 0);
  ctx.moveTo(20, 0);
  ctx.lineTo(10, -10);
  ctx.moveTo(20, 0);
  ctx.lineTo(10, 10);
  ctx.stroke();

  ctx.restore();
  requestAnimationFrame(render);
}

document.body.addEventListener('mousemove', function(event) {

	distanceX = event.clientX - centerX;
  distanceY = event.clientY - centerY;
  angle = Math.atan2(distanceY, distanceX);
});

render();