kevinfjbecker/angle.html

## angle.html
<!DOCTYPE html>
<html>
  <head>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>Angle</title>
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <p/>
    <span id="info"></span>

    <script src="angle.js"></script>
  </body>
</html>

## angle.js
(function () {

  var ctx = document.getElementById('canvas').getContext('2d');

  var WIDTH = $("#canvas").width();
  var HEIGHT = $("#canvas").height();
  var CENTER_Y = HEIGHT / 2;
  var CENTER_X = WIDTH / 2;
  var RADIUS = 50;

  var clear = function() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
  };

  var drawLine = function(x, y) {

    ctx.beginPath();
    ctx.moveTo(CENTER_X, CENTER_Y);
    ctx.lineTo(x, y);
    ctx.closePath();
    ctx.stroke();

  };

  var drawBackground = (function bg() {

    ctx.strokeRect(0.5, 0.5, 299, 149);

    ctx.beginPath();
    ctx.arc(150, 75, RADIUS, 0, 2 * Math.PI);
    ctx.moveTo(100, 75);
    ctx.lineTo(200, 75);
    ctx.moveTo(150, 25);
    ctx.lineTo(150, 125);
    ctx.closePath();

    ctx.stroke();

    return bg;

  }());

  var normalVectorEast = {
    x: 1,
    y: 0
  };

  var centerPoint = {
    x: CENTER_X,
    y: CENTER_Y
  };

  var getVectorFromPoints = function(p1, p2) {
    return {
      x: p2.x - p1.x,
      y: p2.y - p1.y
    };
  };

  var getVectorMagnitude = function(v) {
    return Math.sqrt(v.x * v.x + v.y * v.y);
  };

  var getNormalizedVector = function(v) {
    var magnitude = getVectorMagnitude(v);
    return {
      x: v.x / magnitude,
      y: v.y / magnitude
    };
  };

  var getScaledVector = function(v, n) {
    return {
      x: v.x * n,
      y: v.y * n
    };
  };

  var dotProduct = function(v1, v2) {
    return v1.x * v2.x + v1.y * v2.y;
  };

  var correctedRadiansValue = function(radiansValue, y) {
    return CENTER_Y + y < CENTER_Y ? radiansValue : Math.PI + (Math.PI - radiansValue);
  };

  var radiansToDegrees = function(radiansValue) {
    return radiansValue * 180 / Math.PI;
  };

  $('#canvas').mousemove(function(e){

    var coords = {};
    coords.x = e.clientX - $(this).offset().left;
    coords.y = e.clientY - $(this).offset().top;

    clear();
    drawBackground();

    var v = getVectorFromPoints(centerPoint, {x: coords.x, y: coords.y});
    v = getNormalizedVector(v);
    var angle = Math.acos(dotProduct(normalVectorEast, getNormalizedVector(v)));
    v = getScaledVector(v, RADIUS);

    drawLine(CENTER_X + v.x, CENTER_Y + v.y);

    if(angle === 0) {
      // don't draw an arc
    } else if (CENTER_Y + v.y < CENTER_Y) {
      ctx.arc(CENTER_X, CENTER_Y, 10, 0, 2 * Math.PI - angle, true);
    } else {
      ctx.arc(CENTER_X, CENTER_Y, 10, 0, angle, true);
    }
    ctx.stroke();

    $('#info').text('ϑ = ' + radiansToDegrees(correctedRadiansValue(angle, v.y)));

  });

}());
	<!DOCTYPE html>
	<html>
	<head>
	<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<meta charset=utf-8 />
	<title>Angle</title>
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	</head>
	<body>
	<canvas id="canvas"></canvas>
	<p/>
	<span id="info"></span>

	<script src="angle.js"></script>
	</body>
	</html>
	(function () {

	var ctx = document.getElementById('canvas').getContext('2d');

	var WIDTH = $("#canvas").width();
	var HEIGHT = $("#canvas").height();
	var CENTER_Y = HEIGHT / 2;
	var CENTER_X = WIDTH / 2;
	var RADIUS = 50;

	var clear = function() {
	ctx.clearRect(0, 0, WIDTH, HEIGHT);
	};

	var drawLine = function(x, y) {

	ctx.beginPath();
	ctx.moveTo(CENTER_X, CENTER_Y);
	ctx.lineTo(x, y);
	ctx.closePath();
	ctx.stroke();

	};

	var drawBackground = (function bg() {

	ctx.strokeRect(0.5, 0.5, 299, 149);

	ctx.beginPath();
	ctx.arc(150, 75, RADIUS, 0, 2 * Math.PI);
	ctx.moveTo(100, 75);
	ctx.lineTo(200, 75);
	ctx.moveTo(150, 25);
	ctx.lineTo(150, 125);
	ctx.closePath();

	ctx.stroke();

	return bg;

	}());

	var normalVectorEast = {
	x: 1,
	y: 0
	};

	var centerPoint = {
	x: CENTER_X,
	y: CENTER_Y
	};

	var getVectorFromPoints = function(p1, p2) {
	return {
	x: p2.x - p1.x,
	y: p2.y - p1.y
	};
	};

	var getVectorMagnitude = function(v) {
	return Math.sqrt(v.x * v.x + v.y * v.y);
	};

	var getNormalizedVector = function(v) {
	var magnitude = getVectorMagnitude(v);
	return {
	x: v.x / magnitude,
	y: v.y / magnitude
	};
	};

	var getScaledVector = function(v, n) {
	return {
	x: v.x * n,
	y: v.y * n
	};
	};

	var dotProduct = function(v1, v2) {
	return v1.x * v2.x + v1.y * v2.y;
	};

	var correctedRadiansValue = function(radiansValue, y) {
	return CENTER_Y + y < CENTER_Y ? radiansValue : Math.PI + (Math.PI - radiansValue);
	};

	var radiansToDegrees = function(radiansValue) {
	return radiansValue * 180 / Math.PI;
	};

	$('#canvas').mousemove(function(e){

	var coords = {};
	coords.x = e.clientX - $(this).offset().left;
	coords.y = e.clientY - $(this).offset().top;

	clear();
	drawBackground();

	var v = getVectorFromPoints(centerPoint, {x: coords.x, y: coords.y});
	v = getNormalizedVector(v);
	var angle = Math.acos(dotProduct(normalVectorEast, getNormalizedVector(v)));
	v = getScaledVector(v, RADIUS);

	drawLine(CENTER_X + v.x, CENTER_Y + v.y);

	if(angle === 0) {
	// don't draw an arc
	} else if (CENTER_Y + v.y < CENTER_Y) {
	ctx.arc(CENTER_X, CENTER_Y, 10, 0, 2 * Math.PI - angle, true);
	} else {
	ctx.arc(CENTER_X, CENTER_Y, 10, 0, angle, true);
	}
	ctx.stroke();

	$('#info').text('ϑ = ' + radiansToDegrees(correctedRadiansValue(angle, v.y)));

	});

	}());