【p5.js問題集】線形グラデーション【6問目】

次のような線形グラデーションを描いてください。
色や変化の間隔などは問いません。

function setup() {
  createCanvas(255, 255);

  let col = 0;

  for (let y = 0; y <= height; y++) {
    stroke(col);
    
    for (let x = 0; x <= width; x++) {
      point(x, y);
    }
    col++;
  }
}

あるいは

function setup() {
  createCanvas(255, 255);
  
  //2D描画の指定とグラデーションの作成
  const ctx = canvas.getContext("2d");         
  const gradient = ctx.createLinearGradient(0, 0, 0, 255);
  
  //色と位置の指定
  gradient.addColorStop(0, 'black');
  gradient.addColorStop(1, 'white');
  
  //スタイルの適用と描画
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 255, 255);             
}

補足
グラデーションの描き方はいくつか考えらえる。
色を変化させながらピクセル配列に直接書き込んだり図形を描いたり、あるいはp5.jsならHTMLのcontext機能を使って描画することも出来る。