Étape 9: Avancé - animation eau
(lien vers la version animée de HTML5)
Par la suite, je vous offre des formules plus complexes, avec des explications pas beaucoup détaillées--résultats artistiques viennent souvent avec beaucoup de branchements. Vous pouvez les étudier et repérer quelques commentaires au sein.
Celui-ci produit des effets de vagues sur l’eau.
Formule
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); } Notes
- Avez-vous remarqué la fonction preDraw() ? Elle est appelée, si définie, avant chaque image. Il permet de calculer les variables qui changent au fil des images et pas pour les pixels. Et donc, de faire le calcul une fois par image au lieu d’il refaire inutilement pour chaque pixel.
- La fonction wave() est une fonction nommée arbitrairement, qu’on appelle plusieurs fois par pixel, avec des arguments différents.
