Κώδικας: Δημιουργήστε ένα μαγικό ραβδί - 💡 Fix My Ideas

Κώδικας: Δημιουργήστε ένα μαγικό ραβδί

Κώδικας: Δημιουργήστε ένα μαγικό ραβδί


Συγγραφέας: Ethan Holmes, 2019

Η παρακολούθηση χρώματος είναι μια απλή αλλά ισχυρή τεχνική για τη δημιουργία διασκεδαστικών νέων τρόπων αλληλεπίδρασης με το λογισμικό. Χρησιμοποιώντας μια κάμερα web ως αισθητήρα, ένα πρόγραμμα είναι "εκπαιδευμένο" για να εντοπίσει ένα συγκεκριμένο χρώμα σε κάποιο είδος φυσικού δείκτη. Ο έγχρωμος δείκτης αντιστοιχίζεται σε μια συντεταγμένη (x, y) καθώς μετακινείται. Έγινε σε πραγματικό χρόνο, αυτό σας επιτρέπει να χρησιμοποιήσετε τον δείκτη σαν ένα ποντίκι, ανοίγοντας κάθε είδους ενδιαφέρουσες δυνατότητες. Αυτή η δόση του Codebox σάς δείχνει πώς να χρησιμοποιήσετε την Επεξεργασία και την κάμερα του υπολογιστή σας (για παράδειγμα, χρησιμοποίησα την ενσωματωμένη κάμερα iSight του MacBook μου) για να δημιουργήσω μια εικονική "μαγική ραβδί" που μπορεί να αλλάξει τα χρώματα στη λέξη:

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

Ρύθμιση επεξεργασίας

Πριν περάσετε σε αυτό το έργο, ας πάρουμε λίγα λεπτά και να αναθεωρήσουμε λίγο σχετικά με την Επεξεργασία. Πρώτα απ 'όλα, εάν είστε εντελώς νέοι στο πρόγραμμα, θα πρέπει να αφιερώσετε λίγο χρόνο στην εκμάθηση της γλώσσας στο Processing.org ή αρπάζοντας ένα αντίγραφο του Getting Started with Processing, το οποίο γράφτηκε από τους Ben Fry και Casey Reas, τους συν-δημιουργούς τη γλώσσα επεξεργασίας. Ενώ θα επισημάνω τα υποστηρικτικά υλικά και τις αναφορές κατά μήκος του τρόπου, είναι πιθανό να είστε πολύ απογοητευμένοι αν δεν έχετε κάποια βασική γείωση στο σύστημα. Έτσι, εάν δεν το έχετε κάνει ήδη, κατεβάστε την Επεξεργασία για την πλατφόρμα σας και εγκαταστήστε την.

Κάντε μια "ραβδί"

Μόλις ολοκληρωθεί η Επεξεργασία και το σκίτσο τρέχει, θα χρειαστεί να κάνετε μια "ραβδί". (Έβαλα ραβδί σε εισαγωγικά επειδή μπορείτε πραγματικά να χρησιμοποιήσετε οποιοδήποτε αντικείμενο με ένα ξεχωριστό χρώμα.) Τα Instructables έχουν πολλά πραγματικά πολύ ωραία παραδείγματα για αυτό, όπως "Κάνε μια τρομερή ραβδί Χάρι Πότερ από ένα φύλλο χαρτιού και κόλλα κόλλας". Το βασικό στοιχείο, τουλάχιστον από την άποψη της Επεξεργασίας, είναι ότι το ραβδί έχει ένα ιδιαίτερο χρώμα στο άκρο. Ως μια γρήγορη και βρώμικη λύση, τυλίγασα ένα σημάδι Post-it πορτοκαλί ημέρας γύρω από το τέλος ενός ξυδιού. Όχι ακριβώς ο Χάρι Πότερ, αλλά κάνει τη δουλειά.

Ξεκινήστε το σκίτσο

Μόλις το ραβδί είναι έτοιμο, μπορείτε να δοκιμάσετε το σκίτσο. Εκκίνηση Επεξεργασία και μετά επικολλήστε τον ακόλουθο κώδικα στο κύριο παράθυρο. Μπορείτε είτε να επισημάνετε την πρώτη γραμμή, να μετακινηθείτε προς τα κάτω και μετά να χρησιμοποιήσετε το ctrl-c (σκληρό) ή μπορείτε να κάνετε κλικ σε αυτόν το σύνδεσμο (magic_wand.pde), πατήστε Ctrl + a για να επιλέξετε όλο το κείμενο και στη συνέχεια χρησιμοποιήστε το Ctrl + c για να αντιγράψετε (ευκολότερη).

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

Τέλος, βήμα μπροστά από την κάμερά σας. Είστε έτοιμοι να παίξετε με την παρακολούθηση χρωμάτων.

Αποκτήστε το χρώμα παρακολούθησης

