p5jsのloadPixelsについて

Question

こんにちは

p5.jsのドキュメントにあった、loadPixelsについてなのですが、このpixelsというarrayはどの様な仕組みになっているのでしょうか？見ていると、y座標にcanvasの幅をかけて、そこにx座標を足したものをキーにしていたりと、どの様に位置を特定しているのかの仕組みがわかりません。

端的に聞くと、loadPixelsを使って、canvasを描画する方法を知りたいということです

よろしくお願いいたします。

var pink = color(255, 102, 204);
loadPixels();
var d = pixelDensity();
var halfImage = 4 * (width * d) * (height/2 * d);
for (var i = 0; i < halfImage; i+=4) {
  pixels[i] = red(pink);
  pixels[i+1] = green(pink);
  pixels[i+2] = blue(pink);
  pixels[i+3] = alpha(pink);
}
updatePixels();

以下訂正------------------------------------------------------

loadPixelsの仕組みはなんとなくわかったのですが、以下の様に打ってもパーリンノイズの雲模様が出てきません。
間違っているところを教えてください。
よろしくお願いいたします。

var c=0;
var detail = 100;


function setup(){
    createCanvas(200,200);
    background(0);
    
}

function draw(){
    background(255);
    loadPixels();
    for(var y=0;y<height;y++){
        for(var x=0;x<width;x++){
            var bright = map(noise((x+c)/detail,(y+c)/detail),0,1,0,255);
            pixels[x+y*width] = color(bright);
        }
        c++;
    }
    updatePixels();
};