Submodule 18.1: Image in p5.js I

pixels array

In the previous example, we show how we can display and manipulate an image in p5.js.

However, as you may have noticed, this method requires some time even for small images. If we had a bigger image, then the program would run very slow.

Using pixels to display an image, not only saves a lot of time, but also gives us a lot of manipulation options.

So, how do you access pixels of an image?

As you already know, each pixel has 4 values: R(red), G(green) B(blue) and A(alpha).

In p5.js we have an array called pixels array. This array holds the RGBA values for every single pixel of our canvas, thus 1 pixel will have 4 values in the array.

In order to manipulate the pixels, we need to be able to go through that array.

To do this we use the formula: (x+y*width)*4

In order to understand the formula, watch the video

Example 

Here is an example code which use the pixel array to manipulate the colors of an image according to mouseX and mouseY position. Note how we access the R and B values of each pixel:

// create a variable for the image
let chocos;
// preload image
function preload() {
  chocos = loadImage("images/chocos.jpg");
}

function setup() {
  // create canvas the same size as the image
  createCanvas(800,562);
}

function draw() {
  // show the 'initial image
  chocos.loadPixels();
  // go through each row
  for (let y = 0; y < height; y++) {
    // and each column
    for(let x = 0; x < width; x++) {
      // go through all pixels of image, R, G, B, and A
      let index = (x + y * width) * 4;
      // play with rgb values
        chocos.pixels[index] = mouseY; // red
        chocos.pixels[index + 2] = mouseX; // blue
      }
    }
    chocos.updatePixels();
    // display manipulated image
  image(chocos, 0, 0);
}

You can see the result of the above code here

Exercise

1. Open your Visual Studio editor and the p5yourName folder.
2. Open the file ex812.js in your editor and save it as ex1013.js
3. Open the file ex812.html in your editor and save it as ex1013.html
4. In the ex1013.html file, update the link to ex921.js  from exersice812.js
5. Go to the index.html file and create, under Module 10, a link to the ex1013.html  file with the title "pixels array".

Modify the ex1013.jsfile and using as a base the above example, manipulate the image using random() to create an olds television "snow" effect. You can see here an example.

Answer:

// create a variable for the image
let chocos;
// preload image
function preload() {
  chocos = loadImage("images/chocos.jpg");
}

function setup() {
  // create canvas the same size as the image
  createCanvas(800,562);
}

function draw() {
  // show the 'initial image
  chocos.loadPixels();
  // go through each row
  for (let y = 0; y < height; y++) {
    // and each column
    for(let x = 0; x < width; x++) {
      // go through all pixels of image, R, G, B, and A
      let index = (x + y * width) * 4;
      // play with rgb values
      // create an old television effect
        chocos.pixels[index] = random(255); // red
        chocos.pixels[index + 2] = random(0,155); // blue
     
      }
    }
    chocos.updatePixels();
    // display manipulated image
  image(chocos, 0, 0);
}

Do a Git commit with the message "pixels array".

• See more about the pixels array