lerpColor() over a for-loop of stacked lines builds a smooth gradient in p5.js

p5.js has no built-in gradient fill for shapes, so gradients are built by drawing many thin lines from a startColor to an endColor. map() converts the loop variable (0..height) to an amt in 0-1, and lerpColor(c1, c2, amt) blends the two color objects proportionally at that amount — interpolation, gradually moving between two color values. Stacking one line per row yields a linear gradient; concentric circles with hue shifted incrementally in HSB give a radial (lens-flare) gradient.

Examples

let c1 = color(0, 80, 100); let c2 = color(240, 80, 100); for (let y = 0; y < height; y++) { let amt = map(y, 0, height, 0, 1); stroke(lerpColor(c1, c2, amt)); line(0, y, width, y); }

Assessment

Implement a top-to-bottom gradient from red to blue with lerpColor and state what amt equals at y = height/2.