Εξερευνήστε την απεικόνιση δεδομένων με p5.js

P5.js είναι η πιο πρόσφατη εφαρμογή Javascript της διάσημης επεξεργασίας περιβάλλοντος Creative Creative Countiving. Χρειάζεται μεγάλη δύναμη και η ευκολία χρήσης της επεξεργασίας και το τοποθετεί στο πρόγραμμα περιήγησής σας. Σας βοηθά να σχεδιάσετε καμβά αλλά επίσης να ενσωματώσετε με την ιστοσελίδα σας, επιτρέποντας το "σκίτσο" σας να ανταποκριθεί και να χειριστεί το DOM.

p5.js απομακρύνει πολλούς πονοκεφάλους της κινούμενης εικόνας και απεικόνιση δεδομένων Στον ιστό και το κάνει εξαιρετικά απλό να σηκωθεί και να τρέξει με κινούμενα σχέδια χρησιμοποιώντας δύο απλές λειτουργίες: Ρύθμιση () και σχεδιάζω() .

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

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

• 6 τρόποι να μπείτε σε δημιουργική κωδικοποίηση

Γιατί να χρησιμοποιήσετε τα δεδομένα για να οδηγήσετε κινούμενα σχέδια;

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

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

Οφογραμμή δεδομένων που οδηγεί σε δεδομένα

Είναι μια κινούμενη εικόνα που βασίζεται σε δεδομένα μια απεικόνιση δεδομένων; Ναι και ΟΧΙ. Η κινούμενη εικόνα σας θα αποτελέσει οπτική αναπαράσταση των δεδομένων ακριβώς όπως μια οπτικοποίηση, αλλά ο σκοπός είναι διαφορετικός από εκείνη μιας παραδοσιακής απεικόνισης. Η απεικόνιση δεδομένων χρησιμοποιείται για να δώσει τον θεατή μια εικόνα για τα δεδομένα, έτσι ώστε το γραφικό να βρίσκεται στην υπηρεσία της επικοινωνίας των δεδομένων.

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

Τι θα κάνουμε;

Το P5.JS μας δίνει γρήγορη και εύκολη πρόσβαση στα δεδομένα που προέρχονται από την ανάλυση ενός αρχείου ήχου (όπως ένα MP3). Θα χρησιμοποιήσουμε p5.fft Για να αναλύσετε διαφορετικές συχνότητες (μπάσο και πρίμα) μέσα στον ήχο καθώς παίζει και απεικονίζει την «ενέργεια» ή πλάτος αυτής της συχνότητας.

Προκειμένου να μπορέσουμε να δούμε το «σχήμα» του ήχου καθώς παίζει, δεν θέλουμε απλώς να δείξουμε το σημερινό πλάτος του ήχου, αλλά να καταγράψουμε ένα «buffer» των σημείων δεδομένων. Αυτό θα μας επιτρέψει να δείξουμε ένα κινούμενο ιστορικό αξιών.

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

Τι θα μάθουμε;

Εργασία μέσω του κώδικα, θα καλύψουμε:

• Δημιουργώντας ένα νέο σκίτσο P5
• Φόρτωση και ανάλυση ήχου
• Χαρτογράφηση των τιμών δεδομένων σε οπτικά στοιχεία όπως μέγεθος, σχήμα και χρώμα
• Χρησιμοποιώντας μαθήματα για να σχεδιάσετε, να διατηρήσετε την κατάσταση της κινούμενης εικόνας και των δεδομένων μας και να κάνετε επαναχρησιμοποιήσουμε τον κωδικό μας.

Πού είναι τα αρχεία;

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

Καθώς θα χρησιμοποιήσουμε δεδομένα ήχου, θα χρειαστείτε ένα αρχείο MP3 για να σύρετε στο σκίτσο. Θα δημιουργήσουμε ένα νέο σκίτσο στην ανοιχτή προεπεξεργασία. Αυτός είναι ο τρόπος με τον οποίο το σκίτσο σας θα φανεί μόλις φορτώσει ήχο, πήρα τα δεδομένα και έγραψαν ένα απλό «σχήμα δεδομένων»:

Και έτσι θα φανεί το ολοκληρωμένο σκίτσο:

Εναλλακτικά, θα μπορούσατε επίσης να χρησιμοποιήσετε το P5.js Online Editor ή απλά να συμπεριλάβετε τη βιβλιοθήκη στο δικό σας έργο μέσω λήψης ή CDN .

01. Ξεκινήστε ένα νέο σκίτσο

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

1. Ρύθμιση () - Αυτό λειτουργεί μόνο μία φορά και χρησιμοποιείται για τη δημιουργία ενός νέου καμβά
2. σχεδιάζω() - Εδώ είναι όπου βάζετε κώδικα που θέλετε να εκτελέσετε κάθε πλαίσιο

