P5.js Study 008

Generative Design with p5.js / Sketch P_1_2_3_03 を試しながらアレンジ。
元ネタ：https://editor.p5js.org/generative-design/sketches/P_1_2_3_03

新たに覚えたコマンドなど

グラデーションについてはP5.jsに展開されておらず、Canvasネイティブの機能を使用する必要がある。
そのため以下のようなコードでグラデーションを生成している。

function gradient(x, y, w, h, c1, c2) {
  var ctx = drawingContext; // global canvas context p5.js var
  var grd = ctx.createLinearGradient(x, y, x, y + h);
  grd.addColorStop(0, c1.toString());
  grd.addColorStop(1, c2.toString());
  ctx.fillStyle = grd;
  ctx.fillRect(x, y, w, h);
}

その他は基本的にP5.js Study 007と同じ。
タイルのY座標の決め方は同じで、高さを100%以上にしてタイル同士をオーバラップさせ、タイルを半透明にすることで裏にある色を見せている。

もう少し明るい色にアレンジしたかったが、黒からのグラデーションで塗っているため難しかった。白からのグラデーションでは思うような絵にならない。