02 Drawing shapes with math

smoothstep: a soft switch

Turns a hard edge into a soft transition.

Centre0.50

0.20.8

Width0.30

0.010.4

ExerciseTune values0%

Make this narrow transition on the right

Runs once per pixelDrag numbers, or edit the code

void main() {
  float mask = smoothstep(0.500 - 0.300 / 2.0,
                          0.500 + 0.300 / 2.0, vUv.x);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), mask);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  float mask = smoothstep(0.500 - 0.300 / 2.0,
                          0.500 + 0.300 / 2.0, vUv.x);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), mask);
  gl_FragColor = vec4(color, 1.0);
}

JS side

smoothstep(a, b, x) goes smoothly from 0 to 1 between a and b. It requires a < b.

Try it

Make the width as small as possible: almost a step
Make the width as large as possible: the transition fills the canvas