Ενδιαφέρουσες κατευθυντήριες γραμμές προγραμματισμού για Σχεδιαστής-Προβάλετε την εικόνα σας (Μέρος Δεύτερο): 8 Βήματα

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:32

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

Βήμα 1: Κίνηση & λειτουργία

Επιτρέψτε μου να σας δείξω αρκετές άγνωστες εικόνες για να τονώσετε το γούστο σας.

Τι είναι αυτό? Τώρα απλώς κρατήστε αυτήν την ερώτηση πρώτα και τελευταία θα τη γνωρίζετε και θα τη χρησιμοποιήσετε.

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

Πόσες λειτουργίες μπορείτε να αναγνωρίσετε από τις παραπάνω εικόνες; Τι είδους σχέση έχουν με την κίνηση; Τώρα ας πάρουμε μια τετραγωνική συνάρτηση από αυτήν, προσθέτουμε μερικές παραμέτρους τυχαία και βλέπουμε τι θα συμβεί. Για παράδειγμα, y = x² / 100.

Αυτή είναι η εικόνα της λειτουργίας. Αντιγράψτε τον παρακάτω κώδικα.

[cceN_cpp theme = "dawn"] float x, y; void setup () {μέγεθος (300, 300); φόντο (0); x = 0; } void draw () {stroke (255); strokeWeight (2); y = pow (x, 2) / 100.0; // Η συνάρτηση pow θα επιστρέψει στην nη δύναμη του αριθμού προσδιορισμού. (x, 2) αντιπροσωπεύει το τετράγωνο του x. Η πρώτη παράμετρος είναι ο βασικός αριθμός και η δεύτερη ο δείκτης. σημείο (x, y)? x ++; } [/cceN_cpp]

Running Effect

Στη συνέχεια, επιλέξτε συνάρτηση αμαρτία. Τύπος: y = 150 + sin (x).

Αντιγράψτε τον ακόλουθο κώδικα.

[cceN_cpp theme = "dawn"] float x, y; void setup () {μέγεθος (300, 300); φόντο (0); x = 0; } void draw () {y = ύψος/2 + sin (ακτίνια (x)) * 150; // Συνάρτηση radian μετατρέψει το x σε γωνία. x ++; εγκεφαλικό επεισόδιο (255); strokeWeight (2); σημείο (x, y)? } [/cceN_cpp]

Running Effect

Αυτό είναι το γραφικό που παίρνουμε μετά τη λειτουργία του κώδικα. Και αυτά είναι τα ίχνη κίνησής τους. Σε σύγκριση με το προηγούμενο, το αποτέλεσμα είναι προφανές. Η εικόνα της λειτουργίας αντιστοιχεί στην πραγματικότητα στο κομμάτι κίνησης! Είναι αρκετά απλό. Απλώς πρέπει να αντικαταστήσετε την τιμή του x, y σε συντεταγμένη. Το πρώτο κομμάτι που σχεδιάσαμε είναι ισοδύναμο με το γραφικό της συνάρτησης y = x² / 100. Ενώ το δεύτερο κομμάτι ισούται με το γραφικό της συνάρτησης y = 150 + sin (x). Αλλά στο πρόγραμμα, η κατεύθυνση του άξονα y είναι αντίθετη. Έτσι, σε σύγκριση με το αρχικό γραφικό, το κομμάτι θα είναι ανάποδο. Τώρα, υποθέτω ότι πρέπει να έχετε την αίσθηση ότι μερικές δύσκολες ερωτήσεις που στοιχειώνονται στο κεφάλι σας για μεγάλο χρονικό διάστημα λύνονται αμέσως. Είναι εκπληκτικό ότι αυτές οι φανταστικές λειτουργίες που μάθαμε πριν μπορούν να χρησιμοποιηθούν για τον έλεγχο της γραφικής κίνησης!

Βήμα 2: Για να γράψετε μια συνάρτηση

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

Επομένως, ο παρακάτω τύπος στο πρόγραμμα γράφεται ως εξής:

y = x² → y = pow (x, 2) ή y = sq (x)

y = x³ → y = pow (x, 3)

y = xⁿ → y = pow (x, n)

y = 4ⁿ → y = pow (4, n)

y ＝ logₑ² → y = log (2)

y = e² → y = exp (2)

y = √5 → y = sqrt (5)

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

Τριγωνομετρική συνάρτηση

Τώρα, ας προχωρήσουμε περαιτέρω για να μάθουμε μερικά γραπτά τριγωνομετρικών συναρτήσεων.

Πρέπει να δώσουμε προσοχή ότι στο πρόγραμμα η είσοδος της παραμέτρου συνάρτησης σε σχέση με τη γωνία υιοθετεί ακτίνιο. Έτσι, η αμαρτία90 ° θα γραφτεί ως αμαρτία (PI ／ 2). Εάν δεν είστε εξοικειωμένοι με αυτήν τη μέθοδο, μπορείτε να χρησιμοποιήσετε τη συνάρτηση randians για να μετατρέψετε τη γωνία σε ακτινικό εκ των προτέρων και, στη συνέχεια, να γράψετε sin （radians (90)).

Η χρήση βαθμών συνάρτησης είναι συγκριτικά αντίθετη. Μπορεί να μετατρέψει το ακτίνιο σε γωνία. Εισαγάγετε εκτύπωση (μοίρες (PI/2)) απευθείας στην περιοχή επεξεργασίας και δείτε τι θα λάβετε.

Βήμα 3: Έλεγχος κίνησης γραφικών με τριγωνομετρική συνάρτηση

Ακολουθεί μια περίπτωση για να δείτε την πραγματική επίδραση της γραφικής κίνησης.

[cceN_cpp theme = "dawn"] float x, y; void setup () {μέγεθος (700, 300); } void draw () {background (234, 113, 107); y = sin (ακτίνια (x)) * 150 + 150; x ++; noStroke (); έλλειψη (x, y, 50, 50); } [/cceN_cpp]

Η συνάρτηση αμαρτία είναι μια περιοδική συνάρτηση. Η ελάχιστη τιμή του είναι －1 και η μέγιστη τιμή 1. Το ύψος της οθόνης είναι 300. Αναφέρεται σε y = sin (ακτίνια (x)) * 150 + 150, επομένως το εύρος αλλαγής της τιμής y θα ελέγχεται καλά εντός 0 στα 300.

Κύκλος περιστροφής

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

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

Ένα απλό παράδειγμα:

[cceN_cpp theme = "dawn"] float x, y, r, R, angle, void setup () {μέγεθος (300, 300); r = 20; // Διάμετρος κύκλου R = 100; // Ακτίνα διαδρομής κίνησης x = 0; γωνία = 0; y = ύψος/2; } void draw () {background (234, 113, 107); μετάφραση (πλάτος/2, ύψος/2). // Μετακινήστε το αρχικό σημείο στο κέντρο της οθόνης. noStroke (); x = R * cos (γωνία); y = R * sin (γωνία); έλλειψη (x, y, r, r); γωνία += 0,05; } [/cceN_cpp]

Κοίτα! Εμφανίζεται ένας περιστρεφόμενος κύκλος! Εδώ, η ανεξάρτητη μεταβλητή δεν είναι πλέον σε σταθερή αύξηση bit γωνίας (ισούται με θ στην εικόνα). Είναι stand for angle. Μεταξύ αυτών, το xy έχει σχετικά πολλαπλασιασμένο συντελεστή R, ο οποίος οδηγεί στην επέκταση της ακτίνας κίνησης του κύκλου (το R είναι για την ακτίνα). Εάν δεν πρόκειται να πολλαπλασιάσει το R, η διαδρομή κίνησής του θα είναι περιορισμένη εντός του εύρους από -1 έως 1.

Γιατί να μην χρησιμοποιήσετε το αυξανόμενο x; Σύμφωνα με την ιδιότητα της ίδιας της συνάρτησης, κάθε x εντός τομέα ορισμού έχει το μόνο y που ταιριάζει με αυτό. Έτσι, στο επίπεδο συντεταγμένων συστήματος ορθογώνιας διάστασης, δεν μπορείτε να βρείτε μια «απλή συνάρτηση» για να σχεδιάσετε απευθείας τον κύκλο. Αυτό σημαίνει ότι δεν μπορούμε πλέον να χρησιμοποιήσουμε αυτήν τη μορφή.

y = (Η άγνωστη έκφραση του x?);

x ＋＋;

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

x = R * cos (γωνία);

y = R * sin (γωνία);

γωνία += 0,05;

Μερικοί από εσάς ίσως αναρωτιέστε γιατί μπορεί να εμφανίσει την πορεία της κίνησης κύκλου. Σύμφωνα με τον ορισμό της τριγωνομετρικής συνάρτησης, μπορούμε εύκολα να αιτιολογήσουμε ότι η συνάρτηση αμαρτάνει την αναλογία της αντίθετης πλευράς προς την υποτείνουσα. συνάρτηση cos είναι η αναλογία γειτονικής προς υποτείνουσα. Όπου και αν βρίσκεται το σημείο του κύκλου, το r (ακτίνα) θα παραμείνει αμετάβλητο. Ως εκ τούτου, μπορούμε να ολοκληρώσουμε την έκφραση του x συντεταγμένου και του συντεταγμένου y.

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

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

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

Αυτές είναι εικόνες που σχετίζονται πολύ με την τριγωνομετρική λειτουργία.

Βήμα 4: Σύστημα συντεταγμένων κίνησης

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

Λειτουργία μετάφραση

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

Μορφή πρόσκλησης:

μεταφράζω (α, β)

Η πρώτη παράμετρος σημαίνει κίνηση προς τη θετική κατεύθυνση του x άξονα για ένα εικονοστοιχείο. Η δεύτερη παράμετρος σημαίνει κίνηση προς τη θετική κατεύθυνση του άξονα y για b εικονοστοιχεία.

Συγκρίνετε τους δύο κώδικες και προσπαθήστε να βρείτε οποιαδήποτε διαφορά. (Για να απλοποιήσουμε τον κώδικα, μπορούμε να διαγράψουμε το μέγεθος της λειτουργίας, το πλάτος και το ύψος της οθόνης είναι προεπιλεγμένα 100).

Πριν χρησιμοποιήσουμε:

έλλειψη (0, 0, 20, 20);

Αφού χρησιμοποιήσουμε:

μετάφραση (50, 50).

έλλειψη (0, 0, 20, 20);

Λειτουργία περιστροφή

Μορφή πρόσκλησης:

περιστροφή (α)

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

Πριν τη χρήση:

έλλειψη (50, 50, 20, 20);

Μετά τη χρήση:

περιστροφή (ακτίνια (30)).

έλλειψη (50, 50, 20, 20);

Αποτέλεσμα στο πρόγραμμα είναι να κάνει τον κύκλο να περιστρέφεται γύρω από το κεντρικό σημείο συντεταγμένων δεξιόστροφα για 30 μοίρες.

Κλίμακα συνάρτησης

Μορφή πρόσκλησης:

κλίμακα (α)

Αυτή η λειτουργία μπορεί να σμικρύνει το σύστημα συντεταγμένων. Η τιμή είναι για κλιμάκωση. Όταν η παράμετρος είναι πέρα από το 1, τότε μεγεθύνετε. εάν είναι χαμηλότερη από 1, τότε σμικρύνετε.

Πριν τη χρήση:

έλλειψη (0, 0, 20, 20);

Μετά τη χρήση:

κλίμακα (4)?

έλλειψη (0, 0, 20, 20);

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

κλίμακα (4, 2).

έλλειψη (0, 0, 20, 20);

Υπέρθεση της συνάρτησης μετασχηματισμού

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

μετάφραση (40, 10).

μετάφραση (10, 40).

έλλειψη (0, 0, 20, 20);

Το τελικό του αποτέλεσμα θα είναι ίσο με

μετάφραση (50, 50).

έλλειψη (0, 0, 20, 20);

Ameδια για περιστροφή λειτουργίας

περιστροφή (ακτίνια (10)).

περιστροφή (ακτίνια (20)).

έλλειψη (50, 50, 20, 20);

Ισούται με

περιστροφή (ακτίνια (30)).

έλλειψη (50, 50, 20, 20);

Και η κλίμακα λειτουργίας και η περιστροφή του κέντρου στο αρχικό σημείο για κλίμακα και περιστροφή. Αν θέλουμε να έχουμε το φαινόμενο περιστροφής με κεντρική θέση στο (50, 50), πρέπει να σκεφτούμε με τον αντίθετο τρόπο. Πρώτα μετακινήστε το αρχικό σημείο στη θέση (50, 50) και, στη συνέχεια, προσθέστε τη λειτουργία περιστροφής μετασχηματισμού. Τέλος, ζωγραφίστε το γραφικό σας στο αρχικό σημείο.

Πριν τη χρήση:

έλλειψη (50, 50, 50, 20);

Μετά τη χρήση:

μετάφραση (50, 50).

περιστροφή (ακτίνια (45)).

έλλειψη (0, 0, 50, 20); // Για να δούμε την αλλαγή της γωνίας περιστροφής, έχουμε κάνει ένα οβάλ.

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

Οριζόντια κίνηση και κυκλική κίνηση

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

Βήμα 5: Οριζόντια κίνηση

[cceN_cpp theme = "ξημέρωμα"]

int x, y; void setup () {μέγεθος (300, 300); x = 0; y = ύψος/2; } void draw () {background (234, 113, 107); noStroke (); μετάφραση (x, y)? έλλειψη (0, 0, 50, 50); x ++; } [/cceN_cpp]

Η συντεταγμένη του κύκλου δεν αλλάζει αλλά το σύστημα συντεταγμένων του αλλάζει.

Κίνηση περιστροφής

[cceN_cpp theme = "dawn"] float r, R, angle; void setup () {μέγεθος (300, 300); r = 20; // Διάσταση κύκλου R = 100; // Ακτίνα κίνησης track} void draw () {background (234, 113, 107); μετάφραση (πλάτος/2, ύψος/2). // Μετακινήστε το αρχικό σημείο στο κέντρο της οθόνης. περιστροφή (γωνία)? noStroke (); έλλειψη (0, R, r, r); γωνία += 0,05; } [/cceN_cpp]

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

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

Πρόσβαση στην κατάσταση συντεταγμένων

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

Παράδειγμα:

[cceN_cpp theme = "dawn"] pushMatrix (); // Αποθήκευση μετάφρασης κατάστασης συστήματος συντεταγμένων (50, 50). έλλειψη (0, 0, 20, 20); popMatrix (); // Ανάγνωση κατάστασης συστήματος συντεταγμένων rect (0, 0, 20, 20). [/cceN_cpp]

Σε αυτό το παράδειγμα, πριν χρησιμοποιήσουμε το translate (50, 50), χρησιμοποιούμε τη συνάρτηση pushMatrix.για να αποθηκεύσουμε την τρέχουσα κατάσταση του συστήματος συντεταγμένων. Αυτή είναι, ταυτόχρονα, η αρχική κατάσταση. Αφού σχεδιάσουμε έναν κύκλο και μετά εφαρμόσουμε το popMatrix, θα επιστρέψει σε αυτήν την κατάσταση. Προς το παρόν, εφαρμόστε τη λειτουργία rect, θα διαπιστώσετε ότι δεν έχει επηρεαστεί από τη λειτουργία μετάφρασης, αλλά σχεδιάζει ένα τετράγωνο στην αριστερή επάνω γωνία του αρχικού σημείου.

Επιπλέον, οι λειτουργίες pushMatrix και popMatrix επιτρέπουν την ένθεση.

Για παράδειγμα

pushMatrix ();

pushMatrix ();

popMatrix ();

popMatrix ();

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

Συνδυασμένη κίνηση ή κίνηση σε κίνηση;

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

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

[cceN_cpp theme = "dawn"] int x, y; πλωτή γωνία? void setup () {μέγεθος (300, 300); φόντο (234, 113, 107); noStroke (); x = 0; // Όταν η αρχική τιμή του x είναι 0, μπορούμε να παραμελήσουμε αυτήν την πρόταση κώδικα. Κατά τη δήλωση μεταβλητής, η προεπιλεγμένη τιμή είναι 0. y = 0. // Το ίδιο με τα παραπάνω. γωνία = 0; // Το ίδιο με τα παραπάνω. } void draw () {angle += 0,25; y--; μετάφραση (πλάτος/2, ύψος/2). pushMatrix (); περιστροφή (γωνία)? έλλειψη (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Και υπάρχουν κυκλικές κινήσεις και κλιμάκωση συστήματος συντεταγμένων.

[cceN_cpp theme = "dawn"] float x, y, angle; void setup () {μέγεθος (300, 300); φόντο (234, 113, 107); noStroke (); } void draw () {angle += 0,01; x = sin (γωνία) * 100; y = cos (γωνία) * 100; μετάφραση (πλάτος / 2, ύψος / 2). pushMatrix (); κλίμακα (1 + 0.1 * αμαρτία (γωνία * 10)). έλλειψη (x, y, 5, 5); popMatrix (); } [/cceN_cpp]

Μην σας απατάει! Το σημείο του κύκλου κάνει στην πραγματικότητα κυκλική κίνηση. Δεν είναι δύσκολο να το καταλάβουμε αν το συγκρίνουμε με κλιμάκωση με βιντεοκάμερα. Μια βιντεοκάμερα μετακινείται συνεχώς εμπρός ή πίσω τραβάει ένα σημείο σε κυκλική κίνηση.

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

Βήμα 6: Ολοκληρωμένη χρήση

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

[cceN_cpp theme = "dawn"] float x1, y1, x2, y2, r, R; float angle1, angle2; void setup () {μέγεθος (300, 300); r = 12; R = 120; γωνία1 = 0; γωνία2 = PI/4; } void draw () {background (234, 113, 107); noStroke (); μετάφραση (πλάτος / 2, ύψος / 2). γωνία 1 += 0,02; γωνία2 += 0,06; x1 = R *sin (γωνία 1); y1 = R* cos (γωνία 1); x2 = R/2 *sin (γωνία2); y2 = R/2 *cos (γωνία2); έλλειψη (x1, y1, r/2, r/2); έλλειψη (x2, y2, r, r); έλλειψη (-x1, -y1, r/2, r/2); έλλειψη (-x2, -y2, r, r); έλλειψη (x1, -y1, r/2, r/2); έλλειψη (x2, -y2, r, r); έλλειψη (-x1, y1, r/2, r/2); έλλειψη (-x2, y2, r, r); εγκεφαλικό επεισόδιο (255); strokeWeight (3); γραμμή (x1, y1, x2, y2); γραμμή (-x1, -y1, -x2, -y2); γραμμή (x1, -y1, x2, -y2); γραμμή (-x1, y1, -x2, y2); } [/cceN_cpp]

Αυτό το παράδειγμα δεν περιέχει καμία γνώση πέρα από το προηγούμενο κεφάλαιο που εισαγάγαμε.

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

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

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

Βήμα 7: ΤΕΛΟΣ

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

[cceN_cpp theme = "dawn"] float browX, earD, eyeD, faceD; void setup () {μέγεθος (500, 500); } void draw () {background (200, 0, 0); browX = 150 + sin (frameCount / 30.0) *20; earD = 180 + sin (frameCount / 10.0) *20; eyeD = 60 + sin (frameCount/30.0) *50; faceD = 300; strokeWeight (8); έλλειψη (175, 220, earD, earD); έλλειψη (πλάτος - 175, 220, earD, earD); rect (100, 100, faceD, faceD); γραμμή (browX, 160, 220, 240); γραμμή (πλάτος-φρύδιΧ, 160, πλάτος-220, 240); συμπλήρωση (τυχαίο (255), τυχαίο (255), τυχαίο (255)); έλλειψη (175, 220, eyeD, eyeD); έλλειψη (πλάτος-175, 220, eyeD, eyeD); γέμισμα (255); σημείο (πλάτος/2, ύψος/2). τρίγωνο (170 - cos (frameCount / 10.0) * 20, 300 - sin (frameCount / 10.0) * 20, πλάτος - (170 + cos (frameCount / 10.0) * 20), 300 + sin (frameCount / 10.0) * 20, 250, 350); } [/cceN_cpp]

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

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

Αυτό το άρθρο προέρχεται από τον σχεδιαστή Wenzy.

Βήμα 8: Σχετικές αναγνώσεις:

Ενδιαφέρουσες οδηγίες προγραμματισμού για σχεδιαστή-Επεξεργασία αρχικού αγγίγματος

Ενδιαφέρουσες οδηγίες προγραμματισμού για σχεδιαστές-Δημιουργήστε το πρώτο σας πρόγραμμα επεξεργασίας

Ενδιαφέρουσες κατευθυντήριες γραμμές προγραμματισμού για σχεδιαστής - Προβάλετε την εικόνα σας (Μέρος Πρώτο)

Εάν έχετε απορίες, μπορείτε να στείλετε ένα email στη διεύθυνση [email protected].

Αυτό το άρθρο προέρχεται από: