Print this chapterPrint this chapter

Submodule 18.1: Image in p5.js I

get() and set()

In p5.js we can use get() in order to get a region of pixels from an image.

This function accepts 4 arguments:

get(x,y,w,h)

If it is used without arguments, the image stays as it was.

If it is used with only x,y arguments, a pixel is extracted.

If it is used with all parameters, a rectangular area is extracted.

set() is used together with createImage() and loadPixels(). The logic is that we first create a new image in the p5.js and we load its pixels. In continue we set the new image.

Let's see an example to understand better what these functions are doing.

Example 

Here is an example code which uses all of get() , set(), createImage() and loadPixels() :

// define two variables for the images
let choco1, choco2;
// use preload to load the image before setup
function preload() {
  choco1 = loadImage("images/choco.jpg");
}
function setup() {
  // create canvas with the same size as the images
  createCanvas(110,110);
  // create a new image
  choco2 = createImage(110, 110);
  // load the pixel array of the image in order to be able to manipulate them
  choco2.loadPixels();
  // go through each row of the choco1 image
  for (let y = 0; y < height; y++) {
    // go through each column of the choco1 image
    for (let x = 0; x < width; x++) {
      // use get() to take each pixel
      let myPixel = choco1.get(x, y);
      // set it to the opposite corner (turn image upside down)
      choco2.set(width - x, height - y, myPixel);
    }
  }
  // update the pixel array of the choco2 image
  choco2.updatePixels();
  // display the new image
  image(choco2, 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 ex1012.js
  3. Open the file ex812.html in your editor and save it as ex1012.html
  4. In the ex1012.html file, update the link to ex1012.js  from exersice812.js
  5. Go to the index.html file and create, under Module 10, a link to the ex1012.html  file with the title "get() and set()".

Modify the ex1012.jsfile and use as a base the above example to create an image that starts from the middle of the x-axis and ends at the end of the width. You can see here an example.

Answer:

// define two variables for the images
let choco1, choco2;
// use preload to load the image before setup
function preload() {
  choco1 = loadImage("images/choco.jpg");
}
function setup() {
  // create canvas with the same size as the images
  createCanvas(110,110);
  // create a new image
  choco2 = createImage(110, 110);
  // load the pixel array of the image in order to be able to manipulate them
  choco2.loadPixels();
  // go through each row of the choco1 image
  for (let y = 0; y < height; y++) {
    // go through the middle of the choco1 image to the end
    for (let x = 25; x < width; x++) {
      // use get() to take each pixel
      let myPixel = choco1.get(x, y);
      // set the x and y of the image
      choco2.set(x, y, myPixel);
    }
  }
  // update the pixel array of the choco2 image
  choco2.updatePixels();
  // display the new image
  image(choco2, 0, 0);
}

Do a Git commit with the message "get() and set()".