createCanvas(windowWidth, windowHeight);

}

​

function draw() {

  background(255);

  gradientRect(400,100,  10,0,0,  200,100,100);

}

​

  // concept of a gradient rectangle

  // 1. rect need a width and height(and position)

  // 2. graident need 2 color and 

  //   variable(can change between 2 points) 

  // 3. how to conbine these 2 concept

  // -> tons of horizontal lines between the top and bottom edge

  //  different stroke color

  //  assign the color to the position 

​

  // Parameter

​

function gradientRect( rectHeight, startY,  r1, g1, b1,  r2, g2, b2 ) {

  //how tall is this rectangle(start point and ends point)

  //the distance between the top edges of the canvas &rectangle 

  //2 set of color

  //assign one variable to present color (3 Parameters)

  //call the color easily

  //add the interactive part here

  c1 = color(r1 , g1, b1+3*mouseX/10);

  c2 = color(r2 , g2+3*mouseY/10, b2);

  // without the interaction with my mouse

  // c1 = color(r1 , g1, b1);

  // c2 = color(r2 , g2, b2);

​

  // position of these lines

  // for loop with 3 arguments >> y+ step

​

  for (let y = startY; y < startY + rectHeight; y+=1) {

    let inter = map( y, startY, startY+rectHeight, 0, 1);

    // 3 arguments > value 1&2 and percentage

    // assign the third argument 0.3 (0-1)

    // u will get the point on 30% along the way between val1 & val 2

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

    stroke(strokeColor);

    line(0, y, width, y);

  }

}