Ondas

Si te estás diciendo a ti mismo, “Mmh, esto es genial y todo, pero lo que realmente quiero es dibujar una onda en la pantalla”, bueno, entonces, ha llegado el momento. La cosa es que estamos cerca como del 90%. Cuando oscilamos un solo círculo hacia arriba y hacia abajo de acuerdo con la función seno, lo que estamos haciendo es mirar un solo punto de un patrón de onda a lo largo del eje x. Con un poco de estilo y un bucle for, podemos colocar un montón de estos circulos oscilantes uno junto al otro.

Este patrón ondulado podría ser utilizado en el diseño del cuerpo o las extremidades de una criatura, así como en simular una superficie suave (como agua).

Aquí, vamos a encontrar las mismas preguntas de amplitud (altura del patrón) y periodo. Sin embargo, en vez de que el periodo se refiera al tiempo, como estamos mirando a la onda completa, podemos hablar acerca del periodo como el ancho (en pixeles) de un ciclo de onda completa. Y al igual que con la oscilación sencilla, tenemos la opción de calcular el patrón de onda de acuerdo con un periodo preciso o simplemente seguir el modelo de velocidad angular.

Vayamos con el caso más sencillo, la velocidad angular. Sabemos que tenemos que empezar con un ángulo, una velocidad angular y una amplitud:

Luego vamos a iterar a través de todos los valores de x donde queramos dibujar un punto de la onda. Por ahora, digamos que cada 24 pixeles. En ese bucle, vamos a querer hacer tres cosas:

Veamos los resultados con diferentes valores para angleVel:

Observa cómo, aunque no estamos calculando precisamente el periodo de la onda, mientras mayor sea la velocidad angular, más corto será el periodo. También vale la pena observar que a medida que el periodo se hace más corto, se hace cada vez más difícil distinguir a la onda a medida que la distancia entre los puntos individuales aumenta. Una opción que tenemos es usar beginShape() y endShape() para conectar los puntos con una línea.

El ejemplo anterior es estático. La onda nunca cambia, nunca ondula y eso es lo que hemos estado construyendo. Este paso adicional de animar la onda es un poco complicado. Tu primer instinto puede decir: “Oye, no hay problema, simplemente dejaremos que angle sea una variable global y dejaremos que incremente de un ciclo al siguiente a través de draw()”.

Aunque es una buena idea, no va a funcionar. Si miras el dibujo de la onda estática, el borde de la derecha no coincide con el de la izquierda; donde termina en un ciclo de draw() no puede ser donde comienza en el siguiente. En cambio, lo que tenemos que hacer es tener una variable totalmente dedicada a llevar el registro del valor del ángulo en el que debe comenzar la onda. Este ángulo (que llamaremos startAngle) aumenta con su propia velocidad angular.

Aquí está, con el ángulo de inicio incorporado. Trata de cambiar los diferentes números para ver qué le sucede a la onda oscilante.

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.