Υποενότητα 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 () περιμένει μέχρι να ολοκληρωθεί η φόρτωση για να ξεκινήσει τη λειτουργία της.