अपने खुद के बनावट और विरूपण प्रभाव बनाने के लिए शक्तिशाली सामंत एसवीजी फिल्टर आदिम का उपयोग करना सीखें।

लेखों की प्रस्तावित श्रृंखला, " एसवीजी फ़िल्टरिंग इफेक्ट्स " , सारा सॉइदन द्वारा, एक फ्रीलांस यूआई / यूएक्स इंटरफ़ेस डेवलपर और लेबनान में स्थित कई तकनीकी लेखों के लेखक, एसवीजी फिल्टर के काम पर केंद्रित है और इसमें निम्नलिखित लेख शामिल हैं:

एसवीजी फ़िल्टरिंग प्रभाव

एसवीजी फ़िल्टरिंग प्रभाव। भाग 1. एसवीजी फिल्टर 101
एसवीजी फ़िल्टरिंग प्रभाव। भाग 2. feMorphology के साथ पाठ की रूपरेखा
एसवीजी फ़िल्टरिंग प्रभाव। भाग 3. feComponentTransfer का उपयोग करके छवि पोस्टराइजेशन प्रभाव
एसवीजी फ़िल्टरिंग प्रभाव। भाग 4. feComponentTransfer के साथ दो-रंग की छवियां ।
एसवीजी फ़िल्टरिंग प्रभाव। भाग 5. feDisplacementMap के साथ सतह बनावट के लिए पाठ का मिलान
एसवीजी फ़िल्टरिंग प्रभाव। भाग 6. सामंतवाद के साथ बनावट का निर्माण

feTurbulence सबसे शक्तिशाली SVG फ़िल्टर प्रिमिटिव्स में से एक है। विनिर्देशन इस प्रधान को इस प्रकार परिभाषित करता है:

यह फिल्टर आदिम पेरलिन टर्बुलेंस फ़ंक्शन का उपयोग करके एक छवि बनाता है। यह बादलों या संगमरमर जैसे कृत्रिम बनावट के संश्लेषण की अनुमति देता है। [...]
परिणामी छवि इस फिल्टर आदिम के लिए फिल्टर आदिम के पूरे उप-भाग को भर देगी।

दूसरे शब्दों में, feTurbulence फिल्टर आदिम उत्पन्न करता है और पर्लिन शोर को प्रदर्शित करता है। इस तरह का शोर कई प्राकृतिक घटनाओं का अनुकरण करने के लिए उपयोगी है, जैसे कि बादल, आग और धुआं, और संगमरमर या ग्रेनाइट जैसे जटिल बनावट पैदा करना। और feFlood की तरह, feTurbulence आदिम फ़िल्टरिंग क्षेत्र को नई सामग्री से भरता है।

इस लेख में, हम देखेंगे कि आप किस तरह से feTurbulence का उपयोग करके शोर पैदा कर सकते हैं और इस शोर का उपयोग छवियों और पाठ को विकृत करने के लिए कैसे किया जा सकता है, जैसा कि हमने पिछले लेख में feDisplacementMap बनावट के साथ किया था। फिर हम देखते हैं कि एसवीजी प्रकाश प्रभाव के साथ संयोजन में उत्पन्न शोर का उपयोग किसी न किसी कागज के लिए एक सरल बनावट बनाने के लिए कैसे किया जा सकता है।

लेकिन पहले, आइए सामंतवाद और उसकी विशेषताओं की समीक्षा करें और देखें कि उनमें से प्रत्येक उत्पन्न शोर को कैसे प्रभावित करता है।

सामंतवाद के साथ अशांति और भग्न शोर पैदा करना

जब मैंने इस श्रृंखला को लिखने का इरादा किया, तो मैंने फ़िल्टर प्राइमिटिव्स के बारे में कच्चे तकनीकी विवरणों से यथासंभव बचने का फैसला किया। यही कारण है कि हम पेरलिन शोर उत्पन्न करने के लिए उपयोग किए जाने वाले कार्यों के तकनीकी विवरण में नहीं जाएंगे।

उस समारोह के बारे में पढ़ने के बाद जो शोर की पीढ़ी को दर्शाता है, मैंने पाया कि जब मैं प्रयोग के लिए एक आदिम की स्थापना करता हूं तो यह मुझे बिल्कुल भी मदद नहीं करता है। अंत में, हम एक यादृच्छिक शोर जनरेटर के साथ काम करते हैं। इस प्रकार, ज्यादातर मामलों में, आप पाएंगे कि एक बनावट का निर्माण तब तक प्रयोग और ट्यूनिंग के लिए एक विषय होगा जब तक आप वांछित परिणाम प्राप्त नहीं करते। समय के साथ, यह अनुमान लगाना थोड़ा आसान हो जाएगा कि बनावट कैसी दिख सकती है।

मैंने पाया कि सामयिकता के साथ खेलना आदिम है और इसकी विशेषताओं को देखते हुए उनके बारे में पता लगाना सबसे अच्छा तरीका है और मुझे यह समझने में मदद मिली कि इनमें से प्रत्येक विशेषता क्या है। इसलिए, हम कुछ इंटरएक्टिव डेमो के साथ feTurbulence को समझने के लिए एक दृश्य दृष्टिकोण का उपयोग कर रहे हैं।

