let c1, c2;

​

function setup() {

  createCanvas(400, 400);

//   for colors C1 is the starting color C2 is the 2nd color in the gradiant "from to"

  c1 = color(0, 40, 40);

  c2 = color(96,96,90);

}

​

function draw() {

  //call the function

  gradientSky(0, 0, width, height, c1, c2);

}

​

// color function

function gradientSky(x, y, w, h, c1, c2) {

  noFill();

    // Top to bottom gradient pixcel by pixcel vertically

    for (let i = y; i <= y + h; i++) {

      let inter = map(i, y, y + h, 0, 1);

//     https://p5js.org/reference/p5/lerpColor/

      let c = lerpColor(c1, c2, inter);

//       strok of C colors the shades

      stroke(c);

//       a horizantal line is drawn for each i creating the gradiant 

      line(x, i, x+w, i); 

  }

}