Previous
Next

Συναρτήσεις get() and set()

Στο p5.js μπορούμε να χρησιμοποιήσουμε τη συνάρτηση  get() για να αποκτήσουμε μια περιοχή pixel από μια εικόνα.

Αυτή η συνάρτηση  δέχεται 4 ορίσματα:

get(x,y,w,h)

  • Εάν χρησιμοποιείται χωρίς ορίσματα, η εικόνα παραμένει όπως ήταν.
  • Εάν χρησιμοποιείται μόνο με τα ορίσματαx, y, εξάγεται ένα εικονοστοιχείο.
  • Εάν χρησιμοποιείται με όλες τα ορίσματα, εξάγεται μια ορθογώνια περιοχή.

Η συνάρτησηset() χρησιμοποιείται μαζί με την  createImage() και την loadPixels().  Η λογική είναι ότι πρώτα δημιουργούμε μια νέα εικόνα στο p5.js και φορτώνουμε τα εικονοστοιχεία της και στη συνέχεια, φορτώνουμε τη νέα εικόνα.

Ας δούμε ένα παράδειγμα για να κατανοήσουμε καλύτερα τι κάνουν αυτές οι συναρτήσεις.

Παράδειγμα

Ακολουθεί ένα παράδειγμα κώδικα που χρησιμοποιεί τις f get() , set(), createImage() και 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);
}

Μπορείτε να δείτε το αποτέλεσμα του παραπάνω κώδικα 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);
}

Κάντε μια  Git commit με το μήνυμα"get() and set()".

  • Δείτε περισσότερα για την get() function
  • Δείτε περισσότερα για την set() function
  • Δείτε περισσότερα για την createImage() function
  • Δείτε περισσότερα για την loadPixels() function
Previous
Next