FeTurbulence अब Perlin के अशांति फ़ंक्शन का उपयोग करके शोर उत्पन्न करता है । इसकी 5 मुख्य विशेषताएं हैं जो फ़ंक्शन को नियंत्रित करती हैं और इसलिए, इसका दृश्य परिणाम:

प्रकार ;
आधारभूत क्षमता ;
numOctaves ;
बीज ;
टांके लगाना ।

हम जांच करेंगे कि इनमें से प्रत्येक विशेषता फ़ंक्शन के तकनीकी विवरण में जाने के बिना दृश्य परिणाम को कैसे प्रभावित करती है। आप पाएंगे कि ज्यादातर मामलों में आपको केवल इन तीन विशेषताओं के बारे में चिंता करने की ज़रूरत है: प्रकार , बेस फ़्रीक्वेंसी और अंक ।

baseFrequency

शोर उत्पन्न करने के लिए, केवल आधार विशेषता की आवश्यकता होती है । baseFrequency जनित शोर के आकार (या स्केल) और दाने को प्रभावित करती है।

आधार आवृत्ति का प्रभाव सबसे अच्छा समझा जाता है जब यह कल्पना और एनिमेटेड होता है। यही कारण है कि मैंने अगला डेमो बनाया। स्लाइडर का उपयोग करके, आप उपयोग किए गए आधार आवृत्ति के मूल्य को बदल सकते हैं और देख सकते हैं कि यह वास्तविक समय में उत्पन्न शोर को कैसे प्रभावित करता है। आप देखेंगे कि जब आप बेसफ्रिकेंसी विशेषता के मूल्य को बढ़ाते हैं या घटाते हैं , तो उत्पन्न पैटर्न ठोस रहता है, क्रमशः छोटा या बड़ा हो जाता है, और ऐसा लगता है कि यह छोटा है और ऊपरी बाएं कोने में स्रोत से बाहर निकलता है ।

आधार मान को कम करना, जैसे कि 0.001, बड़े पैटर्न उत्पन्न करते हैं, जबकि मान बढ़ाते हुए, 0.5+, छोटे पैटर्न बनाते हैं। मान 0 (कोई आवृत्ति == कोई प्रतिमान नहीं) और उच्चतर पर प्रारंभ होते हैं। नकारात्मक मूल्यों की अनुमति नहीं है। जैसा कि माइकल मुलानी ने लिखा है , "0.02 से 0.2 तक के मूल्य अधिकांश बनावट के लिए उपयोगी शुरुआती बिंदु हैं।"

कृपया ध्यान दें कि उत्पन्न शोर का पृष्ठभूमि रंग नहीं होता है। इसका मतलब है कि यदि आप एसवीजी पर सफेद पृष्ठभूमि का रंग हटाते हैं, तो आप शोर के माध्यम से अंधेरे शरीर की पृष्ठभूमि देख सकते हैं।

BaseFrequency विशेषता दो मान भी लेती है। यदि आप दो मानों को निर्दिष्ट करते हैं, तो पहले का उपयोग एक्स अक्ष के साथ आधार आवृत्ति के लिए किया जाएगा, और दूसरा वाई अक्ष के अनुरूप होगा। दो अलग-अलग मूल्य प्रदान करके, आप ऊर्ध्वाधर या क्षैतिज शोर उत्पन्न कर सकते हैं, जिसका उपयोग कुछ शानदार प्रभावों को लागू करने के लिए किया जा सकता है, जैसा कि हम देखेंगे। अगले भाग में

इस डेमो में आधार फ़्रीक्वेंसी मूल्यों के साथ फिर से खेलें और ध्यान दें कि यदि आप इसे अलग-अलग मान देते हैं तो यह एक्स और वाई कुल्हाड़ियों के साथ कैसे बदलता है। डेमो एक अच्छा क्षैतिज शोर के साथ शुरू होता है। 0.01 का x-baseFrequency मान अपेक्षाकृत छोटा है, जो क्षैतिज पैटर्न को बड़ा बनाता है (जैसा कि यह फैला हुआ है)। यदि आप इसे और भी कम कर देते हैं, उदाहरण के लिए, 0.001 तक, आप देखेंगे कि क्षैतिज पैटर्न लाइनों की तरह अधिक हो जाएगा। इसे आजमाएं।

टाइप

जैसा कि इसके नाम से पता चलता है, प्रकार विशेषता का उपयोग feTurbulence आदिम द्वारा उत्पन्न शोर के प्रकार को इंगित करने के लिए किया जाता है। दो प्रकार हैं:

अशांति , जो डिफ़ॉल्ट है;
भग्न करना ।

फ्रैक्नलनोज़ अधिक धुंधली और चिकनी पैटर्न बनाता है, यह बादलों की तरह गैसीय बनावट बनाने के लिए एक अच्छा आधार है। अशांति अधिक तरंगों का उत्पादन करती है जो तरंगों का अनुकरण करती हैं, और इस प्रकार द्रव बनावट के लिए एक आधार के रूप में उपयुक्त हैं।

