Logo
Filmmaskiner.dk

Track and calc angle/radius


Angle:

Radius:

Cursor xpos:

Cursor ypos:

Cursor xpos:

Cursor ypos:

Canvas

<canvas id="ctx" width="350" height="350" style="border: 1px solid #ccc; position: relative;"></canvas>

Mousemouse in javascript

var mouseX, mouseY;

document.addEventListener("mousemove", function(e){
	mouseX = e.pageX;
	mouseY = e.pageY;
	document.getElementById("curx").innerHTML = mouseX;
	document.getElementById("cury").innerHTML = mouseY;
});

Mousemove in jQuery

var mouseX, mouseY;

$(document).mousemove(function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
	$("#curx").text(mouseX);
	$("#cury").text(mouseY);
}).mouseover();

Functions (calcAngle, calcRadius, sequence loop)

var frameno = 0;
var fps = 100;

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

function calcAngle(xpos1, ypos1, xpos2, ypos2){
	// centerx, centery + mouseX, mouseY

	var deltax = ypos2 - ypos1;
	var deltay = xpos2 - xpos1;
	var angle = (Math.atan2(-deltay, deltax) + Math.PI/2);

	if(angle < 0){
		angle = 2 * Math.PI + (angle);
	}

	return angle;
}

function calcRadius(xpos1, ypos1, xpos2, ypos2){
	// centerx, centery + mouseX, mouseY

	var deltax = ypos2 - ypos1;
	var deltay = xpos2 - xpos1;

	var radius = Math.sqrt(Math.pow(deltax, 2) + Math.pow(deltay, 2));

	return radius;
}

function resetCanvas(){
	ctx.clearRect(0, 0, canvas.width, canvas.height);
}


var xpos1, ypos1, xpos2, ypos2, angle, radius;


function sequence1() {
	setTimeout(function () {
		frameno = frameno + 1;

		resetCanvas();

		xpos1 = 175;
		ypos1 = 175;
		xpos2 = mouseX - canvas.offsetLeft;
		ypos2 = mouseY - canvas.offsetTop;
		angle = calcAngle(xpos1, ypos1, xpos2, ypos2);
		radius = calcRadius(xpos1, ypos1, xpos2, ypos2);

		/* WRITE TO DIVS */
		document.getElementById("angle").innerHTML = angle + " (degree: "+(angle*180/Math.PI)+")";
		document.getElementById("radius").innerHTML = radius;
		document.getElementById("curx2").innerHTML = xpos2;
		document.getElementById("cury2").innerHTML = ypos2;

		/* MAKE CENTER CIRCLE */
		ctx.beginPath();
		ctx.arc(xpos1, ypos1, 10, 0, 2*Math.PI, true);
		ctx.fill();

		/* MAKE POINTER LINE */
		ctx.beginPath();
		ctx.moveTo(xpos1, ypos1);
		ctx.lineTo(xpos1 + 20*Math.cos(angle), ypos1 + 20*Math.sin(angle));
		ctx.stroke();

		/* MAKE CURSOR CIRCLE */
		ctx.beginPath();
		ctx.arc(xpos2, ypos2, 25, 0, 2*Math.PI, true);
		ctx.fill();

	        sequence1();

	}, fps);
}

sequence1();

Creative Commons License
Filmmaskiner.dk by Kasper Lauritzen is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
(unless other is noted)