p5.jsでpixel操作をするとなんか結果が小さくなる

題の通り。

現象

loadPixels();
for (let y = 0; y < height; y++) {
  for (let x = 0; x < width; x++) {
    const idx = 4 * (y * height + x);
    pixels[idx] = 100; // r
    pixels[idx+1] = 100; // g
    pixels[idx+2] = 100; // b
    pixels[idx+3] = 100; // a
  }
}
updatePixels();

みたいにやってもキャンバス全体じゃなくて細長い範囲しか描画されない。
みたいな現象。

原因

画面の解像度を考慮していない。
解像度が高いディスプレイだとピクセル情報が 4 * width * height の数よりも多い。

解決方法

pixelDensity(1) とする。

もしくは解像度を考慮したピクセル操作をするか…。