Reference pixels

pixels

An array containing the color of each pixel in the image.

Colors are stored as numbers representing red, green, blue, and alpha (RGBA) values. img.pixels is a one-dimensional array for performance reasons.

Each pixel occupies four elements in the pixels array, one for each RGBA value. For example, the pixel at coordinates (0, 0) stores its RGBA values at img.pixels[0], img.pixels[1], img.pixels[2], and img.pixels[3], respectively. The next pixel at coordinates (1, 0) stores its RGBA values at img.pixels[4], img.pixels[5], img.pixels[6], and img.pixels[7]. And so on. The img.pixels array for a 100×100 p5.Image object has 100 × 100 × 4 = 40,000 elements.

Accessing the RGBA values for a pixel in the image requires a little math as shown in the examples below. The img.loadPixels() method must be called before accessing the img.pixels array. The img.updatePixels() method must be called after any changes are made.

Examples

Notice any errors or typos? Please let us know. Please feel free to edit src/image/p5.Image.js and open a pull request!

Related References