02 Dibujar formas con matemáticas

Coordenadas polares: distancia y ángulo

length da la distancia; atan, el ángulo. Los pétalos y las espirales nacen de ambos.

Pétalos5

112

Profundidad del pétalo0.08

00.15

Torsión0.00

-88

EjercicioAjustar valores0%

Crea una flor de tres pétalos

Se ejecuta una vez por píxelArrastra los números o edita el código

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float r = length(p);
  float a = atan(p.y, p.x);          // -pi .. pi
  a += r * 0.000;                // cuanto más lejos, más gira -> espiral
  float edge = 0.28 + 0.080 * cos(a * 5.000);
  float mask = 1.0 - smoothstep(edge, edge + 0.006, r);
  float turn = fract(a / 6.283185 + 0.5);   // ángulo -> 0..1
  vec3 ink = mix(vec3(0.96, 0.43, 0.30), vec3(0.48, 0.83, 0.69), turn);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), ink, mask);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float r = length(p);
  float a = atan(p.y, p.x);          // -pi .. pi
  a += r * 0.000;                // cuanto más lejos, más gira -> espiral
  float edge = 0.28 + 0.080 * cos(a * 5.000);
  float mask = 1.0 - smoothstep(edge, edge + 0.006, r);
  float turn = fract(a / 6.283185 + 0.5);   // ángulo -> 0..1
  vec3 ink = mix(vec3(0.96, 0.43, 0.30), vec3(0.48, 0.83, 0.69), turn);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), ink, mask);
  gl_FragColor = vec4(color, 1.0);
}

Lado JSgl.uniform2f(uResolution, …, …)

length da la distancia y atan el ángulo: con coordenadas polares, pétalos, rayos y espirales se expresan en una línea cada uno.

Pruébalo

Pon los pétalos en 3
Añade algo de torsión para obtener una espiral
Busca la línea donde salta el color: atan se interrumpe en ±π