artlung/cursor-position.html

## cursor-position.html
<html>
<head>
<title>Cursor Position Radius</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
#square {
	height: 400px;
	width: 400px;
	background-color: #000;
	margin: auto;
	position: absolute;
	overflow: hidden;
	top: 10px;
	left: 300px;
}
#log {
	height: 100%;
	width: 200px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #ccc;
	color: #000;
	font-size: small;
	overflow: auto;
}
#debug {
	height: 100%;
	width: 200px;
	position: absolute;
	top: 600px;
	left: 800px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {

	var centerTop = a = $('#square').height() / 2;
	var centerLeft = $('#square').width() / 2;
	var squareTop = $('#square').offset().top;
	var squareLeft = $('#square').offset().left;

	// draw a center point
	$('<div />').css({
		width: '1px', height: '1px',backgroundColor: '#fff',overflow:'hidden',position:'absolute',top: centerTop,left: centerLeft
	}).attr('id', 'center').appendTo('#square');
	$('body').bind('mousemove', function(event) {
		var mouseLeft = (event.pageX - squareLeft);
		var mouseTop = (event.pageY - squareTop);
		var correctTop = (centerTop - mouseTop);
		var correctLeft = (mouseLeft - centerLeft);
		var rawAngle = (180/Math.PI) * Math.atan2(correctTop,correctLeft);
		var intAngle = parseInt(rawAngle, 10);
		var msg = '';
		drawAvatar(centerLeft, centerTop, mouseLeft , mouseTop, intAngle);
		msg += (mouseTop >= centerTop) ? ' lower ' : ' upper ';
		msg += (mouseLeft >= centerLeft) ? ' right ' : ' left ';
		msg += intAngle;
		$('#log').prepend('<div>' + msg + '</div>');
	});

	// create a dot along a radius for every degree (not necessary for the mousemove)
	var sensitivity = (2 * Math.PI) / 360 * 18;
	var radius = ($('#square').height() / 2) - 10;
	var degrees = 0;
	for (var t = 0; t<= (2 * Math.PI); t+=sensitivity) {
		var x = radius * Math.cos(t) + a;
		var y = radius * Math.sin(t) + a;
		$('<div />').css({
			width: '1px', height: '1px',backgroundColor: '#ccc',overflow:'hidden',position:'absolute',top: x,left: y
		}).attr('id', 'cursor-' + t).appendTo('#square');
	}

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

	ctx.fillStyle = "rgb(238,232,170)";
	ctx.strokeStyle = "rgb(238,232,170)";

	function drawAvatar(centerLeft, centerTop, mouseLeft , mouseTop, intAngle) {
		ctx.clearRect(0,0,400,400);
		ctx.beginPath();

		if (intAngle < 0) {
			intAngle = intAngle + 360;
		}

		for (var i = intAngle-5; i < intAngle+5; i++) {
			// var
			var t = ((i + 90) * Math.PI / 180);
			var xx = parseInt(radius * Math.cos(t) + centerTop, 10);
			var yy = parseInt(radius * Math.sin(t) + centerLeft, 10);
			ctx.lineTo(yy, xx);
		}
		ctx.closePath();
		ctx.stroke();
	}


});
</script>
</head>
<body>

<div id="square" width="400" height="400"><canvas height="400" width="400" id="gameBoard"></canvas></div>
<div id="log"></div>
<div id="debug"></div>
</body>
</html>
	<html>
	<head>
	<title>Cursor Position Radius</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
	<style type="text/css" media="screen">
	#square {
	height: 400px;
	width: 400px;
	background-color: #000;
	margin: auto;
	position: absolute;
	overflow: hidden;
	top: 10px;
	left: 300px;
	}
	#log {
	height: 100%;
	width: 200px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #ccc;
	color: #000;
	font-size: small;
	overflow: auto;
	}
	#debug {
	height: 100%;
	width: 200px;
	position: absolute;
	top: 600px;
	left: 800px;
	}
	</style>
	<script type="text/javascript">
	$(document).ready(function() {

	var centerTop = a = $('#square').height() / 2;
	var centerLeft = $('#square').width() / 2;
	var squareTop = $('#square').offset().top;
	var squareLeft = $('#square').offset().left;

	// draw a center point
	$('<div />').css({
	width: '1px', height: '1px',backgroundColor: '#fff',overflow:'hidden',position:'absolute',top: centerTop,left: centerLeft
	}).attr('id', 'center').appendTo('#square');
	$('body').bind('mousemove', function(event) {
	var mouseLeft = (event.pageX - squareLeft);
	var mouseTop = (event.pageY - squareTop);
	var correctTop = (centerTop - mouseTop);
	var correctLeft = (mouseLeft - centerLeft);
	var rawAngle = (180/Math.PI) * Math.atan2(correctTop,correctLeft);
	var intAngle = parseInt(rawAngle, 10);
	var msg = '';
	drawAvatar(centerLeft, centerTop, mouseLeft , mouseTop, intAngle);
	msg += (mouseTop >= centerTop) ? ' lower ' : ' upper ';
	msg += (mouseLeft >= centerLeft) ? ' right ' : ' left ';
	msg += intAngle;
	$('#log').prepend('<div>' + msg + '</div>');
	});

	// create a dot along a radius for every degree (not necessary for the mousemove)
	var sensitivity = (2 * Math.PI) / 360 * 18;
	var radius = ($('#square').height() / 2) - 10;
	var degrees = 0;
	for (var t = 0; t<= (2 * Math.PI); t+=sensitivity) {
	var x = radius * Math.cos(t) + a;
	var y = radius * Math.sin(t) + a;
	$('<div />').css({
	width: '1px', height: '1px',backgroundColor: '#ccc',overflow:'hidden',position:'absolute',top: x,left: y
	}).attr('id', 'cursor-' + t).appendTo('#square');
	}

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

	ctx.fillStyle = "rgb(238,232,170)";
	ctx.strokeStyle = "rgb(238,232,170)";

	function drawAvatar(centerLeft, centerTop, mouseLeft , mouseTop, intAngle) {
	ctx.clearRect(0,0,400,400);
	ctx.beginPath();

	if (intAngle < 0) {
	intAngle = intAngle + 360;
	}

	for (var i = intAngle-5; i < intAngle+5; i++) {
	// var
	var t = ((i + 90) * Math.PI / 180);
	var xx = parseInt(radius * Math.cos(t) + centerTop, 10);
	var yy = parseInt(radius * Math.sin(t) + centerLeft, 10);
	ctx.lineTo(yy, xx);
	}
	ctx.closePath();
	ctx.stroke();
	}


	});
	</script>
	</head>
	<body>

	<div id="square" width="400" height="400"><canvas height="400" width="400" id="gameBoard"></canvas></div>
	<div id="log"></div>
	<div id="debug"></div>
	</body>
	</html>