बाईं तरफ अशांति का शोर और दाईं ओर भग्न शोर
Ris_1। बाईं तरफ अशांति और दाईं ओर भग्न शोर जैसा शोर।

निम्न डेमो में प्रकार विशेषता के मूल्य को देखें कि कैसे बनाया गया पैटर्न बदलता है:

numOctaves

संख्याओं को "ऑक्टेव संख्या" के रूप में संक्षिप्त किया गया है जो शोर के विस्तार के स्तर का प्रतिनिधित्व करता है।

संगीत में, एक सप्तक दो स्वरों के बीच के स्वरों में अंतर होता है जब एक की आवृत्ति दो बार होती है। इस प्रकार, उच्च सप्तक, उच्च आवृत्ति। सामंतवाद में , सप्तक की संख्या जितनी अधिक होती है, उतना अधिक विवरण आप उस शोर में देख सकते हैं जो इसे बनाता है। डिफ़ॉल्ट रूप से, उत्पन्न शोर एक सप्तक है, जिसका अर्थ है कि संख्यावाचक गुण के लिए डिफ़ॉल्ट मान 1 है।

उत्पन्न बनावट पर अष्टक की संख्या बढ़ाने के प्रभाव को देखने के लिए स्लाइडर को निम्न डेमो में खींचें:

आप देखेंगे कि संख्यावाचक = "5" से शुरू होकर अष्टक जोड़ने का प्रभाव लगभग अदृश्य हो जाता है।

बीज

विनिर्देश में परिभाषित अनाज, "छद्म यादृच्छिक संख्या जनरेटर के लिए प्रारंभिक संख्या" है। दूसरे शब्दों में, यह हमारे यादृच्छिक शोर को उत्पन्न करने के लिए उपयोग किए जाने वाले यादृच्छिक फ़ंक्शन के लिए एक अलग बीज प्रदान करता है।

नेत्रहीन, आप देखेंगे कि यह कहाँ और कैसे "तरंग रेखाएँ" उत्पन्न होती हैं। यह भी बेहतर समझा जाता है जब आप देखते हैं कि यह दो आसन्न आयतों में उत्पन्न शोर को कैसे प्रभावित करता है।

जब एक ही प्रारंभिक मूल्य का उपयोग दो निकटवर्ती आयतों के लिए किया जाता है, तो दो आयतों के माध्यम से शोर पैदा करने के लिए उपयोग किया जाने वाला कार्य निरंतर होता है, और यह इन दो तरंगों के किनारों के साथ "तरंग रेखाओं" की निरंतरता से दिखाई देगा।

Ris_2। एक समारोह की निरंतरता यादृच्छिक शोर उत्पन्न करने वाले दो आयतों के किनारों पर समान प्रारंभिक मूल्य का उपयोग करके देखी जा सकती है।

अगले डेमो में बीज विशेषता के मूल्य के साथ खेलते हैं, देखें कि यह उत्पन्न शोर को कैसे प्रभावित करता है, और ध्यान दें कि शोर एक ही प्रारंभिक मूल्य का उपयोग करके दो आयतों के किनारों के साथ निरंतर है।

stitchTiles

टॉयलेट्स का उपयोग शोर के "टाइल" के बीच एक सिलाई प्रभाव बनाने के लिए किया जा सकता है। इस विशेषता का प्रभाव बीज के प्रभाव के समान है, जिसका अर्थ है कि यह सबसे स्पष्ट है जब आपके पास शोर के दो आसन्न क्षेत्र (या "टाइल") होते हैं।

जैसा कि विनिर्देश का उल्लेख है, कभी-कभी शोर पीढ़ी का परिणाम टाइल की सीमाओं पर स्पष्ट विराम दिखाएगा। आप ब्राउज़र को परिणामों को समतल करने का प्रयास करने के लिए कह सकते हैं ताकि दो टाइलें एक साथ "सिले" दिखाई दें। मुझे वास्तव में यह पसंद है कि इसकी विशेषता और इसके प्रभाव की तुलना सिलाई से की जाती है।

डिफ़ॉल्ट रूप से, एक अशांति के कार्य वाले चादरों की सीमा पर चिकनी संक्रमण को प्राप्त करने के लिए कोई प्रयास नहीं किया जाता है, क्योंकि सिलाईटाइल्स के लिए डिफ़ॉल्ट मूल्य noStitch है। यदि आप एक सिलाई प्रभाव बनाना चाहते हैं, तो आप मूल्य को सिलाई में बदल सकते हैं।

बीज के परिणाम के साथ सिलाईटाइल्स के परिणाम की तुलना करने के लिए, मैंने अगले डेमो में दो आयतों में उत्पन्न शोर के लिए समान बीज मूल्य लागू किया। आप पहले से ही देख सकते हैं कि उनके बीच शोर निरंतर लगता है। सिलाई के विकल्प को " चालू " पर स्विच करें, सिलाई के मूल्य को बदलते हुए यह देखें कि शोर किनारों के आस-पास के स्थान को कैसे बदलता है।

