Spela med matematik: göra animerad GIF och HTML5 (9 / 15 steg)
Steg 9: Avancerade - animerade vatten
(länk till HTML5 animerade versionen)
Hädanefter kommer jag att ge dig lite mer komplexa formler, med inte mycket detaljerade förklaringar - konstnärliga resultat kommer ofta med massor av tweakings. Du kan studera dem och upptäcka några kommentarer inom.
Detta producerar en våg effekter på vattnet.
Formel
BREDD = 200.
flyta RATIO = 1;
TIME_INCREMENT =. 08;
OUT_PAUSE = false;
X_MIN = 0; X_MAX = 30.
Y_MIN = 0; Y_MAX = 30.
float våg (x, y, fx, fy, en, vx, vy) {
återgå sin((x+2*sin(y*fx*3)) * fx + t * vx) * synd (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;
}
färg rgb (x, y, t) {
flyta värde = 0;
FX fy en vx-vy
värdet += våg (x, y, 0,20, 0.10, 0.4, dx, dy);
värdet += våg (x, y, 0,31, 0,31, 0,4, 0,2 0,2);
värdet += våg (x, y, 0,09 0,07, 0,4, 0,2, 0,2);
värde = sin(value*7);
värde = pow (värde * värde,. 1);
float normerat = värde * 255;
returnera color (24, 255-normerat/2, 255);
}
Anteckningar
- Märkte du funktionen preDraw() ? Det kallas, om definieras, innan varje bildruta. Det gör det möjligt för att beräkna variabler som ändras över ramar och inte över pixlar. Och därmed göra uträkningen en gång per ram i stället för att göra om det meningslösa för varje pixel.
- Funktionen wave() är ett godtyckligt benämnda fungerar, som vi kallar flera gånger per pixel, med olika argument.