एसवीजी में एक पेंसिल प्रभाव बनाएं

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

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

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

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

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

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

यदि आप ऊपर और नीचे दिखाई गई पेंसिल लाइनों को देखते हैं:

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

(बेशक, वहाँ अन्य प्रभाव हैं। पेंसिल का पता लगाने में ही ओवरले, तो यह स्ट्रोक के चौराहों पर गहरा हो जाता है। स्ट्रोक खुद को दबाव में भिन्नता है और यह इसकी लंबाई के साथ स्ट्रोक के अंधेरे बदल सकते हैं। इस पोस्ट में, मैं मुख्य रूप से कागज बनावट के पुनर्निर्माण पर ध्यान दिया जाएगा।)

के लिए मैं सरल ग्रे लाइनें तैयार करके शुरू हुआ:

मैंने 4, 2 और 1 पिक्सेल की मोटाई के साथ "हस्तलिखित" लाइनें खींचीं। दुर्भाग्य से, एसवीजी प्रभाव आमतौर पर विभिन्न लंबाई की रेखाओं के लिए अलग-अलग दिखते हैं, इसलिए मैं विभिन्न आकारों पर प्रभाव की तुलना करना चाहता था।

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

सबसे पहले, मैं लाइनों के किनारों को बदलने की कोशिश करूंगा ताकि वे चिकनी न हों, लेकिन कागज के दाने की अनियमितताएं हैं। मैं लाइन के पिक्सल को आगे बढ़ाकर ऐसा करूंगा। इस कार्य को करने वाले फ़िल्टर तत्व को "feDisplacementMap" कहा जाता है; यह प्रत्येक पिक्सेल को अन्य छवि में मानों के आधार पर ले जाता है। चूंकि हम चाहते हैं कि प्रत्येक पिक्सेल एक यादृच्छिक लेकिन एकसमान तरीके से आगे बढ़े, जिससे आंदोलन को नियंत्रित करने के लिए हमें शोर को feDisplacementMap पर पास करना होगा। सौभाग्य से, एसवीजी में एक और फिल्टर तत्व है, जिसे "feTurbulence" कहा जाता है जो विशेष रूप से शोर बनाने के लिए डिज़ाइन किया गया है। तो हम लाइनों के किनारों को मोटा करने के लिए दो फिल्टर जोड़ सकते हैं।

विस्थापन मानचित्र और शोर पीढ़ी के मापदंडों द्वारा लाइन की परिमाण और मोटेपन को नियंत्रित किया जा सकता है। दुर्भाग्य से, ऑफसेट को पूर्ण आकार में दर्शाया गया है, रेखा के आकार के सापेक्ष नहीं। मैंने मापदंडों का चयन किया, कुछ ऐसा खोजने की कोशिश की जो सभी लाइन चौड़ाई में फिट हो, लेकिन ऑफसेट पैमाने में वृद्धि के साथ, आप समस्या को नोटिस कर सकते हैं:

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

जब खेल में एक मानक वृद्धि के साथ ज़ूम किया जाता है, तो प्रभाव इस तरह दिखता है (प्रभाव में सुधार के लिए मापदंडों का चयन करने के बाद)

इस पैमाने पर, कई खुरदरे किनारे धब्बे और डॉट्स बन जाते हैं। यह बहुत अप्रिय प्रभाव नहीं है, और यह कुछ हद तक एक पेंसिल लाइन की याद दिलाता है। (हालांकि, सामान्य तौर पर, एसवीजी फिल्टर को स्केलिंग के साथ समस्या होती है - कई मामलों में, जब वे ज़ूम इन होते हैं, तो वे अच्छे लगते हैं, लेकिन दूर जाते समय एल्गोरिथ्म के खराब होने वाले एल्गोरिदम के अधीन होते हैं।)

यहाँ क्या प्रभाव है जब ड्राइंग पहाड़ों (बाईं ओर पेंसिल प्रभाव) की तरह दिखता है:

इतना भयानक नहीं है, लेकिन रेखा में तेज कलाकृतियां हैं जो थोड़ी अजीब लगती हैं। और जब प्रभाव पतली, बारीकी से फैली लाइनों पर लागू होता है, तो वे ओवरलैप होते हैं और परिणामस्वरूप विलय होते हैं:

मैं दोहराता हूं, यह इतना भयानक नहीं है, और पेंसिल के पहाड़ों पर छाया एक पेंसिल द्वारा तैयार किए गए लोगों के समान दिखते हैं, अगर आपको सिर्फ इस तरह के प्रभाव की आवश्यकता होती है।

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

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

