Shaping values with curves

Everything you have blended so far changed in a straight line: mix(a, b, st.x) ramps evenly from one side to the other. But almost nothing in a game moves evenly — a jump eases in and slows at the top, a glow swells and fades, a health bar reddens fast near empty. The trick is to SHAPE the value first: run your 0-to-1 number through a function that bends it, then use the bent value instead of the raw one.

A shaping function takes a value from 0 to 1 and returns a new value along some curve. pow(x, 3.0) starts slow and rushes at the end; sin() oscillates; and smoothstep(a, b, x) makes a soft S that eases in and out. To actually SEE the curve, we plot it: the plot() helper below lights up the pixels near the line y = f(x), so you can watch the shape of the function directly.

The green line is the curve y = f(x); the grey behind it is that same value used as brightness across the screen. Change the 3.0 and watch the curve bow more or less. A straight diagonal line would be the plain linear value — every bend away from that diagonal is a shaping function doing its job.

Your turn: shape the value with smoothstep instead of pow. smoothstep(0.2, 0.8, x) stays flat until 0.2, eases smoothly up through the middle, and flattens out after 0.8 — the single most useful easing curve in all of shader work. Replace the linear y = st.x with it.