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

Διαμόρφωση χώρου εργασίας

Ας δημιουργήσουμε έναν ιστότοπο p5 στον υπολογιστή μας.

Ακολουθήστε τα επόμενα βήματα

Ανοίξτε το πρόγραμμα επεξεργασίας του Visual Studio και το φάκελο p5yourName 

Πατήστε το Shift και επιλέξτε τα αρχεία index.html και sketch.js. Κάνετε δεξί κλικ και κάντε κλικ στην αντιγραφή των αρχείων.

Κάντε δεξί κλικ στο φάκελο module08 και επιλέξτε επικόλληση.

Μετονομάστε τα αρχεία στο φάκελο module08. Το αρχείο index.html στο ex812.html και το sketch.js στο ex812.js

Στο αρχείο ex812.html, ενημερώστε τη σύνδεση με το αρχείο ex812.js από το sketch.js

Ενημερώστε επίσης τους συνδέσμους για τις βιβλιοθήκες p5

Ενημερώστε τον κώδικα στο αρχείο ex812.js

function setup() {
// create canvas
createCanvas(800,500);
// set background color
background('#31bc33');
}

Αποθηκεύστε κάθε αρχείο

Τροποποιήσεις του αρχείου index.html

Μεταβείτε στο αρχείο index.html και διαγράψτε όλες τις ετικέτες <script> και <style>

Δημιουργήστε ετικέτες <h2> για τις μονάδες p5

<h2>Module 8</h2>
<h2>Module 9</h2>
<h2>Module 10</h2>

Δημιουργήστε, κάτω από την ενότητα 8, μια σύνδεση με το ex812.html με έναν κατάλληλο τίτλο

<ul>
  <li>
     <a href="module08/ex812.html" target="_blank">Ex812 - A canvas example</a>
   </li>
 </ul>

Save the index.html file

p5 Server

Ανοίξτε το διακομιστή p5 (θυμηθείτε για αυτό) και κάντε κλικ στον σύνδεσμο. Μπορείτε να δείτε μια εργασία ex812.html !!

Commit

Do a Git commit with the message Initial Site Setup.

Visual Studio Editor 

Ανοίξτε στον επεξεργαστή σας τις Επεκτάσεις και αναζητήστε p5. εγκαταστήστε την επέκταση p5Canvas που σας επιτρέπει να κάνετε προεπισκόπηση του κώδικα p5js σε καμβά δίπλα-δίπλα στον κώδικα. Ο καμβάς ανανεώνεται ζωντανά κατά την επεξεργασία.

Ανοίξτε το exersice812.js και ενεργοποιήστε τη ζωντανή προεπισκόπηση του p5Canvas. Δεν συμβαίνει τίποτα!!

Αντιγράψτε τη λειτουργία του φόντου ('# 31bc33') από το setup () για να σχεδιάσετε () για να δείτε ζωντανά τον κωδικό σας. Η επέκταση p5Canvas παρακολουθεί τις αλλαγές στη λειτουργία draw (), όχι στη ρύθμιση ()!