Pixel Array in p5js.  from Coding Train

https://www.youtube.com/watch?v=nMUMZ5YRxHI&ab_channel=TheCodingTrain

​

Each pixel takes four spots in the pixel array R,G,B,A

​

Then the formula to get to each pixel is x + y * 2 and then we multiply the result by 4 (RGBA)

​

(x + y * 2) * width

​

*/

​

function setup() {

  createCanvas(400, 400);

  // makes the canvas be 1 pixel per

  // pixel.  Retina displays use 8 pixels per pixel

  pixelDensity(1);

}

​

function draw() {

  background(0);

​

  loadPixels();

  for (let y = 0; y < height; y++) {

    for (let x = 0; x < width; x++) {

      let index = (x + y * width) * 4;

      pixels[index + 0] = 255;

      pixels[index + 1] = 0;

      pixels[index + 2] = 255;

      pixels[index + 3] = 255;

    }

  }

  updatePixels();

}

​