Το πρώτο βήμα είναι να ρυθμίσετε το χρώμα που θα παρακολουθεί η Επεξεργασία. Για να γίνει αυτό, μετακινήστε την άκρη της ράβδου στο λευκό κουτί στην επάνω αριστερή γωνία. Θα δείτε το κουτί πάνω να μετατρέψει ένα χρώμα που μοιάζει περισσότερο με την άκρη της ράβδου σας. (Περισσότερα για αυτό σε ένα δευτερόλεπτο.) Μόλις οριστεί το χρώμα, πατήστε οποιοδήποτε πλήκτρο.

Πίσω από τις σκηνές, η Επεξεργασία διαβάζει κάθε καρέ που προέρχεται από την κάμερα και χρησιμοποιώντας ένα υπέροχο μικρό hack από τον επεξεργαστή γκουρού Daniel Shiffman, αναστροφή της εικόνας οριζοντίως για να δημιουργήσει μια πιο φυσική αλληλεπίδραση με το σκίτσο. Διαφορετικά, όλες οι κινήσεις σας εμφανίζονται ως είδωλο με είδωλο, έτσι ώστε η κίνηση της ράβδου προς τα δεξιά να εμφανίζεται καθώς μετακινείται προς τα αριστερά και αντίστροφα. Όλα αυτά συμβαίνουν στο ακόλουθο απόσπασμα κώδικα:

