Αναζητώντας απεγνωσμένα squircles

Η αναζήτηση του Figma για το μυστήριο μαθηματικά πίσω από το σχήμα iOS

Αυτή είναι μια ιστορία για το κυνήγι του μηχανικού Figma για την τέλεια απάντηση σε μια πρόκληση προγραμματισμού. Αν αντέχει με σας, προσλαμβάνουμε!

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

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

Παρόλο που δεν είμαι σχεδιαστής από το εμπόριο - είμαι μηχανικός που δουλεύει στο Figma, το εργαλείο σχεδίασης συνεργατικού σχεδιασμού μέσω διαδικτύου - είναι εύκολο να δούμε πώς εφαρμόζονται οι παρατηρήσεις του Eames στην εργασία μου. Αντί να τακτοποιήσω τα στοιχεία UI για να φτιάξω προϊόντα, οργανώνω μαθηματικές έννοιες που εκφράζονται σε κώδικα για την υλοποίηση εργαλείων και χαρακτηριστικών. Και οι περιορισμοί του χρόνου, της απλότητας, της συντήρησης και ακόμη και της αισθητικής διαδραματίζουν έναν παρόμοιο κυρίαρχο ρόλο στη διαδικασία μου.

Ένα πρόσφατο έργο υπογραμμίζει εξαιρετικά καλά αυτές τις παραλλαγές. Μου ανατέθηκε να προσθέσω με κάποιο τρόπο την υποστήριξη για το σχήμα "squircle" της Apple στο Figma - με λίγα πράγματα να συνεχίσω, έχω να δουλέψω να κάνω έρευνα.

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

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

Το σκάφος: Ομαλός χειριστής

Η ιστορία μου ξεκινάει πολύ πριν ξεκινήσω στο Figma, στις 10 Ιουνίου 2013, την ημέρα που η Apple κυκλοφόρησε iOS 7. Υπήρχε κάτι λεπτό για την ενημέρωση: τα chiclets της αρχικής οθόνης είχαν μια πιο ζουμερή, πιο οργανική αίσθηση. Είχαν πάει από τετράγωνα με στρογγυλεμένες γωνίες, σε squircles (ένα portmanteau του «τετράγωνο» και «κύκλος»).

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

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

1.1 - Στρογγυλεμένες τετράγωνα εναντίον squircles: είναι τα μικρά πράγματα, προφανώς!

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

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

Από τη φόρμα στη φόρμουλα

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

Ευτυχώς, οι άνθρωποι έχουν θέσει αυτό το ερώτημα για όσο χρονικό διάστημα υπάρχει το iOS 7 και σίγουρα δεν είμαστε οι πρώτοι που περπατούν αυτό το τμήμα του ταξιδιού! Η βασική αρχική εργασία του Marc Edwards περιελάμβανε ένα στιγμιότυπο οθόνης που έδειχνε ότι το σχήμα του εικονιδίου ήταν μια ιδιαίτερη γενίκευση μιας έλλειψης, που ονομάζεται superellipse. Ο ακόλουθος μαθηματικός τύπος μπορεί να περιγράψει κύκλους, ελλείψεις και υπερκαταληψίες ανάλογα με το πώς επιλέγονται τα a, b και n:

2.1 - Τύπος Superellipse

Εάν επιλέξετε, ας πούμε, n = 2, a = 5 και b = 3, παίρνετε μια κανονική έλλειψη με έναν κύριο άξονα 5 προσανατολισμένο κατά μήκος του x και έναν δευτερεύοντα άξονα 4 προσανατολισμένο κατά μήκος y. Διατηρώντας n = 2 και επιλέγοντας a = b = 1 περιγράφεται ένας τέλειος κύκλος μονάδας. Ωστόσο, αν επιλέξετε μια τιμή για το n που είναι μεγαλύτερη από δύο, το αποτέλεσμα είναι ένα superellipse - το στρογγυλεμένο ελλειπτικό σχήμα αρχίζει να αναμειγνύεται στο σχήμα του οριοθέτη του ορίου, με τις γωνίες να γίνονται τέλεια αιχμηρές στο όριο που το n φτάνει στο άπειρο. Οι πρώτες προτάσεις προσπάθησαν να περιγράψουν το σχήμα της Apple με n = 5. Εάν το δοκιμάσετε, θα δείτε ότι φαίνεται πολύ κοντά σε αυτό που θα βρείτε σε μια συσκευή που εκτελεί iOS 7+.

