02 Drawing shapes with math

step: a switch

Below the threshold you get 0, otherwise 1.

Threshold edge0.50

ExerciseTune values0%

Put the boundary at 30%

Runs once per pixelDrag numbers, or edit the code

void main() {
  float mask = step(0.500, 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 = step(0.500, 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

step(edge, x) returns 0 when x < edge, otherwise 1. It is the cheapest “if” in a shader.

Try it

Set the threshold to 0.3
Change vUv.x to vUv.y: the boundary turns horizontal