Θα το παρατηρήσετε Ιστορικό() καλείται μόνο μία φορά στη ρύθμιση. Αυτό καθαρίζει την οθόνη, οπότε αν θέλετε να καθαρίσετε την οθόνη κάθε πλαίσιο, συμπεριλάβετε αυτό στην αρχή του σχεδιάζω() λειτουργούν επίσης.

Έχετε ένα παιχνίδι με κάποιο κώδικα εδώ, χρησιμοποιώντας μερικά από τα παραδείγματα που μπορείτε να βρείτε στο site p5.js .

02. Δημιουργία πρώτου σκίτσου χρησιμοποιώντας δεδομένα ήχου

Πάω στο δικό μου Παράδειγμα σκίτσο εκκίνησης .

Χτυπήστε το κουμπί αναπαραγωγής και θα δείτε κάποιο κείμενο που σας ζητά να ρίξετε ένα αρχείο MP3 πάνω στον καμβά. Περιμένετε λίγα δευτερόλεπτα για να ολοκληρώσετε τη μεταφόρτωση και στη συνέχεια κάντε κλικ στον καμβά για να ξεκινήσετε την αναπαραγωγή. Θα πρέπει να δείτε μια έλλειψη, ακολουθώντας το ποντίκι σας, το οποίο κλιμακώνει και αλλάζει χρώμα μαζί με το πλάτος του μπάσου στη μουσική που ανεβάσατε.

Μεγάλο μέρος του κώδικα σχολιάζεται, αλλά ας δούμε μερικά βασικά στοιχεία:

Ακριβώς στην αρχή του σκίτσου, μπροστά από Ρύθμιση () , Δημιουργήσαμε κάποιες παγκόσμιες μεταβλητές.

Στα πλαίσια Ρύθμιση () Έχουμε μερικές σημαντικές γραμμές:

colorMode(HSB,360,100,100);

Colormode () Σας δίνει τη δυνατότητα να ορίσετε p5.js να εργάζονται σε διαφορετικούς χρώματα όπως το RGB και το HSB, καθώς και να διαμορφώσετε την κλίμακα που χρησιμοποιείτε για να περιηγηθείτε στα κανάλια. Εδώ έχουμε ορίσει τα HSB Ranges σε τιμές που μπορεί να είστε πιο εξοικειωμένοι με το Photoshop και όχι την προεπιλεγμένη ρύθμιση (0 έως 255).

canvas.drop(gotFile);

Αυτή η σούπερ χρήσιμη λειτουργία p5.js μας επιτρέπει να ακούσουμε τα γεγονότα πτώσης αρχείων στον καμβά μας. Όταν λάβουμε ένα συμβάν πτώσης αρχείων, καλούμε gotfile () Για να ελέγξετε αν είναι ο σωστός τύπος και αρχίστε να αναλύετε τον ήχο.

soundFile = new p5.SoundFile(file.data);

Εδώ στρέφουμε τα δεδομένα που έχουν πέσει σε ένα Ήχος . Όταν έχουμε το αρχείο ήχου, χρησιμοποιούμε τον ακόλουθο κώδικα:

1. initsound () Για να ρυθμίσετε μια νέα εμφάνιση FFT (για να αναλύσετε τον ήχο)
2. ανάλυση () Για να αναλύσετε το τρέχον μπλοκ του ήχου κάθε πλαισίου
3. getnewsounddatavalue () χρησιμοποιώ FFT.GetEnergy () κάθε πλαίσιο για να μας δώσει το τρέχον πλάτος του ήχου. Αυτό μετατρέπεται από την προεπιλεγμένη περιοχή από 0 έως 255 έως 0 έως 1.

Συμβουλή: Είναι χρήσιμο να μετατρέψετε τα δεδομένα σας σε μια σειρά από 0 έως 1 επειδή μπορείτε να το χρησιμοποιήσετε πιο εύκολα κατά τη χαρτογράφηση των δεδομένων σε οπτικές παράμετροι όπως κλίμακα, ταχύτητα και χρώμα.

Ας δούμε στη λειτουργία κλήσης (). Αυτή η γραμμή ζητά το τρέχον πλάτος (μεταξύ 0 και 1) της συχνότητας μπάσων και την εκχωρεί τη μεταβλητή mydataval .

var myDataVal = getNewSoundDataValue(“bass”)

Καλούμε το έθιμο getdatahsbcolor () Λειτουργία που χαρτογραφεί την αξία των δεδομένων μας ξεχωριστά στην απόχρωση, τον κορεσμό και τη φωτεινότητα και μας επιστρέφει ένα χρώμα. Όσο υψηλότερα είναι τα δεδομένα, όσο περαιτέρω το χρώμα μετακινείται σε όλο το φάσμα απόχρωμο και το φωτεινό και πιο κορεσμένο το χρώμα.

var myDataColor = getDataHSBColor(myDataVal);

