Introducción a vectores

Este curso trata de mirar el mundo que nos rodea e inventar maneras inteligentes para simular ese mundo con código. Empezaremos por mirar física básica: cómo una manzana cae de un árbol, cómo un péndulo oscila en el aire, cómo la tierra gira alrededor del sol, etc. Todo lo que discutiremos aquí requiere el uso del bloque de construcción más básico para la programación de movimiento: el vector. Así que aquí es donde comenzamos nuestra historia.

Ahora, la palabra vector puede significar muchas cosas diferentes. Vector es el nombre de una banda de rock new wave formada en Sacramento, California a principios de los 80s. Es el nombre de un cereal de desayuno fabricado por Kellogg’s Canadá. En el campo de la epidemiología, un vector se utiliza para describir a un organismo que transmite la infección de un huésped a otro. En el lenguaje de programación C++, un vector (std::vector) es una implementación de una estructura de datos de arreglos que puede cambiar dinámicamente su tamaño. Aunque todas estas definiciones son interesantes, no son lo que estamos buscando. Lo que queremos es llamado un vector euclidiano (llamado así por el matemático griego Euclides y también conocido como un vector geométrico). Cuando veas el término “vector” en este curso, puedes suponer que se refiere a un vector euclidiano, definido como una entidad que tiene tanto magnitud como dirección.

Un vector típicamente se dibuja como una flecha; la dirección está indicada por hacia dónde apunta la flecha y la magnitud por la longitud de la propia flecha.

En la ilustración anterior, el vector está dibujado como una flecha del punto A al punto B y sirve como una instrucción de cómo viajar desde A hasta B.

Antes de sumergirnos en más detalles acerca de los vectores, echemos un vistazo a un programa básico que demuestra por qué deberíamos preocuparnos acerca de los vectores en primer lugar. Si pasaste por el curso introductorio de JS aquí en Khan Academy, probablemente, en un momento u otro, aprendiste a escribir un programa sencillo de una pelota que rebota.

En el ejemplo anterior, tenemos un mundo muy sencillo: un lienzo en blanco con una figura circular (una “pelota”) que se mueve. Esta pelota tiene algunas propiedades, que están representadas en el código como variables.

En un programa más avanzado, podríamos imaginar tener muchas más variables:

Se está volviendo más claro que para cada concepto en este mundo (viento, posición, aceleración, etc.), necesitaremos dos variables. Y esto es solo un mundo bidimensional. En un mundo 3D necesitaremos x, y, z, xSpeed, ySpeed, zSpeed, y así sucesivamente.

¿No estaría bien si pudiéramos simplificar nuestro código y utilizar menos variables?

En lugar de:

Simplemente podríamos tener dos variables, donde cada variable sea un objeto como un vector con dos dimensiones de información:

Tomar este primer paso en el uso de vectores no nos permitirá hacer nada nuevo. El solo usar objetos como vectores para tus variables no hará que tu programa mágicamente simule física. Sin embargo, simplificarán el código y proporcionarán un conjunto de funciones para operaciones matemáticas comunes que ocurren una y otra vez mientras programamos movimiento.

Como una introducción a los vectores, vamos a vivir en dos dimensiones. Todos estos ejemplos pueden extenderse fácilmente a tres dimensiones (y el objeto que vamos a utilizar, PVector, permite tres dimensiones). Sin embargo, es más fácil comenzar con solo dos.

Una manera de pensar a un vector es la diferencia entre dos puntos. Considera cómo le harías para dar instrucciones para caminar de un punto a otro.

Aquí hay algunos vectores y sus posibles traducciones: 

| (-15, 3) | Camina quince pasos hacia el oeste; gira y camina tres pasos hacia el norte. | | (3, 4) | Camina tres pasos hacia el este; gira y camina cuatro pasos hacia el norte. | | (2, -1) | Camina dos pasos hacia el este; gira y camina un paso hacia el sur. |

Probablemente hayas hecho esto antes cuando programaste movimiento. Para cada cuadro de la animación (es decir, un solo ciclo a través del bucle draw() de ProcessingJS), le diste la instrucción a cada objeto en la pantalla de moverse un número determinado de pixeles horizontalmente y un cierto número de pixeles verticalmente.

Para cada cuadro:

Si la velocidad es un vector (la diferencia entre dos puntos), ¿qué es la posición? ¿También es un vector? Técnicamente, uno podría argumentar que la posición no es un vector, puesto que no está describiendo cómo moverse de un punto a otro; simplemente está describiendo un único punto en el espacio.

