Pues bien, el problema es que estoy intentando hacer la trayectoria que seguiría un proyectil dependiendo de la velocidad con la que se lance, y según yo todo está bien implementado.
Según yo, el único problema es a la hora de calcular la velocidad inicial en x y en y, que es donde utilizo el seno y coseno, y testeandolo varias veces me di cuenta de que no retorna los valores que tendría que retornar, y para demostrarlo escribí este código:
Código HTML:
<html>
<head></head>
<body>
<canvas id="a" style="position:absolute;top:20;left:0;"></canvas>
<input type="range" value="0" min="0" max="360" step="1" id="angle" onchange="T()" style="position:absolute;top:0;left:0;"></input>
<div id="log" style="position:absolute;top:20;left:500;"></div>
<script type="text/javascript">
//inicializar canvas
var canvas = document.getElementById('a');
var ctx;
if (canvas && canvas.getContext) {
ctx = canvas.getContext('2d');
canvas.height = 500;
canvas.width = 500;
};
function T(){
//punto medio del circulo
var x=250;
var y=250;
var radius=250;
//angulo
var angle=parseInt(document.getElementById("angle").value);
//fondo negro
ctx.fillStyle="rgb(0,0,0)";
ctx.beginPath();
ctx.rect(0,0,500,500);
ctx.closePath();
ctx.fill();
//angulo 0
ctx.strokeStyle="hsl("+angle+",100%,50%)";
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x+radius,y);
ctx.closePath();
ctx.stroke();
//arco del circulo dependiendo del angulo
ctx.strokeStyle="hsl("+angle+",100%,50%)";
ctx.arc(x,y,radius,0,-Math.PI*(angle/180),true);
ctx.stroke();
//linea que se supone que deberia ir del centro a el ángulo en el que va el arco
ctx.strokeStyle="hsl("+angle+",100%,50%)";
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x+(Math.cos(angle)*radius),y+(Math.sin(angle)*radius));
ctx.closePath();
ctx.stroke();
//log
document.getElementById("log").innerHTML="Angulo: "+angle+"<br>Sin("+angle+"): "+Math.sin(angle)+"<br>Cos("+angle+"): "+Math.cos(angle)+"<br>Tan("+angle+"): "+Math.tan(angle);
};
</script>
</body>
</html> lo probé en chrome, safari y firefox, y en todos pasa lo mismo, bueno solo en firefox el valor se cambia manual.
Por ejemplo, metiendo un ángulo de 180°, me tendría que dar seno=0, coseno=-1 y tangente=0, pero me da
Sin(180): -0.8011526357338304
Cos(180): -0.5984600690578581
Tan(180): 1.3386902103511544
Y no se en que esté mal, según yo si está bien implementado, quizá sea algo relacionado con el parseInt, o no se, pero ya estoy desesperado u.u
Ah, y por si lo quieren probar, el codigo del proyectil es
Código HTML:
<html>
<head>
</head>
<body onload="fondo()">
<style>
div{
color:#000;
position:absolute;
}
</style>
<div style="top:0px;left:0px;">Zoom Y </div><input type="range" min="100" max="3000" step="1" id="zoomy" style="position:absolute;top:0px;left:50px;" value="500" onchange="fondo()"></input>
<div style="top:0px;left:200px;">Zoom X </div><input type="range" min="100" max="3000" step="1" id="zoomx" style="position:absolute;top:0px;left:250px;" value="500" onchange="fondo()"></input>
<div style="top:0px;left:400px;">Vel (m/s)</div><input type="range" min="1" max="300" step="1" id="vel" style="position:absolute;top:0px;left:470px;" value="10" onchange="fondo()"></input>
<div style="top:0px;left:600px;">Angulo (°)</div><input type="range" min="0" max="180" step="1" id="angle" style="position:absolute;top:0px;left:670px;" value="45" onchange="fondo()"></input>
<canvas id="a" style="position:absolute;top:30;left:0;"></canvas>
<script type="text/javascript">
//Globales
//constantes
//canvas
var canvas = document.getElementById('a');
var ctx;
if (canvas && canvas.getContext) {
c = canvas.getContext('2d');
width=canvas.width=window.innerWidth;
height=canvas.height=window.innerHeight;
};
//\canvas
var G=-9.8;
var bounce=.8;
//\constantes
//variables
var cont=1;
var x;
var y;
var vel;
var angle;
var mouse = {x:0, y:0};
var zoomx;
var zoomy;
var ax;
var ay;
//\variables
//\Globales
//funcion que dibuja el fondo, y llama al loop de la animacion
function fondo(){
//variables
cont=1;
vel=document.getElementById("vel").value;
angle=document.getElementById("angle").value;
x=width/2;
y=height/2;
ax=(Math.cos(parseInt(angle)))*parseInt(vel);
ay=(Math.sin(parseInt(angle)))*parseInt(vel);
zoomy = parseInt(document.getElementById("zoomy").value)/500;
zoomx = parseInt(document.getElementById("zoomx").value)/500;
//\variables
document.getElementById("logaltura").innerHTML="Altura Máxima: "+(G*Math.pow(ay/G,2)/-2).toFixed(2);//log
//fondo
c.fillStyle="rgb(0,0,0)";
c.beginPath();
c.rect(0,0,width,height);
c.closePath();
c.fill();
//grid
c.strokeStyle="rgb(255,255,255)";
c.beginPath();
c.moveTo(width/2,0);
c.lineTo(width/2,height);
c.moveTo(0,height/2);
c.lineTo(width,height/2);
c.closePath();
c.stroke();
//horizontal
for(var i=width/20; i<=width/2; i+=width/20){
c.strokeStyle="rgb(255,255,255)";
c.beginPath();
c.moveTo(width/2-i,height/2-10);
c.lineTo(width/2-i,height/2+10);
c.moveTo(width/2+i,height/2-10);
c.lineTo(width/2+i,height/2+10);
c.closePath();
c.stroke();
c.fillStyle="rgb(255,255,255)";
c.font="10px Arial";
c.fillText((-i/zoomx).toFixed(2),width/2-i,height/2+10);
c.fillText((i/zoomx).toFixed(2),width/2+i,height/2+10);
}
//\horizontal
//vertical
for(var i=height/20; i<=height/2; i+=height/20){
c.strokeStyle="rgb(255,255,255)";
c.beginPath();
c.moveTo(width/2-10,height/2-i);
c.lineTo(width/2+10,height/2-i);
c.moveTo(width/2-10,height/2+i);
c.lineTo(width/2+10,height/2+i);
c.closePath();
c.stroke();
c.fillStyle="rgb(255,255,255)";
c.font="10px Arial";
c.fillText((i/zoomy).toFixed(2),width/2-40,height/2-i+4);
c.fillText((-i/zoomy).toFixed(2),width/2-40,height/2+i+4);
}
//\vertical
//\grid
//\fondo
canvas.addEventListener('mousemove', MouseMove, false);
setInterval( TimeUpdate, 1000/3600 );
}
function TimeUpdate(){
if(cont){//continua solo si el objeto está dentro de las dimensiones horizontales de la pantalla
ay>=0?c.strokeStyle="hsl("+ay%360+",100%,50%)":c.strokeStyle="hsl("+(-ay%360)+",100%,50%)"; //color dependiendo de la velocidad en el eje y
c.beginPath();
c.moveTo(x,height-y);
//inicia aceleracion
x*=100;
x+=ax/zoomy*zoomx;
x/=100;
ay+=(G/100)/zoomy;
y*=100;
y+=ay;
y/=100;
//fin aceleracion
c.lineTo(x,height-y);
c.closePath();
c.stroke();
if(y<=height/2){ay*=-bounce; y=height/2;};//rebote
document.getElementById("logy").innerHTML="Velocidad actual en Y: "+ay; //log
document.getElementById("logx").innerHTML="Velocidad actual en X: "+ax; //log
document.getElementById("logan").style.top=60; //log
document.getElementById("logan").style.left=30; //log
document.getElementById("logan").innerHTML="Angulo: "+angle; //log
document.getElementById("logvel").style.top=30; //log
document.getElementById("logvel").style.left=30; //log
document.getElementById("logvel").innerHTML="Velocidad: "+vel; //log
document.getElementById("loginix").style.top=90; //log
document.getElementById("loginix").style.left=30; //log
document.getElementById("loginix").innerHTML="Velocidad inicial x: "+(Math.cos(parseInt(angle)))*parseInt(vel); //log
document.getElementById("loginiy").style.top=120; //log
document.getElementById("loginiy").style.left=30; //log
document.getElementById("loginiy").innerHTML="Velocidad inicial y: "+(Math.sin(parseInt(angle)))*parseInt(vel); //log
if(x<=0||x>=width){//si se sale de las dimensiones de la pantalla deja de ejecutarse
cont=0;
}
}
};
function MouseMove(e) {
mouse.x = e.layerX;
mouse.y = e.layerY;
document.getElementById("logpos").style.top=mouse.y-10; //log
document.getElementById("logpos").style.left=mouse.x+10; //log
document.getElementById("logpos").innerHTML="X: "+(-(width/2-mouse.x)/zoomx)+"<br>Y: "+((height/2-mouse.y)/zoomy); //log
}
</script>
<div id="logaltura" style="left:30px;top:150px;color:#fff"></div>
<div id="logy" style="left:30px;top:210px;color:#fff"></div>
<div id="logx" style="left:30px;top:180px;color:#fff"></div>
<div id="logpos" style="color:#fff"></div>
<div id="logan" style="color:#fff"></div>
<div id="logvel" style="color:#fff"></div>
<div id="loginix" style="color:#fff"></div>
<div id="loginiy" style="color:#fff"></div>
</body>
</html> también lo probé en los tres navegadores :D