p5.js
είναι μια βιβλιοθήκη που έχει σχεδιαστεί για να φέρει τη δύναμη του
Επεξεργασία
στον ιστό. Σκοπός του είναι να εισαγάγει καλλιτέχνες, σχεδιαστές και εκπαιδευτικούς στον κόσμο του προγραμματισμού, ενώ προσφέρει επίσης ευέλικτα εργαλεία για να φέρει τα DEVS και τους μηχανικούς στις εικαστικές τέχνες.
Ας βουτήσουμε και να δημιουργήσουμε το πρώτο μας "σκίτσο". Στόχος μας είναι να οικοδομήσουμε ένα εργαλείο σχεδίασης που μετατρέπει μια απλή εικόνα σε ένα πεδίο κινούμενων αστεριών. Πρώτον, θα ορίσουμε μερικές παγκόσμιες μεταβλητές και θα γράψουμε μας
Ρύθμιση ()
λειτουργία. p5
Ρύθμιση ()
Εκτελείται μία φορά, όταν το σκίτσο είναι φορτωμένο, οπότε είναι το ιδανικό μέρος για να χειριστείτε την αρχικοποίηση.
var hintimage, skyimage, αστέρια = [];
Ρύθμιση λειτουργίας () {...}
Μέσα μας
εγκατάσταση
Λειτουργία, θα δημιουργήσουμε έναν καμβά και θα κρύψουμε τον δρομέα του ποντικιού, ώστε να μπορέσουμε να τραβήξουμε τη δική μας. Από προεπιλογή, το P5 προσθέτει ένα περίγραμμα γύρω από τα σχήματα - θέλουμε να απενεργοποιήσουμε τα εγκεφαλικά επεισόδια σε αυτή την περίπτωση.
Createcanvas (800.500).
nocursor ();
nostroke ().
Η εικόνα φόντου - Αυτή η σκηνή του νυχτερινού ουρανού παρέχει τη ρύθμιση για την κινούμενη εικόνα μας
Στη συνέχεια, θα φορτώσουμε ένα ζευγάρι εικόνων. Κάποιος θα χρησιμεύσει ως φόντο - σε αυτή την περίπτωση, μια σκηνή νυχτερινής ουρανού. Η άλλη θα είναι η εικόνα του 'Hint' - το ασπρόμαυρο σχέδιο που θα βασίζεται ο τελικός μας σχεδιασμός. Η ιδέα είναι να βάλουμε τα περισσότερα από τα αστέρια πάνω από τα μαύρα εικονοστοιχεία στην εικόνα υπαινιγμού μας, για να αναδημιουργήσετε το σχεδιασμό στη σκηνή του φόντου μας. Θα ήταν εύκολο να δημιουργήσετε αυτές τις εικόνες με το κείμενο του P5 και τα εργαλεία σχεδίασης, αλλά για χάρη της συντομίας θα χρησιμοποιήσουμε στατικά στοιχεία.
Η εικόνα υπαινιγμού, η οποία υπαγορεύει την τοποθέτηση των αστεριών μας
Τη λειτουργία κλήρωσης
Αυτό είναι για
Ρύθμιση ()
! Μια άλλη λειτουργία κλειδιού είναι
σχεδιάζω()
. Ονομάζεται σε ένα συνεχές βρόχο, το οποίο είναι χρήσιμο για κινούμενα σχέδια και προσθέτοντας στοιχεία με την πάροδο του χρόνου.
Λειτουργία κλήσης () {...}
Μέσα στη λειτουργία κλήρωσης, το πρώτο μας έργο είναι να γεμίσετε τον καμβά με την εικόνα φόντου μας. Το P5 δεν καθαρίζει αυτόματα τον καμβά μεταξύ
σχεδιάζω()
Κλήσεις, οπότε πρέπει να κάνουμε αυτό κάθε πλαίσιο ή θα καταλήξουμε σε κάποια παράξενη επίδραση συσσώρευσης. Για να τοποθετήσετε μια φορτωμένη εικόνα στον καμβά, χρησιμοποιήστε το
εικόνα()
Λειτουργία και δώστε συντεταγμένες x και y για τοποθέτηση.
Εικόνα (Skyimage, 0, 0);
Στη συνέχεια, θα πάμε στην τρέχουσα τοποθεσία του ποντικιού και θα το αποθηκεύσουμε ως p5.Vector χρησιμοποιώντας
Δημιουργία ()
. Αυτό το αντικείμενο έρχεται με εύχρηστες λειτουργίες για να αντιμετωπίσει τα σημεία στο διάστημα, αλλά είμαστε ως επί το πλείστον απλά το χρησιμοποιούμε ως δοχείο.
Var Θέση = Δημιουργός (Mousex, Mousey).
Χρησιμοποιώντας τη νεοσυσταθείσα θέση του ποντικιού μας, μπορούμε να σχεδιάσουμε τον κέρσορα μας. Θα ορίσουμε το χρωματικό χρώμα με
γέμισμα()
Με τη διέλευση των τιμών RGB και τη χρήση
έλλειψη()
για να σχεδιάσετε έναν κύκλο στη θέση του ποντικιού.
Θέλουμε μόνο να σχεδιάσουμε νέα αστέρια ενώ το ποντίκι πιέζεται, οπότε θα ελέγξουμε το P5's
mouseispressed
πριν προχωρήσετε. Εάν το ποντίκι είναι κάτω, πρέπει να υπολογίσουμε ένα καλό μέρος για το επόμενο αστέρι μας να καταλήξουμε. Θα το κάνουμε αυτό με μια προσαρμοσμένη λειτουργία που ονομάζεται
FindPixel ()
, που θα ορίσουμε αργότερα.
Μόλις έχουμε έναν στόχο, θα δημιουργήσουμε μια νέα εμφάνιση ενός προσαρμοσμένου αντικειμένου αστέρι (περισσότερο παρακάτω) και θα το σπρώξετε στο τέλος της αστέρας μας. Αν καταλήξουμε με πάνω από 2.000 αστέρια, θα αρχίσουμε να απορρίπτουμε τα παλαιότερα.
αν (ποντίκι) {
Var Target = Findpixel ();
var star = νέο αστέρι (θέση, στόχος);
Stars.Push (Star).
Εάν (αστέρια.Length & GT, 2000) αστέρια.Shift ();
}
Τέλος, θα βρούμε τη διάταξη των αστεριών μας και να καλέσουμε
εκσυγχρονίζω()
και
σχεδιάζω()
σε κάθε ένα από αυτά. Θα βουτήξουμε τις μεθόδους αυτές αργότερα.
για (var i = 0, i & lt, stars.length, i ++) {
αστέρια [i] .Utate ();
Αστέρια [I] .δηγείτε ();
}
Βοηθητικές λειτουργίες
Τώρα
Ρύθμιση ()
και
σχεδιάζω()
Υπάρχουν στη θέση τους, θα δουλέψουμε στις βοηθητικές λειτουργίες και τα αντικείμενα. Πρώτον, θα ορίσουμε μια λειτουργία που βρίσκει μια θέση ανάπαυσης για κάθε νέο αστέρι. Το μόνο που πρέπει να κάνουμε είναι να ελέγξετε μερικά τυχαία εικονοστοιχεία στην εικόνα της υπαινιγής μας, χρησιμοποιώντας
παίρνω()
για να δείτε αν είναι μαύροι ή λευκοί.
Στην πραγματικότητα πρέπει μόνο να εξετάσουμε την κόκκινη αξία τους, διότι και στις δύο περιπτώσεις αντιστοιχούν οι τιμές RGB. Αν βρούμε ένα μη λευκό pixel, θα το επιστρέψουμε επειδή έχουμε χτυπήσει το σχέδιό μας. Εάν όχι, θα επιστρέψουμε μόνο το τελευταίο εικονοστοιχείο και θα χρησιμεύσει ως ένα τυχαίο αστέρι.
Λειτουργία Findpixel () {
var x, y;
για (var i = 0; i & lt; 15; i ++) {
x = πάτωμα (τυχαίο (hintimage.width));
y = πάτωμα (τυχαία (hintimage.height));
Εάν (κόκκινο (hintimage.get (x, y)) & lt; 255) σπάσιμο.
}
Επιστροφή δημιουργία (x, y);
}
Το τελευταίο είναι το προσαρμοσμένο αντικείμενο αστέρι μας. Απλά, θέλουμε ένα επαναχρησιμοποιούμενο δοχείο που αποθηκεύει πληροφορίες για κάθε αστέρι και παρέχει επίσης ένα μέσο για την ενημέρωση και την κατάρτιση τους. Το Javascript δεν παρέχει έναν τρόπο να δημιουργήσετε μαθήματα με παραδοσιακή έννοια, αλλά μπορούμε να έχουμε το ίδιο αποτέλεσμα καθορίζοντας μια λειτουργία και την επέκτασή του για τις δικές μας ανάγκες.
Κάθε αστέρι έχει μερικές ιδιότητες (θέση εκκίνησης, τελική θέση και μια τυχαία παραγόμενη διάμετρος), την οποία θα ορίσουμε σε μια «λειτουργία κατασκευαστή» που καλείται κάθε νέο αστέρι που δημιουργείται στον βρόχο μας.
Λειτουργία Star (θέση, στόχος) {
αυτή τη στιγμή = θέση;
αυτό.target = στόχος;
Αυτό.Diameter = τυχαίο (1, 5);
}
Στη συνέχεια θα προσθέσουμε ένα
εκσυγχρονίζω()
Μέθοδος στο αστέρι, το οποίο θα χρησιμοποιήσει το P5.Vector
lerp ()
Για να υπολογίσετε μια νέα θέση μεταξύ των σημερινών και θέσεων στόχου ενός αστεριού. Σε αυτή την περίπτωση, μετακινούμε το τέσσερα τοις εκατό της υπόλοιπης απόστασης για κάθε κλήρωση, η οποία μας δίνει αποτελεσματικά ένα αποτέλεσμα ευκολίας.
Αν θέλαμε να πάρουμε φανταχτερό, θα μπορούσαμε επίσης να προσομοιώσουμε κάποια φυσική εδώ, αλλά για τώρα θα το κρατήσουμε απλό.
Star.prottopty.update = λειτουργία () {
αυτή τη στιγμή = p5.vector.lerp (
αυτή η θέση,
αυτό.target,
0,04
)
} ·
Σχέδια αστέρια
Τέλος, το Star's
σχεδιάζω()
Η μέθοδος σχεδιάζει πραγματικά το αστέρι στον καμβά. Για άλλη μια φορά, χρησιμοποιούμε
γέμισμα()
και
έλλειψη()
, αν και αυτή τη φορά καλούμε
γέμισμα()
Με μια τιμή της κλίμακας του γκρι και μια τιμή άλφα για διαφάνεια.
Κάθε πλαίσιο, η γραμμική παρεμβολή μας δίνει ένα νέο σημείο κατά μήκος της διαδρομής μεταξύ της τρέχουσας θέσης Star και του προορισμού της
Για να δώσετε στα αστέρια να λάμπουν, η τιμή άλφα προσδιορίζεται χρησιμοποιώντας P5's
θόρυβος()
λειτουργία. Αυτό επιστρέφει την τιμή θορύβου Perlin για τις καθορισμένες συντεταγμένες, πράγμα που σημαίνει ότι θα έχετε μια ομαλή, ρευστή αλληλουχία τυχαίων αριθμών. Για την τρίτη παράμετρο, περνάμε μια τιμή που βασίζεται σε χρόνο και όχι μια χωρική τιμή, έτσι ώστε ο θόρυβος να κινήσει με την πάροδο του χρόνου.
Star.prottotype.draw = λειτουργία () {
var alpha = θόρυβος (
αυτό.target.x,
αυτό.target.y,
Millis () / 1000.0
)
γεμίστε (255, άλφα * 255).
έλλειψη(
αυτό.Position.x, αυτό.position.y,
Αυτός ο άνθρωπος, αυτός ο οδηγός
)
} ·
Αυτό είναι για το πρώτο μας σκίτσο! Κάντε κλικ και σύρετε για να δείτε νέα αστέρια εμφανίζονται και συμμορφώνονται με την εικόνα Hint.
Τι έπεται?
Από εδώ, μπορείτε να προσθέσετε μερικά στοιχεία HTML για να ελέγξετε τις μεταβλητές χρησιμοποιώντας το πρόσθετο P5.dom ή ακόμα και να προσθέσετε ήχο στα οπτικά στοιχεία χρησιμοποιώντας
p5.sound
.
Μόλις γδαρμένα την επιφάνεια του τι είναι δυνατό με το p5.js και με νέα χαρακτηριστικά στο δρόμο, υπάρχει ακόμα περισσότερο για να προσβλέπουμε. Καλα να περνατε!