Εάν αυτή ήταν η αληθινή περιγραφή, θα μπορούσαμε να ταιριάξουμε σε ένα λογικό αριθμό τμημάτων Bézier σε αυτό το σχήμα και έπειτα να κάνουμε το λεπτό έργο του να υπολογίσουμε πώς να ενσωματώσουμε αυτή τη νέα ιδέα στο Figma. Δυστυχώς, όμως, οι προσεγμένες προσπάθειες συνέχισης έδειξαν ότι η φόρμουλα superellipse δεν ήταν αρκετά σωστή (ωστόσο, αυτές τις μέρες οι πραγματικές υπερκαλύψεις χρησιμοποιούνται ως εικόνες σε άλλα πλαίσια). Στην πραγματικότητα, για όλες τις επιλογές του n στην παραπάνω εξίσωση υπάρχει μια μικρή αλλά συστηματική απόκλιση σε σύγκριση με το πραγματικό σχήμα εικονιδίου.

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

Κάνοντας πρόοδο απαιτεί κάποια σοβαρή προσπάθεια και πάλι χαίρομαι που συγκομίζω αυτό που έχουν σπάσει άλλοι. Ένας ερευνητής, ο Mike Swanson των Juicy Bits, έκανε μια υπόθεση που συσσωρεύει τις γωνίες του squircles χρησιμοποιώντας μια ακολουθία καμπύλων Bézier, την οποία επεξεργάστηκε χρησιμοποιώντας έναν γενετικό αλγόριθμο για να βελτιστοποιήσει την ομοιότητα με το επίσημο σχήμα της Apple. Τα αποτελέσματα που απέκτησε αποδείχθηκαν σωστά, όπως αποδείχθηκε με την εξαιρετική άμεση προσέγγιση του Manfred Schwind, η οποία φαίνεται ακριβώς στον κώδικα iOS που δημιουργεί τα εικονίδια. Έχουμε λοιπόν δύο διαφορετικές προσεγγίσεις που αποδίδουν την ίδια δομή Bézier: Οι iOS 7 Squircles ήταν ραγισμένες και διπλά ελεγμένες από άλλους και δεν έπρεπε καν να υπολογίσουμε τίποτα!

Ένα κλειδί στα έργα

Δύο σημαντικές λεπτομέρειες παραμένουν, εμποδίζοντας μας να κλωνοποιήσουμε το σχήμα κατευθείαν στο Figma και να συνεχίσουμε:

Πρώτον, υπάρχει το εκπληκτικό γεγονός ότι η έκδοση iOS του τύπου (τουλάχιστον κατά τη στιγμή της έρευνας) βρέθηκε να έχει κάποιες ιδιορρυθμίες - οι γωνίες δεν είναι ακριβώς συμμετρικές και η μία πλευρά έχει ένα μικροσκοπικό ίσιο τμήμα που σαφώς δεν " t ανήκουν. Δεν το θέλουμε αυτό επειδή περιπλέκει τόσο τον κώδικα όσο και τις δοκιμές, αλλά η κατάργηση του επιπλέον τμήματος γίνεται εύκολα με την απλή αντιγραφή του μισού της γωνίας χωρίς προβλήματα.

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

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

Ως πρόσθετο πλεονέκτημα, αν μπορούμε να παραμετροποιήσουμε τη διαδικασία εξομάλυνσης που μετατρέπει ένα στρογγυλεμένο τετράγωνο σε ένα στροβιλισμό, πιθανόν να εφαρμόσουμε την ίδια διαδικασία σε άλλα σημεία όπου γίνεται στρογγυλοποίηση γωνιών στο Figma: αστέρια, πολύγωνα και ακόμη και γωνίες σε αυθαίρετα διανυσματικά δίκτυα με το εργαλείο στυλό. Παρά την επιπλοκή, αυτό αρχίζει να μοιάζει με ένα πιο πλήρες και πολύτιμο χαρακτηριστικό από την απλή προσθήκη υποστήριξης για iOS 7 squircles θα ήταν. Τώρα δίνουμε στους σχεδιαστές μια απεριόριστη ποικιλία από νέα σχήματα που μπορούν να χρησιμοποιηθούν σε πολλές καταστάσεις και ένας από αυτούς συμβαίνει να αντιστοιχεί στο σχήμα του εικονιδίου εικονιδίων που μας ξεκίνησε στην πρώτη θέση.

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

Ηλεκτρικά εργαλεία: Διαφορική γεωμετρία καμπυλών

