Υποενότητα 8.2: p5.js Τα Βασικά

Προκειμένου να ξεκινήσουμε την κωδικοποίηση με το p5.js, πρέπει πρώτα να δημιουργήσουμε τον καμβά μας.

Για να γίνει αυτό, χρησιμοποιούμε τη pre-build p5.js function createCanvas();

Αυτή η συνάρτηση ορίζεται μόνο μία φορά στη ρύθμισή μας.

Αυτή η συνάρτηση δέχεται δύο ορίσματα: πλάτος και ύψος, έτσι έχουμεcreateCanvas(width, height); 

Όταν καλούμε αυτή τη συνάρτηση με συγκεκριμένες τιμές, το στοιχείο καμβά δημιουργείται στο έγγραφο με διαστάσεις πλάτους και ύψους ίσες με τις τιμές που έχουμε περάσει. Οι τιμές που περνάμε αποδίδονται αυτόματα σε μονάδες εικονοστοιχείων - pixels units. 

Όταν καθορίζουμε αυτές τις τιμές, μπορούμε να χρησιμοποιήσουμε απευθείας το πλάτος και το ύψος μέσα στον καμβά μας για να αναφερθούμε στις τιμές τους.

Αν δεν χρησιμοποιήσουμε το createCanvas();   στον κώδικα μας, το σύστημα δημιουργεί αυτόματα ένα με 100 x 100 εικονοστοιχεία.

Ένα ωραίο χαρακτηριστικό του p5.js είναι ότι μας επιτρέπει να δημιουργήσουμε έναν καμβά που ισούται με το πλάτος και το ύψος της σελίδας μας, ακόμα κι αν δεν γνωρίζουμε το μέγεθός του. Αυτό επιτυγχάνεται με τις μεταβλητές συστήματος - system variables windowWidth and windowHeight.

Αυτές οι μεταβλητές αποθηκεύουν αυτόματα το πλάτος και το ύψος της σελίδας μας. Έτσι γράφοντας  createCanvas(windowWidth,windowHeight);  θα έχει ως αποτέλεσμα τη δημιουργία καμβά ίσου με το μέγεθος του παραθύρου του προγράμματος περιήγησης.

• Δείτε περισσότερα σχετικά με τη  createCanvas() function