Blog: Proyección parabólica

Aprovechando que viene el nevado invierno en el hemisferio norte, he creado un prototipo temático a petición de uno de los seguidores del blog que me gustaría compartir con todos ustedes. Mark solicitó ayuda con la proyección de un tiro parabólico, y el resultado de ello ha sido cargado en el siguiente fiddle*: http://jsfiddle.net/daPhyre/on4ay7mk/

En esta ocasión no explicaré a detalle cada paso dentro del código, estoy seguro que con todos los conocimientos que han aprendido anteriormente a lo largo del blog, podrán comprender la mayor parte del código. Sin embargo, si hay algunos puntos que me gustaría resaltar de él.

En sí, el movimiento parabólico del objeto debe ser familiar para ustedes, pues la fuerza la hemos aplicado en el juego de plataformas, y la fórmula para convertir de ángulo y rapidez a vectores en X y Y la aprendimos en el seguidor de ratón. Simplemente aplicamos la función para obtener los vectores, y en cada turno desplazamos las bolas de nieve existentes, aplicando sobre su vector Y la fuerza de gravedad correspondiente:

        for (var i = 0, l = snowballs.length; i < l; i++) {
            snowballs[i].x += snowballs[i].vx * deltaTime;
            snowballs[i].y += snowballs[i].vy * deltaTime;
            snowballs[i].vy += gravity * deltaTime;
        }

Ahora, el verdadero reto es poder dibujar la proyección de dicha parábola. Para ello una variable booleana "moving" me indica cuando el ratón acaba de ser movido, y en ese momento recalculo el ángulo α y la posición de los círculos que señalan la proyección de la parábola.

En el presente ejemplo calculo 5 posiciones en el futuro de la parábola, cada una a un tercio de segundo de la posición anterior, valor que guardo en una variable "time". Posteriormente calculo la posición de la proyección dado ese valor de tiempo. Calcular su posición en X no es problema, pues utilizo directamente la misma formula con la que calculo su fuerza inicial. Sin embargo, en el eje Y debo sumar también la influencia de la gravedad pasado ese tiempo. Para ello, utilizo la fórmula "gravedad por tiempo al cuadrado sobre dos", que al final se ve aplicada en el código de esta forma:

            for (var i = 0; i < 5; i++) {
                var time = (i + 1) / 3;
                var x = player.x + Math.cos(alpha) * cannonSpeed * time;
                var y = player.y + Math.sin(alpha) * cannonSpeed * time + gravity * time * time / 2;
                track.push(new Circle(x, y, 2));
            }

Y es de esta forma que podemos obtener la proyección de una parábola. Espero este ejemplo les sirva a todos ustedes cuando desarrollen un juego que ocupe esta clase de proyección. ¡Mucha suerte en sus proyectos! ¡Felices fiestas decembrinas! ¡Y felices códigos!