Πριν βυθιστείτε σε παραμετροποιητικές διαδρομές, ας κάνουμε ένα βήμα πίσω και χύνουμε μερικά επίσημα εργαλεία που θα μας βοηθήσουν να αναλύσουμε τι συμβαίνει. Πρώτα απ 'όλα, πρέπει να επιλύσουμε τον τρόπο με τον οποίο θα περιγράψουμε ένα κύμα. Όταν συζητούσαμε προηγουμένως τις υπερυψίλισσες, χρησιμοποιήσαμε μια εξίσωση που περιλαμβάνει τα x και y, όπου όλα τα σημεία (x, y) στο επίπεδο που ικανοποιούν την εξίσωση υποδηλώνουν έμμεσα την υπερκάλυψη. Αυτό είναι κομψό όταν η εξίσωση είναι απλή, αλλά τα πραγματικά squircles είναι ένα συνονθύλευμα καμπυλών Bézier μαζευμένες μεταξύ τους, πράγμα που οδηγεί σε απροστάτευτα βρώμικες σιωπηρές εξισώσεις.

Μπορούμε να αντιμετωπίσουμε αυτή την επιπλοκή χρησιμοποιώντας μια πιο σαφή προσέγγιση: να πάρουμε μια μεταβλητή t, να την περιορίσουμε σε ένα πεπερασμένο διάστημα και να χαρτογραφήσουμε κάθε τιμή που t μπορεί να πάρει σε αυτό το διάστημα σε ένα ξεχωριστό σημείο στην περίμετρο squircle (οι καμπύλες του Bézier είναι σχεδόν πάντα εκπροσωπούσαν αυτόν τον τρόπο, στην πραγματικότητα). Εάν συγκεντρωθούμε σε μία μόνο από τις γωνίες, περιορίζοντας έτσι την ανάλυσή μας σε καμπύλη γραμμή με σαφή αρχή και τέλος, μπορούμε να επιλέξουμε τη χαρτογράφηση μεταξύ t και της γωνίας έτσι ώστε t = 0 να αντιστοιχεί στην αρχή της γραμμής t = 1 αντιστοιχεί στο άκρο της γραμμής και ομαλά ολισθαίνοντας t μεταξύ 0 και 1 ομαλά εντοπίζει το στρογγυλό τμήμα της γωνίας. Στη μαθηματική γλώσσα, θα περιγράψουμε τη γωνία μας με το μονοπάτι r ​​(t), το οποίο είναι δομημένο ως

4.1 - Έγχυση καμπύλης αεροπλάνου με [0,1]

όπου x (t) και y (t) είναι ξεχωριστές συναρτήσεις του t για τα συστατικά x και y του r. Μπορούμε να σκεφτούμε το r (t) ως ένα είδος ιστορίας πορείας, για ένα ταξίδι που θα παίρνατε στο αυτοκίνητό σας. Κάθε φορά που ξεκινάτε και φτάνετε, μπορείτε να αξιολογήσετε το r (t) για να πάρετε τη θέση του αυτοκινήτου σας κατά μήκος της διαδρομής σας. Από τη διαδρομή r (t) μπορούμε να διαφοροποιήσουμε για να πάρουμε την ταχύτητα v (t) και την επιτάχυνση a (t):

4.2 - Ταχύτητα της καμπύλης του επιπέδου και επιτάχυνση

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

4.3 - Καμπύλη χωρίς καμπύλη καμπύλων επιπέδου

