Contenido principal
Programación de computadoras
Curso: Programación de computadoras > Unidad 5
Lección 7: Oscilaciones- Amplitud y periodo de oscilación
- Desafío: gusanito
- Oscilación con velocidad angular
- Desafío: paseo de naves espaciales
- Ondas
- Desafío: muchas ondas
- Trigonometría y fuerzas: el péndulo
- Desafío: marioneta de péndulos
- Fuerzas en un resorte
- Proyecto: criaturas que se enrollan, se arrastran y dan vueltas
© 2023 Khan AcademyTérminos de usoPolítica de privacidadAviso de cookies
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:
var angle = 0;
var angleVel = 0.2;
var amplitude = 100;
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:
- Calcular la posición y de acuerdo con la amplitud y al seno del ángulo.
- Dibujar un círculo en la posición (x, y).
- Incrementar el ángulo de acuerdo con la velocidad angular.
for (var x = 0; x <= width; x += 24) {
// Calcular la posicion y de acuerdo con la amplitud y el seno del ángulo
var y = amplitude * sin(angle);
// Dibujar un círculo en la posición x, y
ellipse(x, y+height/2, 48, 48);
// Incrementar el ángulo de acuerdo con la velocidad angular
angle += angleVel;
}
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.
¿Quieres unirte a la conversación?
Sin publicaciones aún.