JavaSprictでグラデーションの描き方がよくわかりません

実現したいこと

quad(418,435,457,412.5,457,170,418,150)の図形で、一番下がfill(100)、一番上がfill(200)なにるようにグラデーションにしたいです。

発生している問題・分からないこと

根本的にグラデーションの付け方が分からないです。

該当のソースコード

p5js

1下に書いたので特になし

試したこと・調べたこと

上記の詳細・結果

チャットGPTに相談したら
// 上端で白、下端で黒くなるように色を設定
let topColor = color(255);
let bottomColor = color(0);

// 上端から下端まで線形補間して色を決定
for (let y = 150; y <= 435; y++) {
let inter = map(y, 150, 435, 0, 1);
let c = lerpColor(topColor, bottomColor, inter);
fill(c);
let x1 = 418 + (y - 150) * (457 - 418) / (435 - 150);
let x2 = 457 - (y - 150) * (457 - 418) / (435 - 150);
quad(x1, y, x2, y, x2, y - 1, x1, y - 1);
}
と紹介されましたが、座標が無茶苦茶で、自分で直すこともできません

補足

特になし