Sol, Terra e Lua

O movimento do sistema Sol-Terra-Lua apresentado abaixo é uma simplificação circular do movimento elítico real destes astros. Neste caso, temos um movimento circular simples da Terra em torno do Sol, e um movimento circular composto da Lua em torno da Terra. A animação não foi feita à escala.

Em primeiro lugar é calculado o movimento da Terra, ou seja, são calculadas as coordenadas x e y do movimento circular da Terra, às quais são adicionadas as coordenadas fixas da posição do Sol.

Depois é calculado o movimento da Lua: são calculadas as coordenadas x e y do movimento circular da Lua, às quais são adicionadas as coordenadas da posição da Terra.

Visualização:

<!DOCTYPE html>
<html>
<head>
<title>Gráfico</title>
<meta charset="iso-8859-1">
<script type="text/javascript">

var r1 = 130;	// raio da terra
var p1 = 10;	// perído da terra em seg.
var r2 = 40;	// raio da lua
var p2 = 3;	// perído da lua em seg.

var ang1=0, ang2=0;	// ângulos da terra e da lua no momento atual
var delta1, delta2;	// incrementos nos ângulos da terra e da lua em
			// cada chamada da função anima()

var x0 = 300;	// coordenadas do sol - fixas
var y0 = 200;

var ctx;

var larg, alt;

function init() {
	var c = document.getElementById("cvs");
	ctx = c.getContext("2d");
	larg = eval( c.getAttribute("width") );
	alt = eval( c.getAttribute("height") );
	var periodoRelogio = 40;
	setInterval("anima()", periodoRelogio);
	delta1 = (360*periodoRelogio)/(1000*p1);
	delta2 = (360*periodoRelogio)/(1000*p2);
}

function anima() {
	// Terra
	ang1 += delta1;
	x1 = r1 * Math.cos(ang1*Math.PI/180) + x0;
	y1 = r1 * Math.sin(ang1*Math.PI/180) + y0;
	// Lua
	ang2 += delta2;
	x2 = r2 * Math.cos(ang2*Math.PI/180) + x1;
	y2 = r2 * Math.sin(ang2*Math.PI/180) + y1;
	// Desenhar
	ctx.fillStyle = "black";
	ctx.beginPath();
	ctx.rect(0,0,larg,alt);
	ctx.fill();

	ctx.fillStyle = "#FFFF20";
	ctx.beginPath();
	ctx.arc(x0,y0,20,0,2*Math.PI);
	ctx.fill();
		
	ctx.fillStyle = "#0000FF";
	ctx.beginPath();
	ctx.arc(x1,y1,10,0,2*Math.PI);
	ctx.fill();
		
	ctx.fillStyle = "white";
	ctx.beginPath();
	ctx.arc(x2,y2,5,0,2*Math.PI);
	ctx.fill();
		
}

</script>


</head>
<body onload="init();">
<canvas width="600" height="400" id="cvs"></canvas>
</body>
</html>

Deixe um comentário Cancelar resposta