Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ActionScript

Vectores euclidianos en Flash

Read Time: 19 mins
This post is part of a series called You Do The Math.
Playing Around with Elastic Collisions
Gravity in Action

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Dos veces al mes, revisamos algunas de las publicaciones favoritas de nuestros lectores de la historia de Activetuts +. El tutorial retroactivo de esta semana, publicado por primera vez en abril, es una guía de vectores euclidianos: qué son, por qué los usarían y cómo implementarlos en Flash con AS3.

Los vectores euclidianos son objetos en geometría con ciertas propiedades que son muy útiles para desarrollar juegos. Se pueden ver como puntos, pero también tienen una magnitud y una dirección. Se representan como flechas que van desde el punto inicial hasta el punto final, y así es como las dibujaremos en este artículo.

Los vectores euclidianos se utilizan comúnmente en matemáticas y física para muchas cosas: pueden representar la velocidad, la aceleración y las fuerzas en física, o ayudar a demostrar muchos teoremas importantes en matemáticas. En este tutorial, aprenderá sobre vectores euclidianos y construirá una clase que puede usar en sus propios proyectos Flash.

Tenga en cuenta que los vectores euclidianos son diferentes a la clase Vector de ActionScript y también diferentes al dibujo vectorial.

Los vectores se pueden usar en el entorno Flash para ayudarlo a lograr tareas complejas que de otra manera requerirían mucho esfuerzo si se realizaran sin ellas. En este artículo aprenderás a usarlos en Flash, y aprenderás muchos trucos geniales con vectores.


Paso 1: Coordenadas cartesianas y coordenadas del flash

Antes de saltar a los vectores, introduzcamos el sistema de coordenadas de Flash. Probablemente esté familiarizado con el sistema de coordenadas cartesianas (incluso si no lo conoce por su nombre):

Flash math vectors in AS3

El sistema de Flash es muy similar. La única diferencia es que el eje y está al revés:

Flash math vectors in AS3

Cuando comenzamos a trabajar con vectores en flash, debemos recordar eso. Sin embargo, son buenas noticias: este sistema diferente no hace mucha diferencia. Trabajar con vectores será básicamente como trabajar con vectores en el sistema cartesiano.


Paso 2: definir un vector

Para el propósito de este tutorial, definiremos y trabajaremos con los puntos iniciales de todos los vectores como el punto de registro de la etapa, tal como se usan comúnmente en las matemáticas. Un vector se definirá como un punto común, pero tendrá propiedades de magnitud y ángulo. Eche un vistazo a algunos vectores de ejemplo definidos en el escenario:

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Como puede ver, un vector está representado por una flecha, y cada vector tiene una cierta longitud (o magnitud) y puntos a lo largo de cierto ángulo. La cola de cada vector está en el punto de registro (0, 0).

Crearemos una clase EuclideanVector simple para este tutorial, usando la clase Point para mantener las coordenadas del vector. Vamos a crear la clase básica de vectores ahora:

Durante este tutorial, hablaremos sobre el sentido y la dirección de un vector. Tenga en cuenta que la dirección solo define una línea que "contiene" el vector. El sentido es lo que define de qué manera el vector señala a lo largo de esta línea.


Paso 3: inverso de un vector

En este tutorial usaremos la expresión "inverso de un vector". El inverso de un vector es otro vector con la misma magnitud y dirección, pero un sentido contrario. Eso se traduce en un vector con la señal opuesta a las coordenadas del primer vector. Entonces un vector con un punto final de (x, y) tendría un vector inverso con un punto final de (-x, -y).

Flash math vectors in AS3

Agreguemos una función a nuestra clase EuclideanVector para devolver el vector inverso:


Paso 4: operaciones básicas Adición

Ahora que hemos aprendido cómo definir un vector, aprendamos cómo agregar dos vectores: es tan simple como agregar sus coordenadas por separado. Mira esta imagen:

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Si observa en la imagen, el resultado de la adición de dos vectores es otro vector, y puede ver que sus coordenadas son la suma de las coordenadas de los otros dos vectores. En el código, se vería así:

Entonces podemos decir que:


Paso 5: operaciones básicas Resta

La resta funciona casi igual que la suma, pero en su lugar agregaremos el inverso del segundo vector al primer vector.

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Ya se sabe cómo sumar dos vectores, así que aquí está el código para restar:

Este código es extremadamente útil para obtener un vector que va del punto de un vector al punto de otro. Mira nuevamente la imagen y verás que esto es verdad. Se usará mucho en los ejemplos posteriores.


Paso 6: operaciones básicas Multiplicación por un número

La multiplicación entre un vector y un número (los números regulares se conocen como "escalares" en matemáticas vectoriales) da como resultado un vector que ha tenido una magnitud multiplicada por este número, pero apuntando en la misma dirección; está "estirado" si el escalar es mayor que 1, y aplastado si el escalar está entre 0 y 1. El sentido del nuevo vector será el mismo que el vector original si el escalar es positivo, o el opuesto si es negativo. Básicamente, este número "escala" el vector. Mira la imagen:

Flash math vectors in AS3

En el código, solo multiplicamos las coordenadas de un vector por el número, que luego escalará el vector:


Paso 7: Obtener la Magnitud de un Vector

Para obtener la magnitud de un vector, utilizaremos el teorema de Pitágoras. Si olvidó lo que es, aquí hay un repaso rápido:

Flash math vectors in AS3

(Más información aquí)

El código es muy simple:

También debe eliminar la línea public var magnitude:Number, ya que esto es lo que usaremos a partir de ahora.

La magnitud de un vector siempre será positiva, ya que es la raíz cuadrada de la suma de dos números positivos.


Paso 8: obtener el ángulo de un vector

El ángulo de un vector es el ángulo entre el eje xy la línea de dirección del vector. El ángulo se mide desde el eje x y girando en sentido antihorario hasta la línea de dirección en el sistema cartesiano:

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Sin embargo, en el sistema de coordenadas de Flash, dado que el eje y está al revés, este ángulo se medirá girando en el sentido de las agujas del reloj:

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Esto se puede calcular fácilmente usando el siguiente código. El ángulo se devolverá en radianes, en un rango de 0 a 2pi. Si no sabes qué son los radianes o cómo usarlos, este tutorial de Michael James Williams te ayudará mucho.


Paso 9: producto escalar

El producto escalar entre dos vectores es un número aparentemente sin significado, pero tiene dos usos útiles. Primero veamos cómo se puede calcular el producto escalar:

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Pero también se puede obtener por las coordenadas de cada vector:

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

El producto escalar puede decirnos mucho sobre el ángulo entre los vectores: si es positivo, entonces el ángulo oscila entre 0 y 90 grados. Si es negativo, el ángulo oscila entre 90 y 180 grados. Si es cero, el ángulo es de 90 grados. Eso sucede porque en la primera fórmula, solo el coseno es responsable de darle al producto escalar una "señal": las magnitudes son siempre positivas. Pero sabemos que un coseno positivo significa que el ángulo oscila entre 0 y 90 grados, y así sucesivamente para los cosenos negativos y cero.

El producto de puntos también se puede usar para representar la longitud de un vector en la dirección del otro vector. Piense en ello como una proyección. Esto resulta extremadamente útil en cosas como el Teorema de Separación de Ejes (SAT) y su implementación en AS3 para la detección de colisiones y la respuesta en juegos.

Aquí está el código práctico para obtener el producto escalar entre dos vectores:


Paso 10: Ángulo más pequeño entre vectores

El ángulo entre vectores, como se ve en el Paso 9, puede ser dado por el producto de puntos. Aquí es cómo calcularlo:


Paso 11: Ángulo a distancia entre vectores

También hay otra forma de calcular el ángulo, que da resultados entre -pi y pi y siempre calcula el ángulo que va del primer vector al segundo vector; esto es útil cuando desea integrarse fácilmente con la rotación de un objeto de visualización (que va de -180 a 180).

El método funciona obteniendo el ángulo para ambos vectores, luego restando los ángulos y trabajando en el resultado.

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

El código:

Tenga en cuenta que este ángulo devuelve positivo si secondAngle es más alto que firstAngle, por lo que el orden en el que obtiene el ángulo de rango afectará el resultado.


Paso 12: normalizando un vector

La normalización de un vector significa hacer que su magnitud sea igual a 1, mientras se preserva la dirección y el sentido del vector. Para hacer eso, multiplicamos el vector por 1/magnitude. De esta forma, su magnitud se reducirá o aumentará a 1.


Paso 13: Obteniendo el normal de un vector

El normal de un vector es otro vector que forma un ángulo de 90 grados con respecto al primero. Se puede calcular mediante las siguientes fórmulas:

Flash math vectors in AS3

Las fórmulas se basan en el hecho de que, como la normalidad es siempre perpendicular a un vector, solo necesitamos cambiar el orden de las coordenadas xey e invertir una de ellas para obtener una normal. La siguiente imagen muestra el proceso:

Flash math vectors in AS3

En la imagen, Vec es el vector original, Vec2 es el vector con las coordenadas intercambiadas de Vec, y Vec3 es un vector con la coordenada y negativa de Vec2. Ang y Ang2 son variables, pero el ángulo entre Vec y Vec3 es siempre de 90 grados.

Y el código es simple


Paso 14: girando un vector

Para rotar un vector, asumimos que la posición (0, 0) (su punto inicial) será el centro de rotación. El punto girado está dado por la fórmula:

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Esta fórmula se obtiene aplicando una matriz de rotación a ese vector. Estaríamos yendo más allá del alcance de este tutorial si entramos en la matriz y cómo funciona, así que simplemente dejaré la fórmula aquí.

El código es más o menos el mismo:

Este es el final de nuestras operaciones básicas de vectores. Lo que verá a continuación es maneras de usar esta clase para hacer cosas interesantes. Aquí está nuestra clase hasta ahora:


OK, hemos cubierto la construcción de la clase vectorial, ahora tomemos una decisión de utilizarla.


Paso 15: determinar si un punto está dentro de un polígono

La acción comienza aquí. Determinar si un punto se encuentra dentro de un polígono o no es un tema muy interesante, y hay muchos métodos para lograrlo. En este artículo, presentaré los tres métodos que generalmente se usan:

  • El Número de cruce o el algoritmo de regla par o impar, que determina si un punto está dentro de un polígono a partir del número de aristas que cruza un "rayo" desde el punto hasta el infinito.
  • El algoritmo del número de cuerda, que da la respuesta basada en la suma de todos los ángulos formados entre los vértices consecutivos de un polígono y el punto a verificar.
  • El algoritmo de polígono convexo, que, como su nombre lo indica, solo funciona para polígonos convexos y se basa en si un punto está o no en un cierto "lado" de cada borde del polígono.

Todos estos algoritmos dependerán del hecho de que conoces las coordenadas de los vértices (esquinas) que definen el polígono.


Paso 16: El número de cruce o el algoritmo de regla par impar

Este algoritmo se puede usar para cualquier forma. Esto es lo que lees: cualquier forma, tiene agujeros o no, ya sea convexo o no. Se basa en el hecho de que cualquier rayo que se proyecte desde el punto que deseas ver hasta el infinito cruzará un número par de aristas si el punto está fuera de la forma, o un número impar de aristas si el punto está dentro de la forma. Esto puede ser probado por el teorema de la curva de Jordan, lo que implica que tendrá que cruzar un límite entre una región y otra región si desea pasar de una a otra. En nuestro caso, nuestras regiones están "dentro de la forma" y "fuera de la forma".

Flash math vectors in AS3
Flash math vectors in AS3
Flash math vectors in AS3

El código para este algoritmo es el siguiente:

Devolverá false si el punto no está dentro de la forma o true si el punto está dentro de la forma.


Paso 17: Algoritmo del número de cuerda

El algoritmo de número de cuerda usa la suma de todos los ángulos hechos entre el punto a verificar y cada par de puntos que definen el polígono. Si la suma está cerca de 2pi, entonces el punto que se verifica está dentro del vector. Si está cerca de 0, entonces el punto está afuera.

Flash math vectors in AS3