Πριν μπορέσουμε να σχεδιάσουμε το ελλείψον μας, πρέπει να το δώσουμε ένα μέγεθος, πολλαπλασιάζοντας 200 (px) από την αξία των δεδομένων μας. Τόσο υψηλότερη είναι η αξία, τόσο μεγαλύτερη είναι η έλλειψη.

var myEllipseSize = 200 * myDataVal;

03. Χρησιμοποιήστε δεδομένα ήχου ως πινέλο

Για λίγο διασκέδαση, σχολιάστε το Ιστορικό() καλέστε στο σχεδιάζω() Λειτουργία και μπορείτε να χρησιμοποιήσετε την αντιδραστική σας έλλειψη ήχου για να βάψετε!

05. Ολοκληρώστε το σκίτσο σας

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

Επίσκεψη Αυτή η τελική έκδοση του σκίτσου , Εκτελέστε το και στη συνέχεια ρίξτε ένα MP3 σε αυτό.

Τώρα θα δείτε μια σειρά τόξων που αναδύονται από το κέντρο της οθόνης. Τα οριζόντια τόξα είναι οι απεικονίσεις του μπάσου και των κάθετων επιλέγουν το πρίμα του MP3.

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

Αντί να σχεδιάζετε τα τόξα απευθείας σχεδιάζω() , δημιουργούμε πραγματικά μερικές προσαρμοσμένες τάξεις:

1. Class Radialarc {} Διατηρεί την αξία δεδομένων του ατομικού τόξου και αντλεί το τόξο
2. Class Radialarcs {} Διαχειρίζεται τη συλλογή μας των περιπτώσεων «Radialarc»

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

Η κλάση Radialarc {}:

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

setvalue () και getvalue () Επιτρέψτε μας να πάρετε τα δεδομένα μέσα και έξω από ένα τόξο και να σπρώξετε τα δεδομένα μέσω της συστοιχίας του τόξου μας ως ενημερώσεις δεδομένων. Redrawfromdata () καλείται να επανυπολογίσει και να αναδιαμορφώσει το τόξο.

συρτάρι () είναι όπου καλούμε τη λειτουργία P5.js τόξο() . Τόξο() Είναι πιο γρήγορο από το να κάνουμε τον εαυτό μας, αλλά πρέπει να το περάσουμε μερικές τιμές όπως η θέση, το μέγεθος και, το κύριο, μια γωνία έναρξης και λήξης για το τόξο μας.

Αυτή η γωνία μετριέται σε «ακτινολόγους» παρά βαθμούς. Οι ακτίνες είναι σαν βαθμοί αλλά σε διαφορετική κλίμακα: 360 ° είναι η ίδια με 2 x Pi ακτίνα. P5.js έχει χρήσιμες ενσωματωμένες σταθερές για πι , Half_pi και Quarter_pi και τα λοιπά.

Το Radialarcs {} Class:

Αυτή είναι μια τάξη διαχείρισης που δημιουργεί μια σειρά από μας Radialarc {} μαθήματα και τους διατηρεί μέχρι σήμερα μετακινώντας τα δεδομένα μέσα και έξω από κάθε ένα και καλώντας το τόξο Redrawfromdata () λειτουργία.

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

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

Μόλις αρχικοποιηθούν τα αντικείμενα τόξου, κάθε πλαίσιο θα καλέσει updateradialarcs () και Drawradialarcs () Μέσα στο κύριο P5 σχεδιάζω() Λειτουργία, η οποία είναι ο τρόπος με τον οποίο οι ενημερώσεις κινούμενων εικόνων και κινήσεις.

06. Πάρτε το περαιτέρω

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

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

Σε αυτό το παράδειγμα χρησιμοποιήσαμε δεδομένα που συνεχώς ρέουν και, σε συνδυασμό με ένα γρήγορο ρυθμό καρέ, δημιουργεί την ψευδαίσθηση της κινούμενης εικόνας. Ωστόσο, δεν είναι όλα αυτά τα δεδομένα και μπορούν να ενημερώνονται πιο αργά. Για βραδύτερα δεδομένα, μπορείτε ακόμα να δημιουργήσετε ομαλή κινούμενη εικόνα με το "Tweening" το κινούμενο σχέδιο των σχημάτων σας μεταξύ των σημερινών τους και των διαστάσεων στόχων τους.

Καλή τύχη με την επόμενη κινούμενη εικόνα σας!

Το άρθρο αυτό δημοσιεύθηκε αρχικά στην έκδοση 320 του καθαρά , το περιοδικό Best-Selling στον κόσμο για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων. Αγοράζουν τεύχος 320 εδώ ή Εγγραφείτε εδώ .

Σχετικά Άρθρα:

• Πώς να προσθέσετε κινούμενα σχέδια στο SVG με το CSS
• Η τάση δεδομένων ορίζεται για την επανάσταση του σχεδιασμού εφαρμογών
• 12 Μεγάλοι πόροι CSS Animation