Κωδικοποίηση Simple Playdoh Shapes W/ P5.js & Makey Makey: 7 Βήματα

2025 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2025-01-23 14:39

Έργα Makey Makey »

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

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

Δεν χρειάζεστε εμπειρία κωδικοποίησης για να κάνετε αυτό το έργο. Αυτό θα μπορούσε να χρησιμοποιηθεί ως εισαγωγή στην κωδικοποίηση βάσει κειμένου (σε αντίθεση με τις γλώσσες που βασίζονται σε μπλοκ, όπως το Scratch). Χρειάζεται μόνο να γράψετε 4 γραμμές κώδικα για να ολοκληρώσετε αυτό το έργο. Υπάρχουν διάφοροι τρόποι με τους οποίους μπορείτε να αλλάξετε και να επεκτείνετε αυτήν τη βασική ιδέα.

Προμήθειες

Σετ Makey Makey (με 2 κλιπ αλιγάτορα)

Playdoh (Οποιοδήποτε χρώμα)

Φορητός υπολογιστής με σύνδεση στο Διαδίκτυο

Βήμα 1: Φτιάξτε ένα σχήμα Playdoh

Κάντε ένα σχήμα από το Playdoh. Αυτό θα μπορούσε να είναι ένας κύκλος, οβάλ, τετράγωνο, ορθογώνιο ή τρίγωνο. Λάβετε υπόψη ότι θα χρειαστεί να κωδικοποιήσετε αυτό το σχήμα αργότερα, οπότε όσο πιο απλό είναι το σχήμα, τόσο πιο εύκολο θα είναι το τμήμα κωδικοποίησης. Ωστόσο, το p5.js είναι σε θέση να κωδικοποιήσει πολλά διαφορετικά σχήματα, ακόμη και προσαρμοσμένα, ώστε να μπορείτε να αποφασίσετε για το επίπεδο δυσκολίας που θέλετε να δοκιμάσετε.

Βήμα 2: Ξεκινήστε στο P5.js

Εάν δεν έχετε χρησιμοποιήσει το p5.js στο παρελθόν, συνιστώ να ελέγξετε τη σελίδα έναρξης στον ιστότοπο:

Σας συνιστώ επίσης να δείτε το κανάλι youtube The Coding Train για εξαιρετικά σεμινάρια σχετικά με τη χρήση του p5.js. Ακολουθεί ένας σύνδεσμος προς μια λίστα αναπαραγωγής που περιλαμβάνει όλα τα βασικά:

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

Web Editor:

Ο επεξεργαστής ιστού p5.js έχει μια περιοχή για να γράψετε τον κώδικα στα αριστερά και τον καμβά που θα εμφανίζει τα αποτελέσματα του κώδικα στα δεξιά.

Κάθε σκίτσο p5.js περιλαμβάνει μια συνάρτηση setup () και μια λειτουργία draw (). Η λειτουργία εγκατάστασης () θα εκτελεστεί μία φορά όταν ξεκινήσει το σκίτσο για πρώτη φορά. Στη συνάρτηση setup () βρίσκεται η συνάρτηση createCanvas που δημιουργεί ένα χώρο όπου θα σχεδιαστεί το σχήμα σας. Οι αριθμοί στις παρενθέσεις της συνάρτησης createCanvas ορίζουν τον άξονα Χ (αριστερά προς τα δεξιά) και τον άξονα Υ (από πάνω προς τα κάτω) του καμβά. Οι προεπιλεγμένοι αριθμοί είναι 400, 400 που σημαίνει ότι ο καμβάς σας είναι 400 εικονοστοιχεία από αριστερά προς τα δεξιά και 400 εικονοστοιχεία από πάνω προς τα κάτω (Μπορείτε πάντα να τα αλλάξετε ανάλογα με τις ανάγκες σας). Λάβετε υπόψη ότι η επάνω αριστερή γωνία του καμβά είναι το σημείο 0, 0. Αυτό θα είναι σημαντικό να γνωρίζετε όταν κωδικοποιείτε το σχήμα σας.

