01 Fragments and data

mix: between two values

Push the amount from 0 to 1 and watch the colours between the two ends.

Amount t0.50

ExerciseTune values0%

Stop the colour at 80% mint

Runs once per pixelDrag numbers, or edit the code

void main() {
  vec3 a = vec3(0.96, 0.43, 0.30);
  vec3 b = vec3(0.48, 0.83, 0.69);
  vec3 color = mix(a, b, 0.500);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec3 a = vec3(0.96, 0.43, 0.30);
  vec3 b = vec3(0.48, 0.83, 0.69);
  vec3 color = mix(a, b, 0.500);
  gl_FragColor = vec4(color, 1.0);
}

JS side

mix(a, b, t) = a×(1−t) + b×t. t = 0 gives a, t = 1 gives b.

Try it

Set t to 0.5: exactly halfway
In the code, change t to vUv.x to get a gradient