जब ज़ूम इन किया जाता है, तो आप देख सकते हैं कि प्रत्येक स्ट्रोक के अंदर अब एक छद्म ग्रेफाइट बनावट भरा हुआ है। यह सामान्य स्तर पर कैसा दिखता है:

बहुत अच्छी, विशेष रूप से मोटी रेखाओं पर। पहाड़ों को खींचते समय ऐसा दिखता है:

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

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

जाहिर है, दोनों समाधान संयुक्त हो सकते हैं। वृद्धि के साथ, परिणाम बहुत अच्छा लग रहा है:

पेंसिल लाइन से हम एक मोटे किनारे और आंतरिक बनावट दोनों की उम्मीद करते हैं। मानक पैमाने पर, सब कुछ इतना अच्छा नहीं है:

इस पैमाने पर दिखाई देने वाली तेज कलाकृतियों के कारण।

इस बनावट को बेहतर बनाने के लिए एक अच्छी चाल पृष्ठभूमि में कागजी बनावट को जोड़ना होगा:

अब आँख पूरे चित्र में बनावट की वर्दी को मानती है। यहां तक ​​कि बहुत ही निहित स्तर पर, यह आंख को धोखा देने और यह समझाने में मदद करता है कि रेखा की बनावट कागज के साथ बातचीत के कारण होती है।

इस नक्शे पर (कागजी बनावट के साथ) इस फिल्टर का उपयोग करने का एक उदाहरण है:

सामान्य तौर पर, सब कुछ बुरा नहीं है, लेकिन एक विस्तृत अध्ययन के साथ ऐसा लगता है कि हर जगह बस शोर जोड़ा गया है। 200% वृद्धि के साथ, कलाकृतियां और भी स्पष्ट हो जाती हैं:

पेंसिल लाइन के किसी न किसी किनारे को बनाने का एक और तरीका यह है कि लाइन को कई बार अलग-अलग विचलन और कम अपारदर्शिता के साथ खींचा जाए। रेखा के केंद्र में, जहां इसके कई संस्करण प्रतिच्छेद करते हैं, घनत्व मूल रेखा के घनत्व के करीब होगा; बाहरी किनारों पर, जहां कभी-कभी लाइनों का केवल एक हिस्सा होता है, अपारदर्शिता कम होगी, और किनारे कम सुपाच्य होंगे।

सामान्य तौर पर, एसवीजी फिल्टर का उपयोग करके इस तरह के समाधान को लागू करने के लिए, आपको लाइन के विकृत संस्करण बनाने के लिए एक साथ feTurbulence और feDisplacementMap का उपयोग करने की आवश्यकता होती है। हालांकि, कई बार ऐसा करने के लिए और अंत में सभी लाइनों को संयोजित करने के लिए, आपको एक सेट की जरूरत है feBlend आदिम। यदि, उदाहरण के लिए, हम तीन प्रतियों को मिलाते हैं, तो हमें लाइनों की अस्पष्टता को उचित रूप से कम करने की आवश्यकता है। (मैं निश्चित रूप से संबंधित अपारदर्शिता की गणना करने के तरीके के बारे में निश्चित नहीं हूं, लेकिन मुझे लगता है कि यह लाइन की चमक का घनमूल हो सकता है।)

यह प्रभाव (वृद्धि के साथ तीन लाइनें ) बनाता है:

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

यहाँ यह एक मानक पैमाने पर कैसा दिखता है:

मेरी राय में, यह एक पेंसिल की रूपरेखा के समान नहीं है, लेकिन यह पिछले समाधान की तेज कलाकृतियों को बेहतर ढंग से समाप्त करता है।

इस दृष्टिकोण को ऊपर वर्णित आंतरिक बनावट फिल्टर के साथ जोड़ा जा सकता है और पेंसिल लाइनों के अंदर बनावट जोड़ सकते हैं, साथ ही साथ कागज बनावट:

यहाँ यह पहाड़ों पर लागू होने के बाद कैसा दिखता है:

यह फिल्टर अन्य फिल्टर की तुलना में अधिक दृढ़ता से लाइनों को वितरित करने के लिए जाता है, अनिवार्य रूप से उन्हें मोटा बनाता है। कभी-कभी यह कई लाइनों के साथ एक स्केच प्रभाव उत्पन्न करता है, जो इतना बुरा नहीं है।

इस नक्शे पर इस फ़िल्टर का उपयोग करने का एक उदाहरण है:

यह पहले फिल्टर की तुलना में मूल अंधेरे को बेहतर रखता है, और हालांकि मेरी राय में यह बिल्कुल पेंसिल की तरह नहीं दिखता है, लेकिन प्रभाव काफी सुखद है। 200% की वृद्धि के साथ:

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

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