Blog / Home
About
Media Gallery

Welcome
to
Thronic.com

ժʝ_

2D Rotation


Click the '@' to begin.
\---@---\



This script uses sine and cosine to perform a 2D rotation. These are trigonometric functions to measure the ratio between the hypotenus and the adjacent, or opposed line from θ. sine and cosine can be calculated in 2 ways, either dividing lines with hypotenus, or through feeding a calculating function the θ. In this script the rotation is made around the 'would be' z-axis in a 3D environment. As we keep looping the angle θ value in radian up to 2π(6.28)(360°), sine and cosine relationship/ratio values will keep changing accordingly.

When you want to now the exact length of the θ's opposite line, you multiply hypotenus with its sine, in our case the coordinate Y. Multiply hypotenus with cosinus, and you get the actual length of the adjacent line as well, in our case the coordinate X. Hypotenus becomes the range(line) from θ to the coordinates X/Y, ie. the radius.

JavaScript
var center_x = 225;
var center_y = 295;
var x = 445;
var y = 295;
var angle = 0.03;
var speed = 50;
var x_radius = 200;
var y_radius = 200;

function start() {
	// Math.cos and Math.sin in javascript takes its value in radian, not degrees
	x = Math.round(center_x + Math.cos(angle)*x_radius);
	y = Math.round(center_y + Math.sin(angle)*y_radius);

	// Vis verdier
	document.getElementById('container').innerHTML = ''+
		'Radian = '+Math.round(100*angle)/100+'<br>'+
		'x = '+x+'<br>'+
		'y = '+y+'<br>'+
		'Speed (ms) = '+speed+'<br>'+
		'X-Radius = '+x_radius+'<br>'+
		'Y-Radius = '+y_radius+'<br>';
	
	// Gi satellitt nye koordinater
	document.getElementById('satellite').style.top = y+'px';
	document.getElementById('satellite').style.left = x+'px';
	
	// 360 grader/degree = 2PI radian
	if (angle >= 6.28) { angle = 0.01; } else { angle += 0.03; }
	setTimeout('start()',speed);
}
function Speed(speedVal) {
	// Less is faster (milliseconds delay)
	if (speed > 0) { 
		speed += speedVal;
	} else if (speed == 0 && speedVal > 0) {
		speed += speedVal;
	} else { 
		speed = 0; 
	}	
}
function XRadius(newVal) {
	if (x_radius > 0) { 
		x_radius += newVal;
	} else if (x_radius == 0 && newVal > 0) {
		x_radius += newVal;
	} else { 
		x_radius = 0; 
	}
}
function YRadius(newVal) {
	if (y_radius > 0) { 
		y_radius += newVal;
	} else if (y_radius == 0 && newVal > 0) {
		y_radius += newVal;
	} else { 
		y_radius = 0; 
	}
}



Original Post: Jan 26th, '22 12:06 CET.
Updated: Jan 27th, '22 15:51 CET.

JS Concept
π