Statikus zaj létrehozása egy furcsa CSS gradiens hibából

👋 A cikkben szereplő bemutatók egy nem szabványos hibával kísérleteznek, amely a CSS-gradiensekkel és az alpixel-megjelenítéssel kapcsolatos. Viselkedésük a jövőben bármikor megváltozhat. Ezek is baromi nehezek. Aszinkronban szolgáljuk ki őket, ahol rákattint a betöltéshez, de továbbra is szeretnénk figyelmeztetni arra az esetre, ha a laptop ventilátora forogni kezd.

Emlékszel arra a statikus zajra a régi, jel nélküli tévéken? Vagy ha rossz a jel és torz a kép? Abban az esetben, ha a TV-jel fogalma megelőzte Önt, itt van egy GIF, amely pontosan megmutatja, mire gondolok.

Kép megtekintése (automatikusan lejátszott médiát tartalmaz)

Igen, valami ilyesmit fogunk csinálni csak CSS használatával. Íme, amit készítünk:

Mielőtt elkezdenénk ásni a kódot, szeretném elmondani, hogy vannak jobb módszerek a statikus zajhatás létrehozására, mint az a módszer, amelyet bemutatok. SVG-t használhatunk, , a filter tulajdon, stb. Valójában Jimmy Chion írt a jó cikk megmutatja, hogyan kell csinálni az SVG-vel.

Amit itt fogok csinálni, az egyfajta CSS-kísérlet, hogy feltárjak néhány trükköt a gradiensekkel kapcsolatos hibák kihasználására. Használhatja mellékprojektjeinél szórakozásból, de az SVG használata tisztább és alkalmasabb valódi projektekhez. Ráadásul az effektusok eltérően viselkednek az egyes böngészőkben, így ha ezeket nézi, a legjobb, ha Chrome-ban, Edge-ben vagy Firefoxban tekinti meg őket.

Csavarjunk egy kis zajt!

Ennek a zajhatásnak a megvalósításához... gradienseket fogunk használni! Nem, nincs titkos összetevő vagy új tulajdonság, ami ezt megvalósítja. Olyan dolgokat fogunk használni, amelyek már a CSS eszköztárunkban vannak!

A „trükk” azon a tényen alapul, hogy a színátmenetek rosszak az élsimításban. Tudja, milyen szaggatott élek vannak, amikor kemény színeket használunk? Igen, a legtöbben róluk beszélek a cikkeimet mert egy kicsit bosszantóak, és mindig hozzá kell adnunk vagy el kell távolítanunk néhány képpontot, hogy elsimítsuk a dolgokat:

Amint látja, a második kör jobb, mint az első, mert van egy apró különbség (0.5%).

Íme egy újabb pillantás, ezúttal a conic-gradient ahol nyilvánvalóbb az eredmény:

Egy érdekes ötlet támadt, miközben ezeket a bemutatókat készítettem. Ahelyett, hogy állandóan javítaná a torzítást, miért nem próbálja meg az ellenkezőjét tenni? Fogalmam sem volt, mi fog történni, de kellemes meglepetés volt! Felvettem a kúpos gradiens értékeket, és elkezdtem csökkenteni őket, hogy a rossz élsimítási eredmények még rosszabbnak tűnjenek.

Látod, milyen rossz az utolsó? Ez egyfajta rántott a közepén, és semmi sem sima. Tegyük teljes képernyőre kisebb értékekkel:

Gondolom, látod, hová megy ez. Furcsa torz képet kapunk, ha nagyon kis decimális értékeket használunk a színátmenetben lévő kemény színpontokhoz. Megszületett a zajunk!

Még mindig messze vagyunk a kívánt szemcsés zajtól, mert még mindig láthatjuk a tényleges kúpos gradienst. De lecsökkenthetjük az értékeket nagyon-nagyon kicsire – például 0.0001% - és hirtelen nincs többé gradiens, hanem tiszta szemcsésség:

Tada! Zajhatásunk van, és csak egyetlen CSS-gradiens kell. Fogadok, ha megmutatnám ezt neked, mielőtt elmagyaráznám, soha nem vennéd észre, hogy egy színátmenetet nézel. Nagyon alaposan meg kell néznie a gradiens közepét, hogy lássa.

Növelhetjük a véletlenszerűséget, ha a gradiens méretét nagyon nagyra tesszük, miközben a helyzetét módosítjuk:

A gradienst egy rögzítettre alkalmazzuk 3000px téren és a 60% 60% koordináták. A középpontját ebben az esetben alig vesszük észre. Ugyanez megtehető radiális gradienssel is:

És hogy a dolgokat még véletlenszerűbbé tegyük (és közelebb a valódi zajhatáshoz), kombinálhatjuk a színátmeneteket és a használatot background-blend-mode elsimítani a dolgokat:

Zajhatásunk tökéletes! Még ha alaposan megnézzük is az egyes példákat, egyik színátmenetnek sincs nyoma benne, hanem gyönyörű, szemcsés statikus zaj. Ezt az élsimítási hibát egy sima funkcióvá változtattuk!

Most, hogy ez megvan, lássunk néhány érdekes példát, ahol használhatjuk.

Animált, nincs TV-jel

Visszatérve a demóhoz, amivel elkezdtük:

Ha ellenőrzi a kódot, látni fogja, hogy CSS-animációt használok az egyik színátmeneten. Ez tényleg ilyen egyszerű! Csak annyit teszünk, hogy villámgyorsan mozgatjuk a kúpos gradiens helyzetét (.1s) és ezt kapjuk!

Ugyanezt a technikát alkalmaztam egy egydiv CSS art kihívásnál:

Szemcsés képszűrő

Egy másik ötlet az, hogy a zajt egy képre alkalmazzuk, hogy régies megjelenést kapjunk. Vigye az egérmutatót az egyes képekre, hogy azok zaj nélkül jelenjenek meg.

Csak egy színátmenetet használok egy pszeudoelemen, és keverem a képpel, köszönhetően mix-blend-mode: overlay.

Még viccesebb hatást érhetünk el, ha a CSS-t használjuk filter ingatlan

És ha hozzáadjuk a mask a keverékhez még több effektust készíthetünk!

Szemcsés szövegkezelés

Ugyanezt a hatást alkalmazhatjuk szövegre is. Ismét csak néhány láncolt gradiensre van szükségünk az a background-image majd keverje össze a háttereket. Az egyetlen különbség az, hogy mi is elérjük background-clip így a hatás csak az egyes karakterek határaira érvényesül.

Generációs művészet

Ha továbbra is a gradiens értékekkel játszik, meglepőbb eredményeket kaphat, mint egy egyszerű zajhatás. Kaphatunk néhány véletlenszerű alakzatot, amelyek nagyon hasonlítanak generációs művészet!

Persze távol állunk az igazi generatív művészettől, ami sok munkát igényel. De még mindig örömteli látni, mit lehet elérni azzal, amit technikailag hibának tekintenek!

Szörny arc

Utolsó példa, amire hoztam CodePen Divtober 2022 kollekció:

Csomagolta

Remélem tetszett ez a kis CSS-kísérlet. Nem igazán tanultunk valami „újat”, de csináltunk egy kis furcsaságot a színátmenetekkel, és valami szórakoztatóvá alakítottuk. Még egyszer elmondom: ezt nem fontolgatnám valódi projektben mert ki tudja, hogy az élsimítással foglalkozni fognak-e valamikor, vagy mikor. Ehelyett ez egy nagyon véletlenszerű és kellemes meglepetés volt, amikor belebotlottam. Ezenkívül nem olyan egyszerű a vezérlése, és a böngészők között következetlenül viselkedik.

Ez azt mondta: Kíváncsi vagyok, mit tudsz vele kezdeni! Játszhatsz az értékekkel, kombinálhatsz különböző rétegeket, használhatsz a filtervagy mix-blend-mode, vagy bármi mást, és biztosan kapsz valami igazán menőt. Oszd meg alkotásaidat a megjegyzés rovatban – nincs nyeremény, de szép gyűjteményt készíthetünk!