El código usa el ángulo entre vectores y da espacio para imprecisiones: observe cómo estamos verificando los resultados de la suma de todos los ángulos. No verificamos si el ángulo es exactamente cero o 2pi. En cambio, verificamos si es menor que pi y mayor que pi, un valor mediano considerable.


Paso 18: Algoritmo del polígono cóncavo

El algoritmo de polígono cóncavo se basa en el hecho de que, para un polígono cóncavo, un punto dentro de él siempre está a la izquierda de los bordes (si los estamos bucleando en sentido contrario a las agujas del reloj) oa la derecha de los bordes (si estamos pasando por ellos en el sentido de las agujas del reloj).

Flash math vectors in AS3

Imagínese de pie en una habitación con la forma de la imagen de arriba, y camine alrededor de los bordes de la misma con su mano izquierda arrastrándose a lo largo de la pared. En el punto a lo largo de la pared donde estás más cerca del punto que te interesa, si está a tu derecha, entonces debe estar dentro de la habitación; si está a la izquierda, entonces debe estar afuera.

El problema radica en determinar si un punto está a la izquierda oa la derecha de un borde (que básicamente es un vector). Esto se hace a través de la siguiente fórmula:

Flash math vectors in AS3Flash math vectors in AS3Flash math vectors in AS3

Esa fórmula devuelve un número menor que 0 para los puntos a la derecha del borde, y mayor que 0 para los puntos a la izquierda del mismo. Si el número es igual a 0, el punto se encuentra en el borde y se considera dentro de la forma. El código es el siguiente:

Este código funciona independientemente de si tienes los vértices de la forma definidos en sentido horario o antihorario.


Paso 19: Ray Casting

Ray casting es una técnica que se usa a menudo para detectar colisiones y renderizar. Consiste en un rayo que se lanza de un punto a otro (o hasta el infinito). Este rayo está hecho de puntos o vectores, y generalmente se detiene cuando golpea un objeto o el borde de la pantalla. De forma similar a los algoritmos de punto en forma, hay muchas maneras de lanzar rayos, y veremos dos de ellos en esta publicación:

  • El algoritmo de línea de Bresenham, que es una manera muy rápida de determinar puntos cercanos que darían una aproximación de una línea entre ellos.
  • El método DDA (Digital Differential Analyzer), que también se usa para crear una línea.

En los próximos dos pasos analizaremos ambos métodos. Después de eso, veremos cómo hacer que nuestro rayo se detenga cuando golpea un objeto. Esto es muy útil cuando necesita detectar colisión contra objetos que se mueven rápidamente.


Paso 20: El algoritmo de la línea de Bresenham

Este algoritmo se usa muy a menudo en gráficos de computadora, y depende de la convención de que la línea siempre se creará apuntando hacia la derecha y hacia abajo. (Si se debe crear una línea en las direcciones hacia arriba y hacia la izquierda, todo se invierte más adelante). Vamos a entrar en el código:

El código producirá un vector AS3 de vectores euclidianos que formarán la línea. Con este Vector, más adelante podemos verificar colisiones.


Paso 21: El método DDA

Una implementación del Analizador Diferencial Digital se usa para interpolar variables entre dos puntos. A diferencia del algoritmo de línea de Bresenham, este método solo creará vectores en posiciones enteras para simplificar. Aquí está el código:

Este código también devolverá un vector AS3 de vectores euclidianos.


Paso 22: Verificar colisiones usando rayos

Verificar la colisión por rayos es muy simple. Como un rayo consta de muchos vectores, comprobaremos las colisiones entre cada vector y una forma, hasta que se detecte uno o hasta que se alcance el final. En el siguiente código, shapeToCheck tendrá una forma como las que hemos estado usando en los pasos 13-16. Aquí está el código:

Puede usar cualquier función de punto dentro de la forma con la que se sienta cómodo, ¡pero preste atención a las limitaciones de la última!


Conclusión

¡Estás listo para comenzar a utilizar este conocimiento en todas partes ahora! Será útil muchas veces y le ahorrará muchos cálculos adicionales cuando intente hacer cosas más complejas en Flash.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.