Υποενότητα 8.1: p5.js Εισαγωγή

Εισαγωγή to p5.js

p5.js είναι μια βιβλιοθήκη JavaScript που επιτρέπει δημιουργικές εκφράσεις μέσω του προγραμματισμού.

Με το p5.js μπορείτε να δημιουργήσετε σκίτσα, κινούμενα σχέδια, προσομοιώσεις ή οτιδήποτε δημιουργικό που έρχεται στο μυαλό σας. Μπορείτε επίσης να χειριστείτε τον ήχο, το βίντεο και τις εικόνες. Το πιο σημαντικό είναι ότι η βιβλιοθήκη έχει προ-κατασκευασμένες συναρτήσεις - pre-build functions που καθιστούν όλα τα παραπάνω πολύ πιο εύκολα από ό, τι θα ήταν αν τα δημιούργησε από το μηδέν

Αυτή η βιβλιοθήκη είναι η "νέα έκδοση" της γλώσσας Processing. Η Processing είναι επίσης μια δημιουργική γλώσσα προγραμματισμού. Η κύρια διαφορά της με το p5.js, είναι ότι η Processing  βασίζεται στην Java ενώ το p5.js βασίζεται στο JavaScript,

Οι εφαρμογές που βασίζονται στην Java δεν υποστηρίζονται πλέον από προγράμματα περιήγησης και επομένως αυτά τα applets δεν είναι πλέον προσβάσιμα. Αυτός είναι ο λόγος για τον οποίο το p5.js εφευρέθηκε, χρησιμοποιώντας όλα τα χαρακτηριστικά επεξεργασίας και μεταφράζοντάς τα στην τρέχουσα γλώσσα του προγράμματος περιήγησης - JavaScript.

• Δείτεπερισσότερα για τη βιβλιοθήκη p5.js/li>

Παραδείγματα έργων p5.js

Από τη στιγμή που το p5.js δεν χρησιμοποιείται ακόμη ευρέως, ίσως είναι δύσκολο, στην αρχή, να φανταστείτε τι μπορείτε να δημιουργήσετε μαζί του.

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

• p5.js Demos in codepen
• p5.js examples in jagracar
• p5.js stars
• p5.js sketchmachine

Επίσης, ένα παράδειγμα του p5.js στο youtube:

Getting Started with p5.js I

npm install -g p5-manager

p5 --version

Getting Started with p5.js II

Setting up a p5 folder

Μεταβείτε στη θέση του φακέλου στην επιφάνεια εργασίας σας και αντιγράψτε τη διεύθυνση.

Ανοίξτε ένα παράθυρο / τερματικό cmd και μετακινήστε το στον φάκελο της επιφάνειας εργασίας, επικολλώντας τη διεύθυνση.

Στη γραμμή εντολών πληκτρολογήστε p5 g -b p5YourName για να δημιουργήσετε το φάκελο p5.

Μέσα στο φάκελο libraries υπάρχουν 3 αρχεία.

• Το p5.js είναι το κύριο αρχείο που περιέχει τις πληροφορίες που απαιτούνται για να λειτουργήσει το p5.js
• Το αρχείο p5.sound.js επιτρέπει στο p5.js να χειριστεί / δημιουργήσει αρχεία ήχου
• Το p5.dom.js μας επιτρέπει να αλληλεπιδράσουμε με τα στοιχεία HTML5.

Πηγαίνετε στη θέση του φακέλου P5 και ...

• δημιουργήστε 3 sub-sub-folders,module08, module09 and module10 

Getting Started with p5.js III

Αρχικοποίηση μιας Git repository

Στο terminal μεταβείτε στο φάκελο p5yourName πληκτρολογώντας

cd p5yourName

Στη συνέχεια, αρχικοποιήστε ένα αποθετήριο Git στο φάκελο p5 πληκτρολογώντας "git init".

Στη συνέχεια, ανοίξτε το φάκελο p5yourName στο πρόγραμμα επεξεργασίας και δημιουργήστε ένα αρχείο ".gitignore" με το περιεχόμενο: libraries. Μην ξεχάσετε να αποθηκεύσετε το αρχείο!!

Στο terminal, ελέγξτε την Git repository's status git status.

Προσθέστε τα αρχεία στην staging area "git add ."

Ελέγξτε ξανά με ένα git status

Commit την τρέχουσα staging area στην Git repository 'git commit -m "p5 Initial Setup"'.

Ελέγξτε ξανά με ένα git status

Getting Started with p5.js IV

p5 server

• Ανοίξτε ένα νέο παράθυρο / τερματικό cmd και μεταβείτε στο φάκελο p5yourName.
• Στην prompt πληκτρολογήστε  p5 server. Αυτή θα ενεργοποιήσει ένα p5-server module στο έργο σας.
• Ανοίξτε το πρόγραμμα περιήγησης στη URL localhost:5555/index.html

Your server is ON!

Προσθέστε στο sketch.js τον κώδικα console.log("Hello  p5!") και αποθηκεύστε. 

Επαναφορτώστε το πρόγραμμα περιήγησης και ελέγξτε στην κονσόλα. Ολα είναι καλά!!

Στον επεξεργαστή σας Discard these changes για να αποφύγετε την ενημέρωση του Git και να αποθηκεύσετε το αρχείο.