Η συνάρτηση draw () εκτελείται ως βρόχος που σημαίνει ότι ενημερώνεται συνεχώς, περίπου. 60 φορές το δευτερόλεπτο. Αυτό μπορεί να μας επιτρέψει να δημιουργήσουμε κινούμενα σχέδια στα σκίτσα μας. Μέσα στη συνάρτηση draw () βρίσκεται η συνάρτηση background που προσθέτει ένα χρώμα στον καμβά μας. Η προεπιλογή είναι 220 που είναι μια τιμή σε κλίμακα του γκρι. 0 = μαύρο, 255 = λευκό και ο αριθμός μεταξύ τους θα έχει διαφορετικές αποχρώσεις του γκρι. Η λειτουργία φόντου μπορεί επίσης να λάβει τιμές RGB που μας επιτρέπουν να προσθέσουμε χρώμα. Περισσότερα για αυτό στο επόμενο βήμα.

Βήμα 3: Κωδικοποιήστε το σχήμα σας στο P5.js

Για να κωδικοποιήσετε το σχήμα σας, θα χρειαστεί μόνο να προσθέσετε σε γραμμές κώδικα μέσα στη συνάρτηση draw ().

Κάθε σχήμα έχει τη δική του λειτουργία για να εμφανίζεται στον καμβά. Εδώ είναι η σελίδα αναφοράς για όλα τα σχήματα στο p5.js:

Για να φτιάξουμε έναν κύκλο, θα χρησιμοποιήσουμε τη συνάρτηση έλλειψης. Αυτή η συνάρτηση παίρνει 3 ορίσματα (οι αριθμοί που μπαίνουν μέσα στις παρενθέσεις). Ο πρώτος αριθμός είναι η θέση Χ του κέντρου του κύκλου στον καμβά και ο δεύτερος αριθμός είναι η θέση Υ στον καμβά. Θυμηθείτε ότι η επάνω αριστερή γωνία είναι 0, 0 και ο καμβάς είναι 400 επί 400 εικονοστοιχεία. Αν θέλω λοιπόν ο κύκλος να εμφανίζεται στη μέση του καμβά θα τον βάλω στο 200 στον άξονα Χ και 200 στον άξονα Υ. Μπορείτε να πειραματιστείτε με αυτούς τους αριθμούς για να έχετε μια αίσθηση για το πώς να τοποθετήσετε τα πράγματα στον καμβά.

Ο τρίτος αριθμός καθορίζει το μέγεθος του κύκλου. Για αυτό το παράδειγμα, έχει οριστεί σε 100 pixel σε διάμετρο. Η συνάρτηση έλλειψης μπορεί επίσης να λάβει ένα τέταρτο όρισμα που θα άλλαζε το τρίτο όρισμα για να επηρεάζει τη διάμετρο Χ και το τέταρτο όρισμα θα ήταν η διάμετρος Υ. Αυτό μπορεί να χρησιμοποιηθεί για να κάνει οβάλ σχήματα αντί για τέλεια στρογγυλούς κύκλους.

Για να ορίσουμε το χρώμα του σχήματός μας, χρησιμοποιούμε τη λειτουργία πλήρωσης. Αυτό χρησιμοποιεί 3 ορίσματα που είναι οι τιμές RGB (R = κόκκινο, G = πράσινο, B = μπλε). Κάθε τιμή μπορεί να είναι ένας αριθμός μεταξύ 0 και 255. Για παράδειγμα, για να γίνει κόκκινο, θα βάλαμε 255, 0, 0 που θα ήταν όλα κόκκινα χωρίς πράσινο ή μπλε. Διαφορετικοί συνδυασμοί αυτών των αριθμών θα δημιουργήσουν διαφορετικά χρώματα.

Υπάρχουν αρκετοί ιστότοποι που παρέχουν τιμές RGB για πολλά διαφορετικά χρώματα, όπως αυτό:

Μόλις βρείτε την τιμή RGB που ταιριάζει με το χρώμα σας του PlayDoh, γράψτε τη λειτουργία πλήρωσης πάνω από τη λειτουργία σχήματος.

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

Βήμα 4: Κάντε το σχήμα σας να εμφανίζεται με ένα πάτημα πλήκτρου

Δεδομένου ότι θέλουμε το σκίτσο p5.js να είναι διαδραστικό με το Makey Makey, πρέπει να προσθέσουμε κάποιον κώδικα για να συμβεί κάτι όταν πατάμε ένα πλήκτρο στο πληκτρολόγιο. Σε αυτή την περίπτωση, θέλουμε το σχήμα να εμφανίζεται μόνο αν πατήσουμε ένα πλήκτρο. Για να γίνει αυτό χρειαζόμαστε μια δήλωση υπό όρους. Αυτό σημαίνει ότι κάτι στον κωδικό μας θα συμβεί μόνο εάν πληρούται μια συγκεκριμένη προϋπόθεση, στην περίπτωση αυτή, πιέζεται ένα πλήκτρο.

