Working with Images and Pixels

When you want to use photographic or drawn images as a base for generative art, P5.js provides a powerful set of tools. The loadImage() function lets you load image files into your sketch, supporting formats such as JPG, PNG, and GIF. Once loaded, you can display the image on the canvas using the image() function, which draws your image at a specified location and size.

For deeper creative manipulation, P5.js gives you direct access to every pixel in the canvas through the pixel array. By calling loadPixels(), you can read and modify the RGBA values of each pixel. After making changes, use updatePixels() to apply your edits to the canvas. This workflow allows you to create custom filters and effects, such as inverting colors, adding noise, or generating mosaic patterns. By combining these tools, you can transform static images into dynamic, generative artworks that respond to algorithms or user interaction.