Remap Function
remap linearly maps a value from one numeric range to another. Mapping vUv.x from [0,1] to [-1,1] and taking the absolute value creates a symmetric V-shape that drives a two-color gradient:
Let's break down each step.
What remap does
It takes a value from a known range and proportionally places it in a new range:
The first line finds where v falls within the input range (as a 0–100% proportion). The second line places that proportion into the output range.
For example: remap(0.25, 0.0, 1.0, -1.0, 1.0) → 0.25 is 25% of the way through [0,1], so the result is -0.5 (25% of the way through [-1,1]).
Absolute value creates a V-shape
remap(vUv.x, 0.0, 1.0, -1.0, 1.0) transforms x coordinates from [0,1] to [-1,1]:
- Left edge x=0 → t=-1
- Canvas center x=0.5 → t=0
- Right edge x=1 → t=1
After abs(t):
- Both edges → 1 (100%)
- Canvas center → 0 (0%)
This is a V-shape: minimum at the center, maximum at both sides.
Coloring with mix
mix(blue, pink, t) interpolates between the two colors using t: t=0 is blue (center), t=1 is pink (edges). The result is a symmetric gradient that fans out from blue at the middle to pink at both sides.
Try changing it
| Change | Effect |
|---|---|
Change output range to 0.0, 2.0 | t exceeds [0,1], center changes color but never reaches pink |
Remove abs | Asymmetric gradient, pink on the left and blue on the right |
Replace vUv.x with vUv.y | Gradient runs vertically |
| Change both mix colors to warm tones | Orange-to-red gradient |
Exercise
The exercise has the remap function defined, but t is not yet computed. Use remap to map vUv.x from [0,1] to [-1,1], then take the absolute value, so the canvas shows a symmetric gradient from blue to pink.
Answer Breakdown
The starting code has t = 0.0, making the entire canvas the first mix color (blue).
remap(vUv.x, 0.0, 1.0, -1.0, 1.0) stretches x from [0,1] to [-1,1]. abs(t) folds the left half [-1,0] back over the right half [0,1] for left-right symmetry: center t=0 is blue, both edges t=1 are pink.
Try replacing abs(t) with t * t — squaring gives a different curve shape where the transition is more gradual in the center.