Δημιουργία στατικού θορύβου από ένα περίεργο σφάλμα διαβάθμισης CSS

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

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

Δείτε την εικόνα της (περιέχει μέσα αυτόματης αναπαραγωγής)

Ναι, πρόκειται να κάνουμε κάτι τέτοιο χρησιμοποιώντας μόνο CSS. Εδώ είναι τι φτιάχνουμε:

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

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

Ας κάνουμε λίγο θόρυβο!

Για να δημιουργήσουμε αυτό το εφέ θορύβου θα χρησιμοποιήσουμε… κλίσεις! Όχι, δεν υπάρχει κανένα μυστικό συστατικό ή νέα ιδιότητα που να το κάνει να συμβεί. Θα χρησιμοποιήσουμε πράγματα που υπάρχουν ήδη στην εργαλειοθήκη μας CSS!

Το «κόλπο» βασίζεται στο γεγονός ότι οι διαβαθμίσεις είναι κακές στο anti-aliasing. Γνωρίζετε αυτές τις οδοντωτές άκρες που έχουμε όταν χρησιμοποιούμε σκληρά χρώματα; Ναι, μιλάω για αυτά στα περισσότερα τα άρθρα μου γιατί είναι λίγο ενοχλητικά και πρέπει πάντα να προσθέτουμε ή να αφαιρούμε μερικά pixel για να εξομαλύνουμε τα πράγματα:

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

Εδώ είναι μια άλλη ματιά, αυτή τη φορά χρησιμοποιώντας ένα conic-gradient όπου το αποτέλεσμα είναι πιο εμφανές:

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

Βλέπεις πόσο κακό είναι το τελευταίο; Είναι ένα είδος ανακατεμένο στη μέση και τίποτα δεν είναι ομαλό. Ας το κάνουμε σε πλήρη οθόνη με μικρότερες τιμές:

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

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

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

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

Η κλίση εφαρμόζεται σε ένα σταθερό 3000px τετράγωνο και τοποθετείται στο 60% 60% συντεταγμένες. Δεν μπορούμε να παρατηρήσουμε το κέντρο του σε αυτή την περίπτωση. Το ίδιο μπορεί να γίνει και με την ακτινική κλίση:

Και για να κάνουμε τα πράγματα ακόμα πιο τυχαία (και πιο κοντά σε πραγματικό εφέ θορύβου) μπορούμε να συνδυάσουμε και τις κλίσεις και τη χρήση background-blend-mode για να εξομαλύνουν τα πράγματα:

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

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

Κινούμενα σχέδια χωρίς τηλεοπτικό σήμα

Επιστρέφοντας στο demo με το οποίο ξεκινήσαμε:

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

Χρησιμοποίησα την ίδια τεχνική σε μια πρόκληση τέχνης CSS one-div:

Κοκκώδες φίλτρο εικόνας

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

Χρησιμοποιώ μόνο ένα ντεγκραντέ σε ένα ψευδοστοιχείο και το συνδυάζω με την εικόνα, χάρη σε mix-blend-mode: overlay.

Μπορούμε να έχουμε ακόμα πιο αστείο εφέ αν χρησιμοποιήσουμε το CSS filter περιουσία

Και αν προσθέσουμε α mask στο μείγμα, μπορούμε να κάνουμε ακόμα περισσότερα εφέ!

Επεξεργασία κοκκώδους κειμένου

Μπορούμε να εφαρμόσουμε το ίδιο εφέ και στο κείμενο. Και πάλι, το μόνο που χρειαζόμαστε είναι μερικές αλυσιδωτές διαβαθμίσεις σε ένα background-image και μετά συνδυάστε τα φόντα. Η μόνη διαφορά είναι ότι προσπαθούμε επίσης background-clip οπότε το εφέ εφαρμόζεται μόνο στα όρια κάθε χαρακτήρα.

Δημιουργική τέχνη

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

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

Πρόσωπο τέρας

Ένα τελευταίο παράδειγμα που έφτιαξα CodePen's συλλογή divtober 2022:

Ολοκληρώνοντας

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

Αυτό είπε, είμαι περίεργος να δω τι μπορείτε να κάνετε με αυτό! Μπορείτε να παίξετε με τις τιμές, να συνδυάσετε διαφορετικά επίπεδα, να χρησιμοποιήσετε το a filter, ή mix-blend-mode, ή οτιδήποτε άλλο, και σίγουρα θα πάρετε κάτι πολύ ωραίο. Μοιραστείτε τις δημιουργίες σας στην ενότητα σχολίων — δεν υπάρχουν βραβεία, αλλά μπορούμε να έχουμε μια ωραία συλλογή!