Αλλά τι σημαίνει αυτή η φόρμουλα; Αν και μπορεί να φαίνεται λίγο περίπλοκο, η καμπυλότητα έχει μια απλή γεωμετρική κατασκευή, αρχικά λόγω του Cauchy:

  1. Το κέντρο καμπυλότητας C σε οποιοδήποτε σημείο P κατά μήκος της καμπύλης βρίσκεται στη διατομή της γραμμής που είναι φυσιολογική προς την καμπύλη στο P και σε μια άλλη κανονική γραμμή που παίρνει απεριόριστα κοντά στο P. (Ως πλάγια παρατήρηση, ο κύκλος με κέντρο το C όπως κατασκευάστηκε παραπάνω είναι που ονομάζεται κυκλικός κύκλος στο Ρ, από το λατινικό ρήμα osculare, που σημαίνει «να φιλήσεις». Δεν είναι τόσο σπουδαίο;
  2. Η ακτίνα καμπυλότητας R είναι η απόσταση μεταξύ C και P.
  3. Η καμπυλότητα κ είναι το αντίστροφο της R.

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

Η γεωμετρία είναι βασιλιά: Παράμετρος μήκους καναλιού

Με την εισαγωγή καμπυλότητας, έχουμε μια τελευταία ζευγάρια ρυτίδων για να σιδερώσουν έξω. Πρώτα, σκεφτείτε για μια στιγμή δύο αυτοκίνητα που οδηγούν κατά μήκος μιας στρογγυλεμένης γωνιακής διαδρομής. ένα αυτοκίνητο συνεχίζει να επιταχύνει και στη συνέχεια φρενάρει ολόκληρο τον δρόμο (), ενώ το άλλο αυτοκίνητο επιταχύνεται ομαλά και στη συνέχεια ακινητοποιείται προς τα κάτω στο τέλος. Αυτοί οι δύο διαφορετικοί τρόποι οδήγησης θα οδηγήσουν σε πολύ διαφορετικές ιστορικές διαδρομές, παρόλο που έγινε η ίδια ακριβώς διαδρομή. Φροντίζουμε μόνο για το σχήμα της γωνίας, και όχι για το πώς κάποιος οδηγός το διαπραγματεύτηκε - πώς μπορούμε να χωρίσουμε τα δύο; Το κλειδί είναι να μην χρησιμοποιηθεί ο χρόνος για την επισήμανση των σημείων στο ιστορικό, αλλά μάλλον η σωρευμένη απόσταση που διανύθηκε ή το μήκος τόξου. Επομένως, αντί να απαντήσουμε σε ερωτήσεις όπως «πού ήταν το αυτοκίνητο δέκα λεπτά στο ταξίδι του;», προτιμήσαμε να απαντήσουμε «πού ήταν το αυτοκίνητο δέκα μίλια στο ταξίδι του;». Αυτός ο τρόπος περιγραφής των διαδρομών, η παραμετροποίηση μήκους τόξου, συλλαμβάνει μόνο τη γεωμετρία τους.

Εάν έχουμε κάποιο χρονοδιάγραμμα διαδρομής r (t) στο χέρι, μπορούμε πάντα να εξάγουμε το μήκος τόξου s ως συνάρτηση του t από την πορεία ενσωματώνοντας την ταχύτητά του ως εξής:

5.1 - Αναπόσπαστο μήκος

Αν μπορούμε να αναστρέψουμε αυτή τη σχέση για να βρούμε t (s), τότε μπορούμε να την αντικαταστήσουμε για το t στην ιστορική πορεία μας r (t) για να πάρουμε την επιθυμητή παραμετροποίηση μήκους τόξου r (s). Η παραμετροποίηση μήκους τόξου μιας διαδρομής είναι ισοδύναμη με ένα ιστορικό διαδρομής που γίνεται από ένα αυτοκίνητο που οδηγεί με ταχύτητα μονάδας, έτσι δεν είναι εκπληκτικό ότι η ταχύτητα v (s) είναι πάντα ένας φορέας μονάδας και η επιτάχυνση a (s) είναι πάντα κάθετη στην ταχύτητα. Συνεπώς, η παραμετροποιημένη εκδοχή της καμπυλότητας μήκους τόξου απλοποιεί μόνο το μέγεθος της επιτάχυνσης,

5.2 - Καμπυλότητα στην παραμετροποίηση μήκους τόξου

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

Σχεδιάστε την καμπυλότητα, υπολογίστε την καμπύλη

Τώρα για την άλλη ρυτίδα: έχουμε μόλις δει πώς να πάμε από μια περιγραφή ιστορικού πορείας μιας καμπύλης r (t) στην παραμετροποίηση μήκους τόξου r (s) και πώς να εξάγουμε την υπογραφείσα καμπυλότητα k (s) από αυτήν . Μπορούμε όμως να κάνουμε το αντίστροφο; Μπορούμε να σχεδιάσουμε ένα προφίλ καμπυλότητας και από αυτό να αντλήσουμε τη γονική καμπύλη; Ας εξετάσουμε και πάλι την αναλογία αυτοκινήτων - ας υποθέσουμε ότι καθώς οδηγούμε σε σταθερή ταχύτητα μονάδας κατά μήκος μιας διαδρομής, καταγράψαμε συνεχώς τη θέση του τιμονιού καθ 'όλη τη διαδρομή. Εάν πήραμε αυτά τα στοιχεία διεύθυνσης και τα έδωσαν αργότερα σε έναν άλλο οδηγό, θα μπορούσαν να ανοικοδομήσουν τέλεια τη διαδρομή, εφ 'όσον έπαιξαν σωστά τις θέσεις του τιμονιού και οδήγησαν ακριβώς την ίδια ταχύτητα. Επομένως, βλέπουμε διαισθητικά ότι έχουμε αρκετές πληροφορίες για την ανακατασκευή της γονικής καμπύλης, αλλά πώς φαίνεται ο υπολογισμός μαθηματικά; Είναι λίγο τριχωτό, αλλά είναι ακόμα δυνατό, χάρη στον Euler, χρησιμοποιώντας την παραμετροποίηση μήκους τόξου - αν επιλέξουμε ένα σύστημα συντεταγμένων έτσι ώστε η καμπύλη να αρχίζει από την αρχή και να έχει την αρχική του κατεύθυνση κατευθυνόμενη κατά μήκος του άξονα x, τότε x ) και y (s) μπορεί να ανακατασκευαστεί από k (s) ως εξής:

6.1 - Ανάκτηση μιας καμπύλης από την καμπυλότητα της

Τελευταία, σημειώστε το επιχείρημα των συναρτήσεων ημιτονοειδούς και συνημίτου παραπάνω: είναι το ολοκλήρωμα της υπογεγραμμένης καμπυλότητας. Κανονικά, τα επιχειρήματα που παρέχονται στις τριγωνομετρικές λειτουργίες είναι γωνίες μετρημένες σε ακτίνια και αυτό ισχύει και στην περίπτωση αυτή: το ολοκλήρωμα από a έως b της υπογεγραμμένης καμπυλότητας είναι η κλάση στο b μείον την κλάση στο a. Έτσι, αν αρχίσουμε με ένα τετράγωνο και κόψουμε τη γωνία με τον τρελό τρόπο που θέλουμε, μετρήστε την καμπυλότητα πάνω στο τμήμα που τρίψουμε και ολοκληρώστε το αποτέλεσμα, θα πάρουμε πάντα π / 2.

Σκαρφάλου κάτω από το νυστέρι

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

7.1 - Ανάλυση καμπυλότητας στρογγυλεμένου ορθογωνίου

Επαναλαμβάνουμε αυτή τη διαδικασία τώρα για τις πραγματικές γωνίες της Apple για να δούμε τις καμπυλώσεις τους, οι οποίες είναι πολύ διαφορετικές και πολύ διαφωτιστικές:

7.2 - ανάλυση καμπυλότητας squircle iOS 7

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

Διάσπαση: Εξομάλυνση παραμετροποιημένη

Λοταρία! Σε αυτή την τελευταία παρατήρηση βρίσκεται το κλειδί για το πώς μπορούμε να παραμετροποιήσουμε την εξομάλυνση της γωνίας μας. Σε μηδενική εξομάλυνση, θέλουμε ένα προφίλ καμπυλότητας, όπως το στρογγυλεμένο ορθογώνιο: επιτραπέζιο. Καθώς η εξομάλυνση αυξάνεται σιγά-σιγά, θέλουμε το ύψος της επιφάνειας να παραμείνει σταθερό, ενώ οι άκρες των γκρεμών αρχίζουν να μετατρέπονται σε απότομες κλίσεις, αποδίδοντας ένα ισοσκελές τραπεζοειδές προφίλ καμπυλότητας (ακόμα με συνολική επιφάνεια π / 2, φυσικά). Καθώς η εξομάλυνση πλησιάζει το μέγιστο, θέλουμε το επίπεδο τμήμα του τραπεζοειδούς να εξαφανιστεί, αφήνοντάς μας με ένα ευρύ ισοσκελές τριγωνικό προφίλ, το ύψος του οποίου είναι το ύψος της αρχικής επιφάνειας του τραπεζιού.

8.1 - Προφίλ καμπυλότητας για διάφορες τιμές της παραμέτρου εξομάλυνσης

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

8.2 - Παραμετροποίηση προφίλ καμπυλότητας σκίασης

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

8.2 - Το πρώτο ολοκλήρωμα του 6.1 όπως εφαρμόζεται στις εξισώσεις 8.2

Μεγάλη, μέχρι τώρα τόσο καλή! Μπορούμε να συνεχίσουμε να αγκαλιάζουμε μαζί για να σχηματίσουμε τα επόμενα δύο ολοκληρώματα:

8.2 - Δεύτερο ολοκλήρωμα του 6.1 όπως εφαρμόζεται στις εξισώσεις 8.2 (ενσωματωμένο Fresnel)

Αλίμονο, εδώ χτυπήσαμε ένα χτύπημα, καθώς αυτά τα ολοκληρώματα δεν είναι εξίσου εύκολα. Εάν έχετε ακούσει για τη σύνδεση μεταξύ τριγωνομετρικών λειτουργιών και exponentials, μπορεί να υποθέσετε ότι αυτά τα ολοκληρώματα σχετίζονται με τη λειτουργία σφάλματος, η οποία δεν μπορεί να εκφραστεί με όρους στοιχειωδών λειτουργιών. Το ίδιο ισχύει για αυτά τα ολοκληρώματα. Οπότε τι κάνουμε; Είναι πέρα ​​από το πεδίο αυτής της θέσης για να δικαιολογήσει (δείτε αυτό το post ανταλλαγής μαθηματικών για μια ένδειξη για το πώς θα), αλλά σε αυτή την περίπτωση μπορούμε να υποκαταστήσουμε στις επεκτάσεις Taylor για το ημίτονο και το συνημίτονο, τότε ανταλλάξτε το άθροισμα και το αναπόσπαστο αποκτώ:

8.4 - Επέκταση ολοκληρωμένων σειρών Fresnel

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

