A Appendix

Built-in function cheat sheet

Pick a function to plot it. Drag or edit the numbers in the code and the curve follows.

Function

Shaping

Repeat

Periodic

Exponential

Vector

Sampling

smoothstep Soft switch: an S-curve between two edgesCareful: the first edge must be smaller than the second

See it → use it

Runs once per pixelDrag numbers, or edit the code

void main() {
  float x = mix(-0.5, 1.5, vUv.x);   // horizontal axis
  float y = smoothstep(0.2, 0.8, x);
  
  // everything below only draws the curve of 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);   // no vertical lines at jumps
  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);   // horizontal axis
  float y = smoothstep(0.2, 0.8, x);
  
  // everything below only draws the curve of 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);   // no vertical lines at jumps
  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);
}

JS side

Remember functions by shape: shaping, repeat, periodic and vector cover most shaders. Then learn the traps: mod with negatives, atan’s argument order, smoothstep’s edge order, pow’s negative base.

Try it

Swap the two edges in smoothstep: what does the curve become?
Change fract(x) to fract(x * 3.0) and count the teeth
Compare mod and fract on the negative side
Open the pixel debugger, put the pointer on the curve and read x and y