La periodicidad y la amplitud permiten controlar ondas, oscilaciones y movimientos repetitivos con funciones trigonométricas.
Muchas situaciones en programación se repiten: una animación que sube y baja, una luz que parpadea, una ola, una vibración o un elemento que gira alrededor de un punto.
Las funciones seno y coseno son especialmente útiles para modelar este tipo de comportamiento porque sus valores se repiten de forma regular.
Una función es periódica cuando repite sus valores después de cierto intervalo. Ese intervalo se llama periodo.
En el caso de seno y coseno, el periodo natural es 2π radianes, equivalente a 360°.
Si se evalúa el seno cada 360°, el valor vuelve a repetirse.
| Ángulo | Seno | Coseno |
|---|---|---|
| 0° | 0 | 1 |
| 90° | 1 | 0 |
| 180° | 0 | -1 |
| 270° | -1 | 0 |
| 360° | 0 | 1 |
Este ejemplo compara el seno de un ángulo con el seno del mismo ángulo más 360°.
function senoEnGrados(grados) {
const radianes = grados * Math.PI / 180;
return Math.sin(radianes);
}
function redondear(valor) {
return Math.round(valor * 1000000) / 1000000;
}
const angulo = 45;
console.log(redondear(senoEnGrados(angulo)));
console.log(redondear(senoEnGrados(angulo + 360)));
console.log(redondear(senoEnGrados(angulo + 720)));La amplitud indica qué tan lejos se aleja una onda de su valor central. En una función seno simple, los valores van de -1 a 1, por lo que su amplitud es 1.
Si la amplitud es 40, la onda oscila entre -40 y 40 alrededor del centro.
En una animación, la amplitud puede representar la distancia máxima que se mueve un objeto respecto de su posición central.
function posicionOscilante(tiempo, centro, amplitud) {
return centro + Math.sin(tiempo) * amplitud;
}
console.log(posicionOscilante(0, 100, 40));
console.log(posicionOscilante(Math.PI / 2, 100, 40));
console.log(posicionOscilante(Math.PI, 100, 40));
console.log(posicionOscilante(3 * Math.PI / 2, 100, 40));El valor central desplaza toda la oscilación hacia arriba, abajo, izquierda o derecha, según la coordenada donde se aplique.
Si el centro es 100 y la amplitud es 30, la posición mínima será 70 y la máxima será 130.
Cuando se conoce el centro y la amplitud, es sencillo calcular el rango de valores de una oscilación.
function rangoOscilacion(centro, amplitud) {
return {
minimo: centro - amplitud,
maximo: centro + amplitud
};
}
console.log(rangoOscilacion(100, 30));
console.log(rangoOscilacion(250, 80));En programas, muchas veces no se trabaja directamente con ángulos sino con tiempo. Multiplicar el tiempo por un factor cambia la velocidad de la oscilación.
Una velocidad mayor hace que el ciclo se repita más rápido. Una velocidad menor hace que se repita más lentamente.
El siguiente ejemplo muestra cómo cambia el valor de una onda para distintas velocidades.
function onda(tiempo, velocidad, amplitud) {
return Math.sin(tiempo * velocidad) * amplitud;
}
function redondear(valor) {
return Math.round(valor * 1000) / 1000;
}
const tiempo = 1;
console.log(redondear(onda(tiempo, 0.5, 10)));
console.log(redondear(onda(tiempo, 1, 10)));
console.log(redondear(onda(tiempo, 2, 10)));Si queremos que una onda complete un ciclo en una cantidad específica de segundos, podemos convertir el tiempo en una fase entre 0 y 2π.
function ondaConPeriodo(tiempo, periodo, amplitud) {
const fase = tiempo / periodo * 2 * Math.PI;
return Math.sin(fase) * amplitud;
}
console.log(ondaConPeriodo(0, 4, 20));
console.log(ondaConPeriodo(1, 4, 20));
console.log(ondaConPeriodo(2, 4, 20));
console.log(ondaConPeriodo(4, 4, 20));La frecuencia indica cuántos ciclos ocurren por unidad de tiempo. Es la idea inversa del periodo.
Si el periodo es 4 segundos, la frecuencia es 0.25 ciclos por segundo.
Estas dos funciones permiten pasar de periodo a frecuencia y de frecuencia a periodo.
function frecuenciaDesdePeriodo(periodo) {
return 1 / periodo;
}
function periodoDesdeFrecuencia(frecuencia) {
return 1 / frecuencia;
}
console.log(frecuenciaDesdePeriodo(4));
console.log(periodoDesdeFrecuencia(0.25));Un movimiento flotante puede usarse para menús, partículas, objetos decorativos, enemigos o plataformas móviles.
function movimientoFlotante(tiempo, posicionBase) {
const amplitud = 12;
const periodo = 2;
const fase = tiempo / periodo * 2 * Math.PI;
return {
x: posicionBase.x,
y: posicionBase.y + Math.sin(fase) * amplitud
};
}
const base = { x: 300, y: 150 };
console.log(movimientoFlotante(0, base));
console.log(movimientoFlotante(0.5, base));
console.log(movimientoFlotante(1, base));La amplitud también puede modificar el tamaño, la opacidad o el brillo de un elemento.
function escalaConPulso(tiempo) {
const centro = 1;
const amplitud = 0.15;
const velocidad = 3;
return centro + Math.sin(tiempo * velocidad) * amplitud;
}
console.log(escalaConPulso(0));
console.log(escalaConPulso(0.5));
console.log(escalaConPulso(1));La amplitud cambia la altura o intensidad de la oscilación. El periodo cambia cuánto tarda en repetirse.
| Concepto | Pregunta que responde | Efecto visual |
|---|---|---|
| Amplitud | ¿Cuánto se aleja del centro? | Movimiento más amplio o más pequeño |
| Periodo | ¿Cuánto tarda en repetirse? | Movimiento más lento o más rápido |
| Frecuencia | ¿Cuántos ciclos ocurren por segundo? | Más o menos repeticiones |
La periodicidad permite construir comportamientos que se repiten de manera regular, mientras que la amplitud controla la intensidad de esa variación. Juntas, estas ideas convierten a las funciones trigonométricas en herramientas muy prácticas para animación, simulación y gráficos.