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>
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>
