Υποενότητα 10.1: Εικόνα στο p5
Site: | ΕΛ/ΛΑΚ Moodle |
Course: | WEB II - Προηγμένος σχεδιασμός |
Book: | Υποενότητα 10.1: Εικόνα στο p5 |
Printed by: | Guest user |
Date: | Sunday, 8 September 2024, 3:57 AM |
Description
- Εικόνες - Images in p5.js
- get() and set()
- Λίστα ιχνοστοιχείων - pixels array
Εικόνες - 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
- Open your Visual Studio editor and the
p5yourName
folder. - Open the file
ex812.js
in your editor and save it asex1012.js
- Open the file
ex812.html
in your editor and save it asex1012.html
- In the
ex1012.html
file, update the link toex1012.js
from exersice812.js - Go to the
index.html
file and create, underModule 10
, alink
to theex1012.html
file with the title "get() and set()".
Modify the ex1012.js
file 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.
// 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
- Open your Visual Studio editor and the
p5yourName
folder. - Open the file
ex812.js
in your editor and save it asex1013.js
- Open the file
ex812.html
in your editor and save it asex1013.html
- In the
ex1013.html
file, update the link toex921.js
from exersice812.js - Go to the
index.html
file and create, underModule 10
, alink
to theex1013.html
file with the title "pixels array".
Modify the ex1013.js
file 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.
// 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