Sin embargo, otra manera de describir una posición es el camino tomado desde el origen para alcanzar esa posición. Eso significa que una posición puede ser el vector que representa la diferencia entre la posición y el origen.

Examinemos los datos subyacentes para la posición y la velocidad. En el ejemplo de la pelota que rebota, teníamos los siguientes:

Observa cómo estamos almacenando los mismos datos para ambos: dos números de punto flotante, una x y una y. Si fuéramos a escribir una clase de vector nosotros mismos, empezaríamos con algo muy básico:

En esencia, un PVector es solo una manera conveniente de almacenar dos valores (o tres, como veremos en los ejemplos de 3D).

Así que esto …

se convierte en …

Ya que tenemos dos objetos vectoriales (posición y velocidad), estamos listos para implementar el algoritmo para el movimiento: posición = posición + velocidad. En el ejemplo 1.1, sin vectores, teníamos:

En un mundo ideal, seríamos capaces de escribir lo anterior como:

Sin embargo, en JavaScript, el operador de suma + está reservado solamente para los valores primitivos (números, cadenas). En algunos lenguajes de programación, los operadores pueden ser "sobrecargados", pero no en JavaScript. Afortunadamente para nosotros, el objeto PVector incluye métodos para operaciones matemáticas comunes, como add() (suma).

Antes de continuar con el objeto PVector y su método add(), examinemos la suma vectorial utilizando la notación encontrada en los libros de texto de matemáticas y física.

Los vectores normalmente se escriben en negritas o con una flecha en la parte superior. Para los propósitos de estas lecciones, para distinguir un vector de un escalar (escalar se refiere a un valor único, como un número entero o un número de punto flotante), utilizaremos la notación de flecha:

Digamos que tengo los siguientes dos vectores:

Cada vector tiene dos componentes, una x y una y. Para sumar dos vectores, simplemente sumamos las xs y las ys. 

En otras palabras:

se puede escribir como:

Luego, reemplazando u y v con sus valores de la Figura 1.6, obtenemos:

lo que significa que:

Por último, escribimos eso como un vector:

Ahora que entendemos cómo sumar dos vectores, podemos mirar cómo se implementa la suma en el propio objeto PVector. Vamos a escribir un método llamado add() que toma otro objeto PVector como su argumento y simplemente suma las componentes x y y.

Ya que vimos cómo se escribe add() dentro de PVector, podemos volver a nuestro ejemplo de la pelota que rebota con su algoritmo de posición = posición + velocidad e implementar la suma vectorial:

¡Y ahora estamos listos para volver a escribir el ejemplo de la pelota que rebota al usar el objeto PVector! Echa un vistazo a través del código y observa las diferencias de antes.

Debemos observar un aspecto importante de la transición anterior a la programación con vectores. Aunque estamos utilizando objetos PVector para describir dos valores (x y y de la posición y x y y de la velocidad), a menudo aún necesitamos referirnos a las componentes x y y de cada PVector de manera individual. Cuando vayamos a dibujar un objeto en ProcessingJS, no hay modo de que podamos codificarlo así:

La función ellipse() no permite un PVector como argumento. Una elipse solo se puede dibujar con dos valores escalares, una coordenada x y una coordenada y. Así que debemos adentrarnos en el objeto PVector y sacar las componentes x y y mediante notación de puntos orientada a objetos en su lugar:

El mismo problema se presenta cuando se prueba si el círculo ha alcanzado el borde de la ventana, y necesitamos acceder a los componentes individuales de ambos vectores: position y velocity.

Ahora, puedes sentirte algo desilusionado. Después de todo, este cambio a usar vectores inicialmente puede parecer que hizo el código más complicado que el de la versión original. Mientras que esto es una crítica perfectamente razonable y válida, es importante entender que todavía no nos hemos dado cuenta del potencial completo de programar con vectores. Ver una pelota rebotar e implementar la suma vectorial solo es el primer paso.

A medida que avancemos en un mundo más complicado de múltiples objetos y fuerzas (las cuales introduciremos pronto), los beneficios de PVector se harán más evidentes. ¡Sigue adelante!

Este curso de "Simulaciones Naturales" es un derivado de "La Naturaleza del Código" por Daniel Shiffman, usado bajo una Licencia Creative Commons Reconocimiento-NoComercial 3.0 Unported.