जैसा कि मैंने पहले उल्लेख किया है, केवल तीन विशेषताएँ हैं, आप सबसे अधिक संभावना प्रकार , बेस फ़्रीक्वेंसी और संख्याओं का उपयोग करेंगे । इसलिए हम आगे बढ़ते हुए इन तीनों पर ध्यान केंद्रित करेंगे।

सामग्री को विकृत करने के लिए feTurbulence शोर का उपयोग करना

यहां मस्ती शुरू होती है। और हम उत्पन्न शोर का उपयोग कैसे शुरू करते हैं। वास्तव में, केवल फ़िल्टरिंग क्षेत्र को शोर से भरना अपने आप में बेकार है।

पिछले लेख में, हमने बाहरी चित्र की बनावट के अनुरूप पाठ का एक टुकड़ा लाने के लिए feDisplacementMap का उपयोग किया था। और हमने उल्लेख किया कि feDisplacementMap एक छवि की रंग जानकारी का उपयोग दूसरे को विकृत करने के लिए करता है। विस्थापन मानचित्र के रूप में उपयोग की जाने वाली छवि कोई भी हो सकती है। इसका मतलब है कि यह बाहरी छवि या एसवीजी में उत्पन्न छवि हो सकती है, उदाहरण के लिए, एक ढाल छवि या एक पैटर्न, ... अच्छी तरह से, या एक शोर बनावट।

दूसरे शब्दों में, जो शोर हम सामंतवाद के साथ उत्पन्न करते हैं, उसका उपयोग सामग्री को विकृत करने के लिए भी किया जा सकता है यदि feDisplacepMap के साथ एक साथ लागू किया जाता है। निम्नलिखित उदाहरण में, हम feDisplacementMap के साथ छवि को ऑफसेट करने के लिए feTurbulence से बाहर निकलने का उपयोग करते हैं। मैं बेस फ़्रीक्वेंसी विशेषता के लिए दो अलग-अलग मान प्रदान करके क्षैतिज शोर मॉडल का उपयोग करता हूं, जैसा हमने पहले किया था।

<svg viewBox="0 0 180 100"> <filter id="noise" x="0%" y="0%" width="100%" height="100%"> <feTurbulence baseFrequency="0.01 0.4" result="NOISE" numOctaves="2" /> <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="20" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap> </filter> <image xlink:href="..." x="0" y="0" width="100%" height="100%" filter="url(#noise)"></image> </svg>

जिस तीव्रता के साथ अशांति छवि को विकृत करती है, वह बिक्री विशेषता feDisplacementMap पर इंगित की जाती है । प्रभाव को और अधिक नाटकीय बनाने के लिए मैंने बहुत महत्व का इस्तेमाल किया।

अब, इस सरल अनुप्रयोग के आधार पर, हम इन तथ्यों के संयोजन के लिए और अधिक संभावनाएं खोल सकते हैं:

एसवीजी फ़िल्टर HTML सामग्री पर भी लागू किया जा सकता है;
बेसफ्रीक्वेंसी मान संख्याएं हैं और इस प्रकार एनिमेटेड हो सकते हैं।

दो साल से भी कम समय पहले, एड्रियन डेनाट ने सही लेख लिखा था जिसमें उन्होंने एचटीएमएल बटन पर लागू एक समान प्रभाव के साथ प्रयोग किया था। हम निम्नलिखित बटन क्लिक प्रभाव को तोड़ने और फिर से बनाने जा रहे हैं:

हम एक शोर बनावट बनाकर शुरू करेंगे। यह वह स्थिति है जिसमें बटन विकृत है, और फिर, जैसे ही हम इसे प्राप्त करते हैं, हम बटन की प्रारंभिक स्थिति को इस विकृत स्थिति में और वापस क्लिक करके चेतन करेंगे।

यहाँ हमारा लक्ष्य क्षैतिज रूप से बटन को विकृत करना है। यानी हम पिछले डेमो से क्षैतिज शोर का उपयोग और समायोजन करेंगे। छवि पर इसका विरूपण प्रभाव और भी मजबूत है, इसलिए एक शुरुआत के लिए मैं अशांति मूल्य (0.01 0.4) से (0 0.2) को बदलकर कोड डायल करूंगा:

 <filter id='noise' x='0%' y='0%' width='100%' height='100%'> <feTurbulence type="turbulence" baseFrequency="0 0.2" result="NOISE" numOctaves="2" /> <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="30" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap> </filter>

प्रभाव थोड़ा बेहतर हो गया है, लेकिन बटन अभी भी विकृत है जितना हम चाहते हैं:

हम चाहते हैं कि विकृति कम नाटकीय हो। ध्यान रखें कि हम डिफ़ॉल्ट अशांति से शोर के प्रकार को एक सहज रूप से फ्रैक्शनल करने के लिए शोर प्रभाव को कम कर सकते हैं। जैसे ही हम ऐसा करते हैं, हम देखेंगे कि विरूपण प्रभाव भी सुचारू हो जाएगा:

यह काफी बेहतर दिखता है।

