Υποενότητα 10.1: Εικόνα στο p5

Εικόνες - Images in p5.js

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

Ο πρώτος τρόπος είναι η εμφάνιση μιας εικόνας μετά τη φόρτωση της εικόνας.

Για να γίνει αυτό, πηγαίνουμε στη συνάρτηση setup () και γράφουμε τον ακόλουθο κώδικα:

function setup() {
 
  loadImage('myfolder/myImage.jpg', function(myImg) {
    image(myImg, 0, 0);
  });
}

Στον παραπάνω κώδικα, μέσα στο loadImage() έχουμε τη διαδρομή προς το φάκελο και τη λειτουργία για την εμφάνιση της εικόνας. Η παράμετρος της συνάρτησης myImg, διατηρεί ως τιμή την εικόνα μας.

Η εντολήimage(myImg, 0, 0); είναι αυτή που εμφανίζει την εικόνα. Οι 0,0 είναι οι συντεταγμένες x και y στις οποίες θα τοποθετηθεί η εικόνα.

Χρησιμοποιώντας τον παραπάνω τρόπο, ενδέχεται να αντιμετωπίσουμε κάποια προβλήματα στο έργο μας, επειδή η εικόνα ενδέχεται να μην είναι άμεσα διαθέσιμη για εμφάνιση.

Εάν θέλουμε να φορτώσουμε πρώτα την εικόνα και να αρχίσουμε να κάνουμε τα πράγματα με αυτήν, είναι προτιμότερο να χρησιμοποιήσουμε τον δεύτερο τρόπο:

let myImg;
function preload() {
  myImg = loadImage('myfolder/myImage.jpg');
}
function setup() {
  image(myImg, 0, 0);
}

Η συνάρτηση   preload() θα πρέπει να χρησιμοποιείται πάντα πριν τη συνάρτηση setup (). Όταν χρησιμοποιείται, η setup () περιμένει μέχρι να ολοκληρωθεί η φόρτωση για να ξεκινήσει τη λειτουργία της.

Συναρτήσεις 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

Λίστα εικονοστοιχείων - 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