12 De la imagen a la receta

smin: formas que se funden

min solo une dos formas; smin rellena la unión con una curva suave, como dos gotas de agua que se tocan.

Separación entre círculos0.36

0.10.7

k · rango de fusión0.10

0.010.3

Unión

EjercicioAjustar valores0%

Une dos círculos separados con un puente ancho

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

float smin(float a, float b, float k) {   // un min suave: mezcla donde a y b son cercanos
  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) - k * h * (1.0 - h);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float a = length(p - vec2(-0.360 / 2.0, 0.0)) - 0.16;
  float b = length(p - vec2(0.360 / 2.0, 0.05)) - 0.11;
  float d = smin(a, b, 0.100);
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);
  float rings = 0.5 + 0.5 * cos(d * 120.0);   // anillos de distancia: ver cómo se suaviza el campo
  vec3 color = mix(vec3(0.06, 0.10, 0.14) + 0.06 * rings, vec3(0.96, 0.43, 0.30), ink);
  gl_FragColor = vec4(color, 1.0);
}

float smin(float a, float b, float k) {   // un min suave: mezcla donde a y b son cercanos
  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
  return mix(b, a, h) - k * h * (1.0 - h);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float a = length(p - vec2(-0.360 / 2.0, 0.0)) - 0.16;
  float b = length(p - vec2(0.360 / 2.0, 0.05)) - 0.11;
  float d = smin(a, b, 0.100);
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);
  float rings = 0.5 + 0.5 * cos(d * 120.0);   // anillos de distancia: ver cómo se suaviza el campo
  vec3 color = mix(vec3(0.06, 0.10, 0.14) + 0.06 * rings, vec3(0.96, 0.43, 0.30), ink);
  gl_FragColor = vec4(color, 1.0);
}

Lado JSgl.uniform2f(uResolution, …, …)

smin(a, b, k) mezcla a y b donde su diferencia es menor que k y expande un poco la forma en la unión. Un k mayor amplía la zona de fusión. Se usa en líquidos, metaballs y formas orgánicas.

Pruébalo

Vuelve a min y compara la unión
Separa los círculos y sube k: se conectan a través del hueco
Observa los anillos del fondo: smin suaviza el propio campo de distancias