अब जबकि हमारे पास विरूपण प्रभाव है जिससे हम खुश हैं, हम अपने डेमो को एक फिल्टर के साथ शुरू करेंगे जो शुरू में लगभग कुछ भी नहीं करता है:

 <filter id='noise' x='0%' y='0%' width='100%' height='100%'> <feTurbulence type="fractalNoise" baseFrequency="0 0.000001" result="NOISE" numOctaves="2" /> <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="30" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap> </filter>

हम इस फ़िल्टर को CSS में अपने बटन पर लागू करने जा रहे हैं:

 button { -webkit-filter: url(#noise); filter: url(#noise); }

इस बिंदु पर, बटन अभी भी विकृत दिखाई नहीं देता है।

अगला, हम एड्रिन कोड का उपयोग करने जा रहे हैं, हालांकि थोड़ा संशोधित संस्करण जो जीएसएपी का उपयोग करता है, बेसफ्रीक्वेंसी विशेषता के मान को (0 0.2) और इसके द्वारा feTurbulence आदिम के अंदर इसके विपरीत का उपयोग करता है :

 var bt = document.querySelectorAll('.button')[0], turbVal = { val: 0.000001 }, turb = document.querySelectorAll('#noise feTurbulence')[0], btTl = new TimelineLite({ paused: true, onUpdate: function() { turb.setAttribute('baseFrequency', '0 ' + turbVal.val); } }); btTl.to(turbVal, 0.2, { val: 0.2 }) .to(turbVal, 0.2, { val: 0.000001 }); bt.addEventListener('click', function() { btTl.restart(); });

और यह वास्तव में वह सब है जिसकी आवश्यकता है। आप यहां डेमो के साथ खेल सकते हैं :

इस लेखन के समय, क्रोम और फ़ायरफ़ॉक्स में डेमो काम करता है। ये सफारी के वर्तमान संस्करण में बग हैं, लेकिन अगले संस्करण में समस्या का समाधान किया जाएगा, क्योंकि सफारी टेक पूर्वावलोकन डेमो को ठीक दिखाता है।

हालांकि यह एमएस एज में काम नहीं करता है, बटन बिल्कुल भी विकृत नहीं है, जिसका अर्थ है कि समर्थन की कमी इसका उपयोग करने की क्षमता को प्रभावित नहीं करती है। यह बहुत अच्छा है क्योंकि आप अभी भी इस प्रभाव को एक वृद्धि के रूप में उपयोग कर सकते हैं । यदि प्रभाव का समर्थन नहीं किया जाता है, तो बटन बिना किसी प्रभाव के एक नियमित बटन की तरह दिखेगा और व्यवहार करेगा।

एड्रियन के लेख में कुछ और बटन विरूपण प्रभाव शामिल हैं जो उन्हीं सिद्धांतों का उपयोग करते हैं जिन्हें हमने अभी देखा था और जो निश्चित रूप से जांचने योग्य हैं। एक या दो अच्छे गुर हैं जो हर किसी को सीखने की जरूरत है।

लहराता पाठ का उपयोग कर सामंत

FeTurbulence के मेरे पसंदीदा उपयोगों में से एक लुकास बीबर का लहराती पाठ प्रभाव है। अपने डेमो में, लुकास कई सामंत कार्यों का उपयोग करता है:

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="squiggly-0"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0" /> <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6" /> </filter> <filter id="squiggly-1"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" /> </filter> <filter id="squiggly-2"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" /> </filter> <filter id="squiggly-3"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" /> </filter> <filter id="squiggly-4"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" /> </filter> </defs> </svg>

... और सीएसएस के माध्यम से उन्हें लागू करने के लिए HTML पाठ का एक टुकड़ा सीएसएस एनीमेशन का उपयोग करते हुए, एक से दूसरे में एनिमेशन:

 @keyframes squiggly-anim { 0% { -webkit-filter: url("#squiggly-0"); filter: url("#squiggly-0"); } 25% { -webkit-filter: url("#squiggly-1"); filter: url("#squiggly-1"); } 50% { -webkit-filter: url("#squiggly-2"); filter: url("#squiggly-2"); } 75% { -webkit-filter: url("#squiggly-3"); filter: url("#squiggly-3"); } 100% { -webkit-filter: url("#squiggly-4"); filter: url("#squiggly-4"); } }

... इस प्रकार एक लहरदार प्रभाव पैदा कर रहा है।

फिर से, प्रयुक्त पाठ वास्तविक है, अर्थात यह खोज, चयन, पहुंच और संपादन (सामग्री के गुण का उपयोग करके) के लिए उपलब्ध है। लाइव डेमो देखें , लेकिन सावधान रहें यह डेमो संसाधन गहन है और आपको अपने मोबाइल फोन पर कोडपेन नहीं खोलना पड़ सकता है।

तो, इस खंड से कुछ उपयोगी निष्कर्ष:

FeTurbulence द्वारा उत्पन्न शोर का उपयोग SVG और HTML सामग्री दोनों को विकृत करने के लिए किया जा सकता है।
बेसफ्रीक्वेंसी का मान एनिमेटेड हो सकता है।
आप बेसफ्रीक्वेंसी में मूल्यों को समायोजित करके और फ्रैक्चरलीन प्रकार के साथ शोर को सुचारू करके विरूपण की मात्रा को डायल कर सकते हैं।
यद्यपि आप सामान्य रूप से एसवीजी फ़िल्टर को चेतन कर सकते हैं, यह आमतौर पर इसे ज़्यादा नहीं करने की सिफारिश की जाती है, क्योंकि वे काफी संसाधन गहन हो सकते हैं। एनीमेशन को छोटे क्षेत्रों तक सीमित रखने की कोशिश करें; जितना बड़ा एनिमेटेड क्षेत्र होगा, उतने ही अधिक संसाधनों की खपत होगी।

FeTurbulence आदिम बहुत ही कम है, अगर कभी भी, अकेले इस्तेमाल किया जाता है। यह लगभग हमेशा अन्य फिल्टर आदिमियों द्वारा व्यक्तिगत प्रभावों को प्राप्त करने के लिए उपयोग किया जाता है।

इस खंड में, हमने इसे feDisplacementMap में विस्थापन मानचित्र के रूप में उपयोग किया। आइए देखें कि आप इसके साथ और क्या कर सकते हैं।

सामंतवाद के साथ प्राकृतिक बनावट का अनुकरण

सामंतवाद द्वारा उत्पन्न शोर का उपयोग करने का एक और उपयोगी तरीका एक प्राकृतिक बनावट का अनुकरण करना है। यदि आपने कभी आफ्टर इफेक्ट्स में Noise Generation Plugins का उपयोग किया है, तो आप पहले से ही इस कार्यक्षमता और इस के उदाहरणों में आ सकते हैं।

Ris_7। नमूना पाठ Fractal शोर प्लगइन का उपयोग कर After Effects में बनाया गया है। ( स्रोत )

feTurbulence प्रत्येक घटक R, G, B और A. के लिए शोर (यादृच्छिक मान) उत्पन्न करता है। आप इन घटकों में से प्रत्येक के मूल्यों को अलग-अलग शोर भिन्नताएं प्राप्त करने के लिए बदल सकते हैं। एक बनावट का अनुकरण करने के लिए, हमें आमतौर पर बस यही करना होगा: आर / जी / बी / ए घटकों (घटकों को रद्द करना, दूसरों को संतृप्त करना, आदि) को समायोजित करना।) वांछित परिणाम प्राप्त करने के लिए। अन्य मामलों में, हमें बस इतना करना चाहिए कि इस पर कुछ प्रकाश डाला जाए। सचमुच।

इस खंड में, हम माइकल मुल्नी द्वारा बनाए गए रफ पेपर टेक्सचर प्रभाव पर एक नज़र डालेंगे। इस बनावट को बनाने के लिए, हमें एसवीजी प्रकाश स्रोतों का उपयोग करके सामंतवाद द्वारा उत्पन्न शोर की बनावट को रोशन करने की आवश्यकता है।

एसवीजी में प्रकाश स्रोत

एसवीजी आसानी से कई प्राइमेटिव्स प्रदान करता है जिनका उपयोग आप वस्तुओं या चित्रों को रोशन करने के लिए कर सकते हैं।

दो फिल्टर प्रिमिटिव हैं जो कि आपके इच्छित प्रकाश के प्रकार को इंगित करने के लिए उपयोग किए जाते हैं:

feDiffuseLighting , जो एक बाहरी स्रोत से अप्रत्यक्ष प्रकाश को इंगित करता है, और सूर्य के प्रकाश के प्रभाव के लिए सबसे अच्छा उपयोग किया जाता है;
feSpecularLighting , चिंतनशील सतहों से लौटने वाले माध्यमिक प्रकाश को परिभाषित करता है।

दोनों प्राइमेट इस क्षेत्र के मानचित्र के रूप में इस छवि के अल्फा चैनल का उपयोग करके किसी वस्तु या छवि को रोशन करते हैं। पारदर्शी मूल्य सपाट रहते हैं, जबकि अपारदर्शी मूल्य चोटियों के रूप में बढ़ते हैं जो अधिक स्पष्ट रूप से प्रकाशित होते हैं।

दूसरे शब्दों में, प्रकाश स्रोत फ़िल्टर गहराई की जानकारी प्राप्त करने के लिए इनपुट अल्फा चैनल का उपयोग करता है: पर्यवेक्षक के लिए अधिक से अधिक अपारदर्शिता वाले क्षेत्र, और कम अपारदर्शिता वाले क्षेत्र इससे दूर चले जाते हैं। इसका मतलब है कि इनपुट में एक पिक्सेल के अल्फा मूल्य का उपयोग z- आयाम में उस पिक्सेल की ऊंचाई के रूप में किया जाता है, और फ़िल्टर इस ऊंचाई का उपयोग एक आभासी सतह की गणना करने के लिए करता है जो प्रकाश स्रोत से प्रकाश की एक निश्चित मात्रा को प्रतिबिंबित करेगा। यह एक बहुत शक्तिशाली बात है!

दोनों प्रकार के प्रकाश सरफेसस्केल नामक एक विशेषता को स्वीकार करते हैं, जो व्यावहारिक रूप से एक जेड-इंडेक्स कारक है। जैसे ही यह मूल्य बढ़ता है, सतह की बनावट का "ढलान" स्थिर हो जाता है।

"चूंकि feTurbulence 0 से 1 तक शोर मूल्यों से भरा एक अल्फा चैनल उत्पन्न करता है, यह एक अच्छा जेड-सतह चर बनाता है जो उस पर चमकने पर चकाचौंध पैदा करता है।" —मिचैल मुल्नी

प्रकाश के प्रकार पर निर्णय लेने के बाद, आपको एक प्रकाश स्रोत चुनने की आवश्यकता है। एसवीजी में तीन प्रकार के प्रकाश स्रोत हैं :

feDistantLight : एक दूरस्थ प्रकाश स्रोत है जो वांछित के रूप में दूर है, और इसलिए लक्ष्य से इसके झुकाव के कोण के रूप में निर्धारित किया जाता है। यह सूर्य के प्रकाश का प्रतिनिधित्व करने के लिए सबसे उपयुक्त तरीका है।
fePointLight : एक विशिष्ट बिंदु से निकलने वाले बिंदु प्रकाश का प्रतिनिधित्व करता है, जिसे तीन-आयामी X / Y / Z समन्वय के रूप में दर्शाया गया है। यह एक कमरे के अंदर या एक दृश्य के अंदर एक प्रकाश स्रोत की तरह दिखता है।
feSpotLight : एक स्पॉटलाइट है जो एक बिंदु प्रकाश की तरह व्यवहार करता है, लेकिन इसकी बीम को एक शंकु तक संकुचित किया जा सकता है, और प्रकाश अन्य लक्ष्यों की ओर मुड़ सकता है।

इन तीनों प्रकाश स्रोतों में से प्रत्येक की अपनी विशेषताएं हैं, जो कि 3 डी अंतरिक्ष में स्रोत के स्थान को इंगित करके उत्पन्न होने वाले प्रकाश को समायोजित करने के लिए उपयोग की जाती हैं। विशेषताएँ इस लेख के दायरे से परे हैं, लेकिन आप इस विनिर्देश में उनके बारे में अधिक जान सकते हैं।

प्रकाश प्रभाव बनाने और लागू करने के लिए, आपको प्रकाश स्रोत को प्रकाश के प्रकार से जोड़ना होगा। इसलिए, आप अपने इच्छित प्रकार के प्रकाश का चयन करके शुरू करते हैं, और फिर उस स्रोत को चुनते हैं जहाँ से वह आएगा। और फिर, आखिरकार, आपको अपने प्रकाश के रंग को निर्दिष्ट करने की आवश्यकता है। प्रकाश-रंग गुण का उपयोग feDiffuseLighting और feSpecularLighting के लिए प्रकाश स्रोत के रंग को निर्धारित करने के लिए किया जाता है।

प्रकाश स्रोतों की मूल बातों पर विचार करने के बाद, अब हम अपने उदाहरण की ओर मुड़ते हैं।

मोटे कागज की बनावट के लिए, हम धूप का उपयोग करेंगे। इसका मतलब है कि हम सफेद विसरित प्रकाश का उपयोग करेंगे जो एक दूर के स्रोत से आता है। कोड में अनुवादित, हमारा प्रकाश इस तरह दिखता है:

 <feDiffuseLighting lighting-color="white" surfaceScale="2" in=".." result=".."> <feDistantLight azimuth="45" elevation="60" /> </feDiffuseLighting>

दिगंश और ऊंचाई के गुण त्रि-आयामी अंतरिक्ष में प्रकाश स्रोत की स्थिति निर्धारित करते हैं। राफेल पोंस का एक लेख है जो सरल और आसान तरीके से इन दो अवधारणाओं को समझाने में अद्भुत है, साथ ही सुंदर और सुविधाजनक चित्रण जो स्पष्टीकरण के साथ मदद करते हैं। मैं इसे देखने की अत्यधिक सलाह देता हूं।

अब जब हमारे पास प्रकाश है, तो हमें इस प्रकाश को रोशन करने के लिए अपना शोर पैदा करने की आवश्यकता है। हम डेमो को चरणों में तोड़कर पता लगाएंगे कि यह कैसे बनाया जाता है।

हमें कहीं और शुरू करने की आवश्यकता है, और हम अपनी बनावट के आधार पर यादृच्छिक, मूल शोर उत्पन्न करके शुरू करेंगे:

 <feTurbulence baseFrequency='0.04' result='noise' />

हमारा शोर इस तरह दिखता है:

फिर हमने उस पर अपना प्रकाश डाला, और फिर उसे वहाँ से ले गए:

 <feTurbulence baseFrequency='0.04' result='noise' /> <feDiffuseLighting in='noise' lighting-color='white' surfaceScale='2'> <feDistantLight azimuth='45' elevation='60' /> </feDiffuseLighting>

हमारे शोर की तेज रोशनी हमें निम्नलिखित बनावट प्रदान करती है:

यह उस बनावट का परिणाम नहीं है जिसकी हम तलाश कर रहे हैं। पहली चीज जो हम यहां देखते हैं, वह है बनावट में कई तेज रेखाओं की उपस्थिति। हम उनसे छुटकारा चाहते हैं क्योंकि कागज की सतह पर कोई तेज रेखाएं नहीं हैं। हमें इन लाइनों को सुचारू करने की आवश्यकता है। यह उत्पन्न शोर के प्रकार को बदलकर भग्न करने के लिए किया जा सकता है:

 <feTurbulence type="fractalNoise" baseFrequency='0.04' result='noise' /> <feDiffuseLighting in='noise' lighting-color='white' surfaceScale='2'> <feDistantLight azimuth='45' elevation='60' /> </feDiffuseLighting>

यह हमारी बनावट से इन सभी तेज गठबंधन किनारों को हटा देता है:

अब हम अपने मोटे कागज की बनावट के करीब एक कदम हैं।

हालाँकि, उपरोक्त बनावट पर्याप्त नहीं है। उसके पास आवश्यक "खुरदरापन" का अभाव है। इसमें छोटे भागों की संख्या में वृद्धि से इसे मोटे करना चाहिए। ऐसा करने के लिए, हम अंकों के मूल्य में वृद्धि करेंगे। हमने पाया कि वांछित स्तर पाने के लिए लगभग 5 एक बड़ी संख्या है:

 <feTurbulence type="fractalNoise" baseFrequency='0.04' numOctaves="5" result='noise' /> <feDiffuseLighting in='noise' lighting-color='white' surfaceScale='2'> <feDistantLight azimuth='45' elevation='60' /> </feDiffuseLighting>

और हमारे कागज बनावट अब इस तरह दिखता है:

बहुत बढ़िया!

आप यहां डेमो के साथ खेल सकते हैं:

यह डेमो एमएस एज सहित सभी प्रमुख ब्राउज़रों में काम करता है।

यदि आप चाहें, तो आप स्रोत और प्रकाश की दूरी के साथ खेलते हुए प्रभाव को थोड़ा और समायोजित कर सकते हैं। उदाहरण के लिए, 60 से 40 तक प्रकाश स्रोत की ऊंचाई को कम करने से बनावट में छोटी पहाड़ियों के बीच विपरीत वृद्धि होनी चाहिए। तब बनावट कुछ इस तरह दिखाई देगी:

मैं प्रकाश और शोर स्रोतों की विशेषताओं के मूल्यों के साथ खेलने की सलाह देता हूं और देखता हूं कि वे परिणामस्वरूप बनावट को कैसे प्रभावित करते हैं।

निष्कर्ष

FeTurbulence आदिम सबसे दिलचस्प और शक्तिशाली एसवीजी ऑपरेशनों में से एक है। अन्य आदिम और एनिमेशन के संयोजन में, वह वास्तव में दिलचस्प और आकर्षक प्रभाव, बनावट और इंटरैक्शन बनाने में सक्षम है।

मुझे लगता है कि feTurbulence उन फ़िल्टरों में से एक है जिसके साथ आप इसका बेहतर अध्ययन करने के लिए अन्य लोगों के कोड का प्रयोग या पार्स करना चाहेंगे। हालांकि, मुझे लगता है कि मैं अनुमान लगा रहा हूं कि थोड़ी देर बाद बनावट कैसी दिखेगी। और चूंकि हम केवल एक बनावट के साथ इतना कुछ कर सकते हैं, यदि आप इसे अन्य आदिम के साथ उपयोग करते हैं, तो लगभग अनगिनत संभावित प्रभाव हैं जो आप इसे बना सकते हैं। मैं अत्यधिक अनुशंसा करता हूं कि आप अन्य लोगों के काम को देखें और बेहतर सीखने के लिए इसे अलग रखें।

Yoksel कुछ महीनों पहले SVG फ़िल्टर के बारे में बात करने के बाद कोडपेन SVG फ़िल्टर के साथ प्रयोग कर रहा है । तो आप उसके कोडपेन प्रोफ़ाइल में पार्स करने और सीखने के लिए काफी कुछ प्रभाव पा सकते हैं।

** feTurbulence ** का उपयोग करके SVG फ़िल्टर के साथ Yoksel के नवीनतम प्रयोगों में से एक
Ris_13। फॉक्सबुलेंस का उपयोग करके एसवीजी फिल्टर के साथ योकसेल के नवीनतम प्रयोगों में से एक।

मुझे उम्मीद है कि इस लेख ने आपको प्रेरित किया और आपकी कल्पना के लिए एक नया द्वार खोल दिया ताकि आप देख सकें कि आप एसवीजी फ़िल्टर के साथ क्या कर सकते हैं।

इस श्रृंखला के अंतिम लेख में, मैं आपको एसवीजी फिल्टर के साथ आगे बढ़ने और अपने दम पर निर्माण शुरू करने में मदद करने के लिए कुछ अतिरिक्त संसाधन और उपकरण साझा करूंगा। हमारे साथ रहो।

एसवीजी फ़िल्टरिंग प्रभाव। भाग 6. सामंतवाद के साथ बनावट का निर्माण