8.5 - Εξαιρετικά τμήματα χαμηλής τάξης (n <3) των 8.3

Αποθέωση κλωθοειδής

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

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

9.1 - Κλωβοειδής σπείρα έως s = 5

Χρησιμοποιώντας το μόλις n <10 μέρος της επέκτασης όπως αναφέρεται στο 8.5, έχουμε τελικά όλα τα κομμάτια απαραίτητα για να φτιάξουμε το πρώτο μας τεχνούργημα. Η επέκταση αντιπροσωπεύει το επικλινές (πρώτο) τμήμα της εξίσωσης 8.2 - είναι εύκολο να το προσαρμόσουμε στο τμήμα που πέφτει (τρίτο) και θα γεφυρώσουμε αυτά τα κεκλιμένα τμήματα με ένα κυκλικό τόξο για το επίπεδο (δεύτερο) τμήμα. Αυτή η μέθοδος παράγει μια μαθηματικά τέλεια γωνία σκάλισμα που ακολουθεί ακριβώς το σχέδιο καμπυλότητας που εισήγαμε για πρώτη φορά στις εξισώσεις 8.2. Εδώ είναι η ανάλυση καμπυλότητας που εκτελείται για μια γωνιά clothoid squircle με ξ = 0,4:

9.2 - Γωνία σκαρφάλου στο ξ = 0,4 με χρήση κλοτοειδών και κυκλικών τόξων από την ένατη σειρά

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

Το πιο σημαντικό, η δύναμη του μήκους τόξου στους όρους που έχουμε διατηρήσει για να παράγουμε τα οικόπεδα μπορεί να είναι τόσο υψηλό όσο εννέα. Στο Figma, οι συνεχείς διαδρομές πρέπει να αντιπροσωπεύονται από τις κυβικές καμπύλες Bézier (εκ των οποίων οι τετραγωνικές καμπύλες Bézier και οι γραμμές είναι ειδικές περιπτώσεις) και αυτό μας περιορίζει να διατηρούμε μόνο κυβικούς και χαμηλότερους όρους. Αυτό σημαίνει ότι οι παραπάνω σειρές για το x (s) και το y (s) πρέπει να αποκόπτονται σε ένα μόνο όρο. Είναι δύσκολο να έχουμε μεγάλη αυτοπεποίθηση ότι μια τέτοια δραστική περικοπή θα διατηρήσει τις ιδιότητες που μας αρέσουν.

Δυστυχώς, η απόρριψη των όρων υψηλότερης τάξης δεν επαρκεί - η προκύπτουσα κατασκευή εκτελεί πολύ κακώς όταν το ξ είναι μεγάλο. Αυτό το βλέπουμε παρακάτω στο σχήμα που εικονίζεται για ξ = 0,9:

9.3- Γωνία σκίαρχου στο ξ = 0.9 χρησιμοποιώντας κλωθοειδή τρίτης τάξης και κυκλικά τόξα

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

Τίποτα χρυσό δεν μπορεί να μείνει

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

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

Δεύτερον, γνωρίζουμε ότι οι σχεδιαστές δεν θέλουν να είναι υπερβολικά περίπλοκη η κατασκευή της γωνίας του σκάφους. Το squircle της Apple (μετά την αφαίρεση του περίεργου μικροσκοπικού ευθύγραμμου τμήματος) έχει μόνο μία καμπύλη Bézier που συνδέει την κυκλική της με την εισερχόμενη άκρη, έτσι ίσως μπορούμε να κατασκευάσουμε τον ίδιο τύπο αντικειμένου;

Τρίτον, έχουμε έναν κάπως αστείο τεχνικό περιορισμό ο οποίος δεν είναι προφανής από την αρχή, αλλά αυτό γίνεται ένα σημαντικό ζήτημα εφαρμογής. Για να προσεγγίσουμε αυτό, ας εξετάσουμε ένα τετράγωνο, 100px by 100px, το οποίο έχει στρογγυλοποίηση γωνίας βανίλιας για ακτινική ακτίνα 20px. Αυτό σημαίνει ότι κάθε πλευρά της περιμέτρου της πλατείας έχει 60px ευθεία τροχιά. Εάν ισοπεδώσουμε το τετράγωνο σε ένα squashed ορθογώνιο έτσι ώστε να είναι 80px με 100px, τότε η ευθεία τομή της μικρής πλευράς θα έχει μήκος μόνο 40px. Τι συμβαίνει όταν τεμαχίζουμε το τετράγωνο τόσο πολύ που εξαντλείται η ευθεία του τμήματος; Ή αν το ισιώσουμε περισσότερο, έτσι ώστε το ορθογώνιο να είναι, ας πούμε, 20px με 100px; Η τρέχουσα συμπεριφορά του Figma είναι να υπολογίσουμε τη μεγαλύτερη αξία της στρογγυλοποίησης των γωνιών που διαθέτουμε και στη συνέχεια να σχεδιάσουμε το σχήμα χρησιμοποιώντας αυτό. Έτσι, το ορθογώνιο 20 x 100 εκατοστών θα έχει στρογγυλοποίηση 10 εικ.

