Creating a Stepped Gradient Shader in Unity
Let's build a stepped gradient in Unity! This a form of gradient with hard transitions between the different keyframes in the gradient which creates clear blocks of color like you might see on a flag or logo. To do this we'll take advantage of the `lerp` and `step` function.
The `lerp(x, y, s)` function takes 3 arguments and standards for linear interpolation. This means a constant transition occurs between the left-hand side (`x`) and right-hand side (`y`) as the value (`s`) moves between 0 and 1. For example: `lerp(0, 10, 0.5)` will return `5`.
The `step(l, r)` function takes 2 arguments and returns either 0 or 1 depending on if the left-hand side (`l`) is greater than the right-hand side (`r`). For example `step(5, 1)` will return `0` because `5` is greater than `1`, if the arguments are reversed `step(1,5)` would return `1`.
We can use this behavior to define our gradient. Each "key" in the gradient can be represented as a `step` function that either selects the new value in the gradient or returns the…