Previous

Λίστα εικονοστοιχείων - pixels array

Στο προηγούμενο παράδειγμα, παρουσιάσαμε πώς μπορούμε να προβάλλουμε και να χειριζόμαστε μια εικόνα στο p5.js.

Ωστόσο, όπως ίσως έχετε παρατηρήσει, αυτή η μέθοδος απαιτεί κάποιο χρόνο ακόμη και για μικρές εικόνες. Εάν είχαμε μια μεγαλύτερη εικόνα, τότε το πρόγραμμα θα τρέξει πολύ αργά.

Χρησιμοποιώντας εικονοστοιχεία - pixels όχι μόνο εξοικονομείται πολύς χρόνος, αλλά μας δίνει και πολλές επιλογές διαμόρφωσης.

Λοιπόν, πώς αποκτάτε πρόσβαση σε εικονοστοιχεία μιας εικόνας;

Όπως γνωρίζετε ήδη, κάθε εικονοστοιχείο - pixel has 4 values: R(red - κόκκινο), G(green - πράσινο) B(blue - μπλε) και A(alpha).

Στο p5.js έχουμε μια λίστα JavaScript - array που ονομάζεται pixels array. Αυτή η διατηρεί τις τιμές RGBA για κάθε εικονοστοιχείο του καμβά μας, οπότε 1 pixel θα έχει 4 τιμές στην  array.

Προκειμένου να χειριστούμε τα εικονοστοιχεία, πρέπει να είμαστε σε θέση να περάσουμε από αυτή την array.

Για να το κάνουμε αυτό χρησιμοποιούμε τον τύπο: (x+y*width)*4

Για να κατανοήσετε τον τύπο, παρακολουθήστε το βίντεο

.

Παράδειγμα

Ακολουθεί ένα παράδειγμα κώδικα που χρησιμοποιεί την pixel array για να χειριστεί τα χρώματα μιας εικόνας σύμφωνα με τη θέση mouseX και mouseY του Σημειώστε πώς έχουμε πρόσβαση στις τιμές R και B κάθε εικονοστοιχείου:

// 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);
}

Σημειώστε πώς έχουμε πρόσβαση στις τιμές R και B κάθε εικονοστοιχείου: 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);
}

Κάντε μια  Git commit με το μήνυμα "pixels array".

  • Δείτε περισσότερα για την pixels array
Previous