αν (cam.available ()) {cam.read (); // Αυτό είναι ένα μικρό κόλπο από τον επεξεργαστή γκουρού Ντάνιελ Σίιφμαν για να ανακαλέσει την επίδραση της εικόνας του καθρέφτη στις κινήσεις σας στην κάμερα pushMatrix (). κλίμακα (-1,0, 1,0). εικόνα (cam, -cam.width, 0). popMatrix (); εικόνα (έκκεντρο, 0,0); }}

Μετά την ανάγνωση της εικόνας έκκεντρο μεταβλητή, μεταβιβάζεται στο searchForTargetColor () (οι λειτουργίες περιγράφονται στο Κεφάλαιο 8 του Ξεκινώντας με την επεξεργασία). Αυτή η λειτουργία σαρώνει τα εικονοστοιχεία μέσα στο κιβώτιο απόκτησης λευκού στόχου και υπολογίζει κατά μέσο όρο τα κόκκινα, πράσινα και μπλε συστατικά τους ώστε να προκύψει ένα συνολικό χρώμα που αντιπροσωπεύει το χρώμα στόχου. Αυτό συμβαίνει εδώ:

το χρώμα αποκτάTargetColor () {int r = 0; int g = 0; int b = 0; int cnt = 0. για (int i = 0 · i <targetSide; i ++) {για (int j = 0; j <targetSide; j ++) {cnt + = 1; int x = στόχοςX + i; // x σημείο μέσα στο πλαίσιο στόχου int y = targetY + j; // y σημείο μέσα στο πλαίσιο στόχου // Τραβήξτε έξω το τρέχον χρώμα χρώματος εικονοστοιχείων c = cam.pixels [y * πλάτος + x]; r + = ερυθρό (c); g + = πράσινο (c). b + = μπλε (c). }} targetColor = χρώμα (r / cnt, g / cnt, b / cnt). επιστροφή στο targetColor; }}

Αναζητήστε το χρώμα στόχου

Αφού πατήσετε ένα πλήκτρο για να ορίσετε το χρώμα του προορισμού (το οποίο είναι τώρα αποθηκευμένο στο targetColor μεταβλητή), το σκίτσο μετατρέπει τις καταστάσεις από την απόκτηση του στοχευμένου χρώματος σε αναζήτηση του χρώματος στόχου. Αυτή η δουλειά γίνεται από το searchForTargetColor () λειτουργία, η οποία σαρώνει κάθε pixel στην εικόνα και συγκρίνει με το targetColor. Εάν η απόσταση μεταξύ των δύο χρωμάτων είναι μικρότερη από 50 μονάδες (ή οποιαδήποτε τιμή που έχετε ορίσει colorDist), τότε θεωρείται ένας αγώνας. (Μια γρήγορη σημείωση σχετικά με την απόσταση: αυτό σημαίνει ότι αντιμετωπίζετε τα χρώματα RGB ως ένα "διάστημα" που έχει έναν κόκκινο άξονα, έναν πράσινο άξονα και έναν μπλε άξονα · η απόσταση μεταξύ δύο χρωμάτων είναι μόνο η απόσταση από το euclidean μεταξύ δύο σημείων από τη βασική άλγεβρα .) Εάν το εικονοστοιχείο ταιριάζει με το χρώμα προορισμού, προστίθεται σε ένα τρέχον σύνολο pixel που ταιριάζουν. Μόλις δοκιμαστεί κάθε εικονοστοιχείο, τότε θα βρούμε τον μέσο όρο όλων των χρωμάτων που ταιριάζουν, ώστε να προκύψει μια συνολική θέση για την άκρη της ράβδου. Όλα αυτά συμβαίνουν εδώ:

άκυρη αναζήτησηForTargetColor () {// Επαναφορά ράβδου wandX = 0; wandY = 0; wandFound = false; // Τώρα αναζητήστε εικονοστοιχεία που ταιριάζουν με το χρώμα στόχου int numPoints = 0; // Αριθμός σημείων που βρέθηκαν int sx = 0. // Άθροισμα όλων των συντεταγμένων x που βρέθηκαν int sy = 0; // Το άθροισμα όλων των συντεταγμένων y που βρέθηκαν για (int i = 0, i <width, i ++) {για (int j = 0; j <ύψος; j ++) {color pix = cam.pixels [ . // Πιάσε pixel στο i, j float dr = κόκκινο (targetColor) - κόκκινο (pix); float dg = πράσινο (targetColor) - πράσινο (pix); float db = μπλε (targetColor) - μπλε (pix); πλωτήρας d = sqrt (pow (dr, 2) + pow (dg, 2) + pow (db, 2)); // Αν είναι μια αντιστοίχιση, διατηρήστε ένα τρέχον σύνολο εάν (d <colorDist) {numPoints + = 1; sx + = i; sy + = j; }}} // Αν βρεθεί το χρώμα στόχου, ορίστε τις συντεταγμένες της ράβδου εάν (numPoints> 0) {wandX = sx / numpoints; wandY = sy / numPoints. wandFound = true; }}

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

Μόλις υπολογιστεί η θέση του στόχου, το σκίτσο δημιουργεί μια σειρά ακτίνων που προέρχονται από την άκρη της ράβδου. Αυτό γίνεται στο drawWand () που χρησιμοποιεί ένα χρονοδιακόπτη για να ελέγξει πόσο γρήγορα αναδύονται οι ακτίνες. (Οι χρονομετρητές καλύπτονται στο Παράδειγμα 7-11 του βιβλίου "Ξεκινώντας"). Ακολουθεί το απόσπασμα για αυτό:

άκυρη drawWand (int N, int R) {strokeWeight (6); εγκεφαλικό επεισόδιο (wandColor); λείος(); int elapsedTime = millis () - oldTime. float r = χάρτης (elapsedTime, 0, wandFrequency, 0, R). για το (int i = 0; i <N; i ++) {βήμα float = ακτίνια (360.0 / N); float dx = r * sin (i * βήμα) + wandX; float dy = r * cos (i * βήμα) + ράβδος? γραμμή (wandX + 10 * sin (i * βήμα), wandY + 10 * cos (i * βήμα), dx, dy). } αν (elapsedTime> wandFrequency) {oldTime = millis (); }}

Εκτελέστε μια ενέργεια

Το τελευταίο βήμα είναι να χρησιμοποιήσετε το ραβδί για να ελέγξετε τη συμπεριφορά του σκίτσου. Σε αυτό το παράδειγμα, έχω προσθέσει έναν μικρό κύκλο στην επάνω αριστερή γωνία της οθόνης που αλλάζει τα χρώματα με βάση ένα χρονόμετρο που μπορείτε να ορίσετε. Εάν μετακινήσετε την άκρη της ράβδου στον κύκλο, τότε η ακτίνα του ραβδιού θα μεταβεί στο νέο χρώμα. που είναι μόνο μια μικρή τροποποίηση του Παραδείγματος 5-16 από το Ξεκίνημα:

// Ορίζει τον κύκλο χρώματος σε κάποιο νέο τυχαίο χρώμα κενό setColorCircleColor () {int elapsedTime = millis () - colorCircleMillis; αν (elapsedTime> colorCircleFrequency) {colorCircleMillis = millis (); colorCircleColor = χρώμα (int (τυχαία (255)), int (τυχαία (255)), int (τυχαία (255))). // Τυχαίο χρώμα}} άκυρη testControlBounds () {float d = dist (wandX, wandY, cX, cY); αν (d <cR) {wandColor = colorCircleColor; }}

Στην επόμενη δόση του Codebox, θα βασιστούμε σε αυτό το παράδειγμα δημιουργώντας πολλούς κινούμενους στόχους. Είτε γράφετε παιχνίδια, συστήματα σωματιδίων είτε μαγική εκπομπή που λειτουργεί με Arduino (το αντικείμενο μιας μελλοντικής ανάρτησης, αλλά θα χρειαστεί λίγο για να φτάσετε εκεί), αυτά είναι εργαλεία που θα χρησιμοποιείτε ξανά και ξανά καθώς συνεχίζετε με την επεξεργασία.

Περισσότερο:
Δείτε όλες τις δόσεις του Box Code

Στο Σπιτάκι Maker:


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



Μπορεί Να Σας Ενδιαφέρει

Αυτή την εβδομάδα στις εκθέσεις Craft

Αυτή την εβδομάδα στις εκθέσεις Craft


Το Ντιτρόιτ είναι η ελευθερία να κάνεις τα πράγματα ... από τον Bethany Shorb

Το Ντιτρόιτ είναι η ελευθερία να κάνεις τα πράγματα ... από τον Bethany Shorb


Η δύναμη των μουσείων και των βιβλιοθηκών από τον Marsha L. Semmel

Η δύναμη των μουσείων και των βιβλιοθηκών από τον Marsha L. Semmel


Συνταγή: Τούρτα Snickerdoodle για τους λάτρεις της κανέλας

Συνταγή: Τούρτα Snickerdoodle για τους λάτρεις της κανέλας