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

Paso 10: Avanzado:-animación Nautilus

(enlace a la versión animada de HTML5)

Este es uno de mis favoritos. Haciendo la espiral fue fácil (según lo visto en pasos anteriores), pero hacer las divisiones de cámaras fue un verdadero desafío.

Fórmula

 OUT_PAUSE = false; FIRST_FRAME_TIME = PI/4; WIDTH = 250; RATIO = 1; TIME_INCREMENT = 0.02; X_MIN = -6; X_MAX = 6; Y_MIN = -6; Y_MAX = 6; FRAMES = PI / TIME_INCREMENT; color rgb(x, y, t) { float radius = dist(x, y, 0, 0); // cartesian to polar float angle = atan2(x, y); // cartesian to polar float sint = sin(t); if(sint<0) { // for negative pitch, have sint positive and negate angle sint = -sint; angle = -angle; } float lrad = log(radius) * 4 * sint; float spiral = cos(angle/2 + lrad); float divisions = spiral > 0 ? sin(sin(angle*4 + sint * lrad * sin(angle/2+lrad - PI/4)/8)*PI/2) : -sin(sin(angle*4 - sint * lrad * sin(angle/2+lrad - PI/4)/8)*PI/2 + PI); float value = spiral * divisions; value = pow(value*value, .05); // make lines thinner float luma = value * 255; return color(luma); }