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

Paso 9: Avanzada - agua animada

(enlace a la versión animada de HTML5)

De ahora en adelante, te ofrezco algunas fórmulas más complejas, con explicaciones detalladas no mucho--resultados artísticos a menudo vienen con un montón de tweakings. Puede estudiarlos y algunos comentarios dentro del punto.

Ésta produce efectos de onda en el agua.

Fórmula

 WIDTH = 200; float RATIO = 1; TIME_INCREMENT = .08; OUT_PAUSE = false; X_MIN = 0; X_MAX = 30; Y_MIN = 0; Y_MAX = 30; float wave(x, y, fx, fy, a, vx, vy) { return sin((x+2*sin(y*fx*3))*fx + t*vx) * sin(y*fy + t*vy) * a; } float dx, dy; bool preDraw(t) { dx = pow(sin(t/20), 2)/3; dy = pow(cos(t/20), 2)/3; return true; } color rgb(x, y, t) { float value = 0; // fx fy a vx vy value += wave(x, y, 0.20, 0.10, 0.4, dx , dy ); value += wave(x, y, 0.31, 0.31, 0.4, 0.2, 0.2); value += wave(x, y, 0.09, 0.07, 0.4, 0.2, 0.2); value = sin(value*7); value = pow(value*value, .1); float normed = value*255; return color(24, 255-normed/2, 255); } 

Notas

• ¿Notó usted la función de preDraw() ? Se llama, si, antes de cada fotograma. Permite para calcular las variables que cambian en marcos y no en pixeles. Y por lo tanto, hacer el cómputo una vez por fotograma en lugar de rehacer inútilmente para cada píxel.
• La función wave() es una función arbitrariamente nombrada, que llamamos varias veces por píxel, con diferentes argumentos.