Εάν η εξομάλυνση των γωνιών με ακτίνα R και η παράμετρος ξ καταναλώνει p pixels, τότε η συνάρτηση p (R, ξ) πρέπει να είναι αναστρέψιμη σε ξ (R, p).

Οποιαδήποτε διαδικασία εξομάλυνσης που μπορούμε να χρησιμοποιήσουμε για να δημιουργήσουμε ένα κύμα θα τρώμε ακόμα περισσότερο από την ευθεία άκρη από ότι η απλή στρογγυλοποίηση. Φανταστείτε την παραπάνω περίπτωση πάλι, ένα ορθογώνιο 100x105px, εφαρμόστε στρογγυλοποίηση 20px και στη συνέχεια εφαρμόστε κάποια διαδικασία εξομάλυνσης που αφαιρεί 12 επιπλέον pixel από τις ευθείες πλευρές. Αυτό μας αφήνει έναν προϋπολογισμό 36px στο ίσιο τμήμα για την ισοπεδωτική διαδικασία. Τι συμβαίνει κατά την ισοπέδωση του ορθογωνίου σε 60px by 100px; Φαίνεται σχεδόν προφανές, κατ 'αναλογία, ότι θα πρέπει να αποκαταστήσουμε την εξομάλυνση μέχρις ότου ο προϋπολογισμός ισορροπήσει και το ίσιο τμήμα καταναλώνεται ακριβώς. Αλλά πώς υπολογίζουμε την τιμή ξ που ικανοποιεί έναν συγκεκριμένο προϋπολογισμό κατανάλωσης εικονοστοιχείων; Πρέπει να είμαστε σε θέση να το κάνουμε αυτό γρήγορα ή δεν μπορούμε να εφαρμόσουμε το χαρακτηριστικό.

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

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

Κρατήστε το απλό, squircle

Ας δοκιμάσουμε το πιο άμεσο πράγμα που μπορούμε να σκεφτούμε ότι ικανοποιεί τους περιορισμούς που αναφέρθηκαν παραπάνω και απλά προσπαθήστε να διαλέξετε μία παραμετροποιημένη καμπύλη Bézier που παίρνει το κυκλικό τμήμα και συνδέει την προς την ευθεία πλευρά. Το παρακάτω σχήμα δείχνει έναν τύπο καμπύλης Bézier κατάλληλη για το σκοπό αυτό:

11.1 - Σημεία ελέγχου Cubic Bézier για το τμήμα ράμπας του σκάφους

Ορισμένες από τις ιδιότητές του αξίζουν περαιτέρω εξηγήσεις. Πρώτον, τα σημεία ελέγχου 1, 2 και 3 όλα καταλήγουν σε μια γραμμή. Αυτό εξασφαλίζει ότι η καμπυλότητα στο σημείο 1, που συνδέεται με το ευθύ τμήμα του αναβολέα, είναι ακριβώς μηδέν. Σε γενικές γραμμές, εάν ορίσουμε ένα σύστημα συντεταγμένων και συνδέσουμε το σημείο 1 με το P1, το σημείο 2 με το P2 και ούτω καθεξής, η καμπυλότητα στο σημείο 1 δίνεται από:

11.2 - Απροσδιόριστη καμπυλότητα στο σημείο 1 του σχήματος 11.1

Μπορούμε να δούμε, με σιγουριά, ότι το σταυροειδές προϊόν εξαφανίζεται όταν τα σημεία 1-3 είναι κολπικά. Ο ίδιος τύπος μπορεί να εφαρμοστεί στο σημείο 4 με ετικέτα αντίστροφα. κάνοντας αυτό και συνδέοντας τη γεωμετρία και τις ετικέτες στο σχήμα δίνει τα ακόλουθα για την καμπυλότητα εκεί:

11.3- Απλοποιημένη καμπυλότητα στο σημείο 4 από το σχήμα 11.1

Στην ιδανική περίπτωση, αυτό θα ήταν το ίδιο με την καμπυλότητα του κυκλικού τμήματος, ή 1 / R, που μας παρέχει ένα ακόμη περιορισμό. Τέλος, οι τιμές των c και d καθορίζονται από το γεγονός ότι το τέλος αυτής της καμπύλης πρέπει να πληρεί το κυκλικό τμήμα και να είναι εφαπτόμενο σε αυτό όπου συνδέεται, πράγμα που σημαίνει ότι ο περιορισμός της καμπυλότητας παραπάνω μας δίνει ακριβώς την τιμή b:

11.4 - Λύση για το β από το σχήμα 11.1 που παρέχει συνέχεια συνέχειας καμπυλότητας

Εάν διαπιστώσουμε ότι είναι σημαντική η διατήρηση της αρχικής γραμμικής αύξησης της καμπυλότητας (η οποία είναι η ιδανική λύση κλωθοειδούς που παρουσιάζεται στο σημείο 1), μπορούμε να ορίσουμε ένα ίσο προς b, το οποίο καθορίζει όλα τα σημεία της καμπύλης Bézier και μας δίνει μια πιθανή λύση. Χρησιμοποιώντας αυτές τις παρατηρήσεις, κατασκευάζουμε μια απλή καμπύλη Bézier παρακάτω χρησιμοποιώντας μια εξομάλυνση ξ = 0,6:

Αυτό φαίνεται αρκετά καλό και απαιτούνται πολλά υποδείγματα από τον αρχικό υπολογισμό του clothoid. Δυστυχώς, η μεταβολή σε ολόκληρο το εύρος, από ξ = 0 έως 1, κάνει μια πολύ λεπτή διαφορά στο σχήμα γωνίας. Εδώ θα δείξουμε τη γωνία σε δύο επίπεδα ζουμ, με καμπύλες για ξ = 0,1, 0,3, 0,5, 0,7 και 0,9 που εμφανίζονται σε διαφορετικά χρώματα:

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

Μικρά εγκεφαλικά επεισόδια

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

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

12.1 - Το μήκος του τμήματος που καταναλώνεται με στρογγυλοποίηση

Τι γίνεται αν επιλέξουμε p (R, ξ) βάσει του q με τον απλούστερο δυνατό τρόπο, κάτι σαν:

12.2 - Το μήκος του τμήματος που καταναλώνεται με στρογγυλοποίηση και εξομάλυνση

Όλα αυτά σημαίνει ότι η μέγιστη ρύθμιση εξομάλυνσης θα καταναλώσει και πάλι το μήκος του τμήματος που καταναλώσαμε κατά τη στρογγυλοποίηση κανονικά. Κάνοντας αυτή την επιλογή θα καθοριστεί η ποσότητα a + b από το παραπάνω σχήμα. Υπενθυμίζουμε ότι σε κάθε περίπτωση c και d είναι σταθερά σταθερές, οπότε ο καθορισμός a + b σημαίνει ότι υπάρχει μια τελική απόφαση για να γίνει: πόσο μεγάλο είναι ένας συσχετισμός με b; Και πάλι, εάν κάνουμε την απλούστερη επιλογή, δηλαδή a = b, έχουμε καθορίσει άλλη τροποποιημένη παραμετροποίηση Bézier, των οποίων οι γωνίες και οι καμπυλώσεις δείχνουμε παρακάτω:

12.3 - Προφίλ γωνίας και καμπυλότητας για απλό σχήμα εξομάλυνσης

Αυτή η οπτική παραλλαγή φαίνεται πολλά υποσχόμενη! Οι καμπύλες φαίνονται ελκυστικές, γυαλισμένες με κάποιο τρόπο. Ωστόσο, το προφίλ καμπυλότητας φαίνεται αρκετά τραχύ. Αν μπορούσαμε να το κάνουμε λίγο λιγότερο αδιάφορο, θα μπορούσε να είναι ένας σοβαρός υποψήφιος για ένα προϊόν. Παρά το κακό προφίλ καμπυλότητας, ακόμη και αυτή η απλή οικογένεια σχημάτων έχει ένα μέλος που μοιάζει εξαιρετικά παρόμοιο με την έκδοση της Apple του squircle, σχεδόν αρκετά κοντά για να βάλει μπροστά στους χρήστες μας χωρίς κακή συνείδηση.

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

12.4 - Προφίλ γωνίας και καμπυλότητας για βελτιωμένο σχήμα απλής εξομάλυνσης

Τα προφίλ καμπυλότητας είναι πολύ βελτιωμένα, ο οπτικός βαθμός παραλλαγής είναι ακόμα αρκετός για να είναι χρήσιμο προϊόν, ξ = 0,6 σχεδόν για τα καρφιά το σχήμα iOS και ο ωραίος οπτικός χαρακτήρας των καμπυλών που διατηρεί αυτή η εκπληκτικά απλή προσέγγιση. Πρέπει λοιπόν να θέσουμε την ερώτηση - τι εμποδίζει αυτό να γίνει το προϊόν; Τίποτα.

Παρακολουθώντας το πλοίο

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

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