A Apéndice

Guía rápida de funciones integradas

Elige una función para trazarla. Arrastra o edita los números del código y la curva los seguirá.

Función

Modelado

Repetición

Periódicas

Exponenciales

Vectores

Muestreo

smoothstep Interruptor suave: una curva en S entre dos bordesCuidado: el primer borde debe ser menor que el segundo

Lo ves → lo usas

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

void main() {
  float x = mix(-0.5, 1.5, vUv.x);   // eje horizontal
  float y = smoothstep(0.2, 0.8, x);
  
  // todo lo de abajo solo dibuja la curva de y
  float gy = mix(-0.25, 1.25, vUv.y);
  float grid = min(abs(fract(x + 0.5) - 0.5) / fwidth(x), abs(fract(gy + 0.5) - 0.5) / fwidth(gy));
  float axes = min(abs(x) / fwidth(x), abs(gy) / fwidth(gy));
  float curve = abs(gy - y) / min(fwidth(gy - y), fwidth(gy) * 8.0);   // sin líneas verticales en los saltos
  vec3 color = vec3(0.07, 0.10, 0.13);
  color = mix(color, vec3(0.17, 0.22, 0.25), 1.0 - smoothstep(0.0, 1.0, grid));
  color = mix(color, vec3(0.42, 0.47, 0.49), 1.0 - smoothstep(0.0, 1.5, axes));
  color = mix(color, vec3(0.96, 0.43, 0.30), 1.0 - smoothstep(1.0, 2.5, curve));
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  float x = mix(-0.5, 1.5, vUv.x);   // eje horizontal
  float y = smoothstep(0.2, 0.8, x);
  
  // todo lo de abajo solo dibuja la curva de y
  float gy = mix(-0.25, 1.25, vUv.y);
  float grid = min(abs(fract(x + 0.5) - 0.5) / fwidth(x), abs(fract(gy + 0.5) - 0.5) / fwidth(gy));
  float axes = min(abs(x) / fwidth(x), abs(gy) / fwidth(gy));
  float curve = abs(gy - y) / min(fwidth(gy - y), fwidth(gy) * 8.0);   // sin líneas verticales en los saltos
  vec3 color = vec3(0.07, 0.10, 0.13);
  color = mix(color, vec3(0.17, 0.22, 0.25), 1.0 - smoothstep(0.0, 1.0, grid));
  color = mix(color, vec3(0.42, 0.47, 0.49), 1.0 - smoothstep(0.0, 1.5, axes));
  color = mix(color, vec3(0.96, 0.43, 0.30), 1.0 - smoothstep(1.0, 2.5, curve));
  gl_FragColor = vec4(color, 1.0);
}

Lado JS

Recuerda las funciones por su forma: modelado, repetición, periódicas y vectores cubren la mayoría de los shaders. Aprende después las trampas: mod con negativos, el orden de argumentos de atan, el orden de bordes de smoothstep y la base negativa de pow.

Pruébalo

Intercambia los dos bordes en smoothstep: ¿en qué se convierte la curva?
Cambia fract(x) por fract(x * 3.0) y cuenta los dientes
Compara mod y fract en el lado negativo
Abre el depurador de píxeles, pon el puntero en la curva y lee x e y