p5Image

p5Image, commonly referred to as p5.Image, is the image object used in the p5.js library. It represents an image stored in memory and provides both high-level drawing and low-level pixel access. A p5.Image can be created by calling createImage(width, height) to allocate a blank image, or by loading an image file with loadImage(path, callback). The loading operation is asynchronous, and the image object becomes available when the file has been read.

Pixel data are stored as a one-dimensional array in left-to-right, top-to-bottom order, with four consecutive values per pixel representing red, green, blue, and alpha channels (RGBA). To modify pixel data, one must first call loadPixels(), edit the pixels array, then call updatePixels() to apply changes to the image. The methods get(x, y) and set(x, y, color) provide convenient per-pixel access, returning or accepting color values or objects. The image's dimensions are given by width and height properties.

p5.Image objects can be drawn to the canvas with the image() function, using the image's own width and height or a specified width and height. They also support operations such as resizing (resize(width, height)), masking (mask(maskImage)), and various image filtering and color adjustments through the library's image processing APIs. Because p5.Image is a part of the sketch's runtime, it benefits from p5.js' preload, setup, and draw lifecycle.

In summary, p5.Image is the core in-memory representation of images in p5.js, enabling both display and fine-grained pixel manipulation for creative coding tasks.