Pêndulo

Um pêndulo, sem atrito, com um ângulo inicial ang0 e uma corda de comprimento corda. As equações do movimento foram desenvolvidas apenas com o objetivo de determinar as coordenadas x e y do pêndulo, que seguem uma função sinusoidal esquematizada no rascunho seguinte.

O movimento do pêndulo é discretizado com um tempo de amostragem fixo de 40ms. A variável auxiliar Z define os momentos da amostragem. O valor de cos(Z) indica a posição x do pêndulo. O ângulo atual do pêndulo, ang, é dado por asin(x/corda). O y do pêndulo é dado por corda*cos(ang).

Visualização:

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

var corda = 300;// comprimento da corda
var ang0=20;	// ângulo inicial

var xc = 300;	// Ponto onde a corda está presa
var yc = 35;

var x;	// coordenadas do pêndulo
var y;
var ang;

var d = corda*Math.sin(ang0*Math.PI/180);	// x máximo

// nº de posições intermédias por onde passa o pêndulo entre os extremos
var numPos = 30;
var incAng = Math.PI/numPos;	// incremento angular (para angZ) de cada vez que o relógio dispara
var angZ = 0;

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 relogio = 40;
	ang = ang0;
	x = corda * Math.sin(ang*Math.PI/180) + xc;
	y = corda * Math.cos(ang*Math.PI/180) + yc;
	setInterval("anima()", relogio);
}

function anima() {
	angZ += incAng;
	var z = d * Math.cos(angZ);
	x = z;
	ang = Math.asin(x/corda);
	y = corda * Math.cos(ang);

	x += xc;
	y += yc;

	// Desenhar
	ctx.fillStyle = "black";
	ctx.beginPath();
	ctx.rect(0,0,larg,alt);
	ctx.fill();

	ctx.lineWidth = 3;
	poeLinha(xc,yc,x,y,"#8080FF");
		
	ctx.fillStyle = "#FFFF20";
	ctx.beginPath();
	ctx.arc(x,y,16,0,2*Math.PI);
	ctx.fill();

}

function poeLinha(x1,y1,x2,y2,cor) {
	ctx.strokeStyle = cor;
	ctx.beginPath();
	ctx.moveTo(x1,y1);
	ctx.lineTo(x2,y2);
	ctx.stroke();
}


</script>


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

Deixe um comentário Cancelar resposta