Για να θέσουμε υπό όρους αυτήν τη δήλωση υπό όρους, ξεκινάμε με τη λέξη εάν ακολουθείται από παρενθέσεις. Μέσα στις παρενθέσεις θα είναι η συνθήκη που θέλουμε να πληρούμε. Στο p5.js, υπάρχει μια ενσωματωμένη μεταβλητή που ονομάζεται keyIsPressed (βεβαιωθείτε ότι χρησιμοποιείτε τα κεφαλαία γράμματα ακριβώς τα ίδια με αυτά που γράφονται εδώ). Το keyIsPressed είναι μια μεταβλητή boolean. Αυτό σημαίνει ότι μπορεί να έχει τιμή είτε αληθινή είτε λάθος. Όταν πατηθεί το πλήκτρο, η τιμή του είναι αληθινή και όταν δεν πατηθεί, η τιμή του είναι ψευδής.

Τέλος, προσθέτουμε ένα σύνολο αγκύλων {}. Μέσα στα σγουρά αγκύλια θα υπάρχει ο κώδικας που θέλουμε να εκτελέσουμε εάν πληρούται η συνθήκη μας. Έτσι, απλώς θα βάλουμε τον κώδικα μας για να κάνουμε το σχήμα ανάμεσα σε αυτές τις σγουρές αγκύλες.

Τώρα που τρέχουμε το σκίτσο μας, δεν θα δούμε το σχήμα μέχρι να πατήσουμε ένα πλήκτρο στο πληκτρολόγιο.

ΣΗΜΑΝΤΙΚΗ ΣΗΜΕΙΩΣΗ: Κατά την προσθήκη πιέσεων πλήκτρων στον κωδικό μας, ο επεξεργαστής ιστού πρέπει να γνωρίζει εάν πατάμε ένα πλήκτρο για να γράψουμε κώδικα στον επεξεργαστή κειμένου ή πατάμε το πλήκτρο για να κάνουμε αυτό που κωδικοποιήσαμε ένα πάτημα πλήκτρου για να κάνουμε. Όταν κάνετε κλικ στο κουμπί αναπαραγωγής, μετακινήστε το ποντίκι πάνω από τον καμβά και κάντε κλικ στον καμβά. Αυτό θα φέρει την εστίαση του επεξεργαστή στο σκίτσο και το πάτημα ενός πλήκτρου θα ενεργοποιήσει τον κωδικό τύπου κλειδιού που θέλουμε να συμβεί

Βήμα 5: Ρυθμίστε το Makey Makey

Βγείτε από τον πίνακα Makey Makey, το καλώδιο USB και δύο κλιπ αλιγάτορα. Συνδέστε ένα κλιπ αλιγάτορα στη γη και ένα στο πλήκτρο διαστήματος (αφού δεν καθορίσαμε ένα κλειδί στον κωδικό μας, οποιοδήποτε πλήκτρο πατάμε θα ενεργοποιήσει την εμφάνιση του σχήματος).

Πάρτε το κλιπ αλιγάτορα που είναι προσαρτημένο στο πλήκτρο Space και πατήστε το άλλο άκρο στο σχήμα Playdoh.

Συνδέστε το καλώδιο USB στο φορητό υπολογιστή.

Βήμα 6: Αγγίξτε το σχήμα Playdoh

Κρατήστε το μεταλλικό άκρο του συνδετήρα αλιγάτορα που είναι προσαρτημένο στη Γη στο Makey Makey και αγγίξτε το σχήμα Playdoh. Όταν αγγίζετε το σχήμα Playdoh, το κωδικοποιημένο σχήμα πρέπει να εμφανίζεται στον καμβά του σκίτσου σας.

Ακολουθεί ένας σύνδεσμος για το σκίτσο p5.js για αυτό το έργο:

Εάν το σχήμα δεν εμφανίζεται:

1. Βεβαιωθείτε ότι έχετε κάνει κλικ στο ποντίκι στον καμβά του σκίτσου p5.js πριν αγγίξετε το Playdoh.

2. Βεβαιωθείτε ότι κρατάτε το μεταλλικό κλιπ του καλωδίου γείωσης.

Βήμα 7: Διαφορετικά σχήματα

Κίτρινο Τρίγωνο:

Blue Square: