Juega con las matemáticas: hacer el GIF animado y HTML5 (7 / 15 paso)

Paso 7: Conceptos básicos - animación espiral

(enlace a la versión animada de HTML5)

¿Así que muy bien, pero no eran imágenes GIF animadas prometidas en la introducción?

Animación, hay tres nuevos ingredientes:

• t: valor en el tiempo. Sólo tienes que añadir t a los argumentos de rgb() o hsb(). Por supuesto, deberá utilizarse inteligentemente t en la fórmula.
• TIME_INCREMENT: el tiempo de salto entre cada fotograma.
• Marcos: el número de fotogramas para el GIF animado. Si no desea exportar como GIF animado, puede dejar hacia fuera.

Fórmula

 TIME_INCREMENT = 0.2; // (a) FRAMES = 10; // (b) FRAMES = TWO_PI / TIME_INCREMENT / 3; // (b2) OUT_PAUSE = false; WIDTH = 250; RATIO = 1; X_MIN = -1; X_MAX = 1; Y_MIN = -1; Y_MAX = 1; color rgb(x, y, t) { // (c) float radius = dist(x, y, 0, 0); float angle = -atan2(x, y); angle = angle + t; // (d) float value = angle*3 - log(radius)*12; float stripe = cos(value); float luma = (stripe + 1) * 127; return color(luma); } 

La espiral no animada fue explicada en el tutorial anterior. Aquí sólo nos cubrirá las modificaciones necesarias para generar una animación.

• (a) TIME_INCREMENT define el tiempo de incremento, es decir, cómo el tiempo varía de un fotograma al siguiente.
• (b) Marcos define el número de fotogramas que queremos el paquete en el archivo de animación (anim GIF). El número depende realmente de su fórmula. Deberá elegirse para que la transición entre el último fotograma y el primer fotograma es lisa. Aquí en (b2), se calcula para considerar el TIME_INCREMENT (el más pequeño el incremento, más el número de fotogramas).
• (c) la función rgb() se declara aquí con el argumento de t . Indica que queremos una animación. Se llamará la función rgb() con varios valores de t, a partir de 0 e incrementado con TIME_INCREMENT en cada nuevo cuadro.
• (d) en esta fórmula, se trata de cómo decidimos usar t. Aquí, t se añade al ángulo, haciendo la espiral entera de la vuelta con el tiempo.

Ejercicios

1. Hacer la espiral gira en la dirección opuesta.
2. Que la vuelta de la espiral más rápida o slowlyer.