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

Paso 5: Conceptos básicos - espiral

Ahora vamos a dibuja una espiral.

Fórmula

 WIDTH = 250; RATIO = 1; X_MIN = -1; X_MAX = 1; Y_MIN = -1; Y_MAX = 1; color rgb(x, y) { float radius = dist(x, y, 0, 0); // (a) Cartesian to polar float angle = atan2(x, y); // (a) Cartesian to polar float value = angle*3 - log(radius)*12; // (b) the spiral float stripe = cos(value); // (c) the smooth stripes float luma = (stripe + 1) * 127; // (d) map to luma range return color(luma); } 

Explicación

(a) convertir a coordenadas cartesianas (x,y) a coordenadas polares (ángulo,radio).

(b) determinar el color mediante el ángulo y el logaritmo del radio.

(c) Aplique un coseno para generar franjas grises lisos.

d mapa de raya (-1 a 1) luma rango (0 a 255).

Nota:

También puede generar rayas blanco y negro (en lugar de escala de grises) mediante la sustitución de las dos líneas (c) y (d) por esta sola:
flotador luma = cos(value) > 0? 0: 255;
A continuación, observe cómo las fronteras de rayas son irregulares. No muy agradable, así que vamos a seguir con greyscales!

Ejercicios

1. Hacer la espiral gire en dirección opuesta.