kevinfjbecker · July 29, 2011 10:56
diff --git a/angle.html b/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>
diff --git a/angle.js b/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)));

	});

	}());