🛡️ 👔 🏛️ RoughJS के उदाहरण पर फ्रीहैंड ड्राइंग का अनुकरण 🈂️ 🍴 📰

RoughJS एक छोटा (< 9KB ) जावास्क्रिप्ट ग्राफिक्स लाइब्रेरी है जो आपको स्केच , हस्तलिखित शैली में आकर्षित करने की अनुमति देता है। यह आपको <canvas>और साथ आकर्षित करने की अनुमति देता है SVG। इस पोस्ट में मैं RoughJS के बारे में सबसे लोकप्रिय प्रश्न का उत्तर देना चाहता हूं: यह कैसे काम करता है?

इतिहास का हिस्सा

हस्तलिखित रेखांकन, रेखाचित्र और रेखाचित्रों की छवियों से रोमांचित होकर, मैंने एक सच्चे बेवकूफ की तरह खुद से पूछा: क्या मैं एक कोड की मदद से इस तरह के चित्र बना सकता हूं, सॉफ्टवेयर के कार्यान्वयन की संभावना को संरक्षित करते हुए, ड्राइंग को हाथ से यथासंभव सटीक रूप से नकल कर सकता हूं? मैंने 2 डी ग्राफिक्स की एक पूरी लाइब्रेरी बनाने के लिए आदिम - लाइनों, बहुभुज, दीर्घवृत्त और घटता पर ध्यान केंद्रित करने का निर्णय लिया। इसके आधार पर, आप रेखांकन और चित्र बनाने के लिए पुस्तकालय और रेखांकन बना सकते हैं।

इस मुद्दे की संक्षिप्त जांच करने के बाद, मुझे जो वुड और उनके सहयोगियों द्वारा सूचना दृश्य के लिए स्केचरी प्रतिपादन नामक एक लेख मिला । इसमें वर्णित तकनीकें पुस्तकालय का आधार बनीं, विशेष रूप से रेखाओं और दीर्घवृत्त खींचने में।

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

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

अब बात करते हैं एल्गोरिदम की ...

असमता

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

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

पंक्तियां

हस्तलिखित लाइनें कभी सीधी नहीं होती हैं और अक्सर मोड़ ( यहाँ वर्णित ) में वक्रता दिखाती हैं । हम खुरदरेपन के आधार पर लाइन के दो छोरों को यादृच्छिक करते हैं। तब हम खंड के अंत से लगभग 50% और 75% की दूरी पर दो और यादृच्छिक बिंदुओं का चयन करते हैं। वक्र के इन बिंदुओं को जोड़ने से, हमें झुकने का प्रभाव मिलता है ।

जब हाथ से ड्राइंग करते हैं, तो लोग कभी-कभी पेंसिल को आगे और पीछे की ओर ले जाते हैं। यह या तो लाइन को उज्जवल बनाने के लिए आवश्यक है, या बस लाइन की सीधेपन को ठीक करने के लिए। यह कुछ इस तरह दिखता है:

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

इस कैनवास की सतह को देखो। खुरदरापन पैरामीटर लाइनों की उपस्थिति को बदल देता है:

कैनवास पर मूल लेख में, आप खुद को आकर्षित कर सकते हैं।

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

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

एलिप्स (और मंडलियां)

कागज की एक शीट ले लो और एक निरंतर गति में जितनी जल्दी हो सके कुछ हलकों को आकर्षित करें। यहाँ मुझे क्या मिला है:

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

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

एक दूसरा दीर्घवृत्त भी खींचा जाता है ताकि लूप अधिक बंद हो और एक अतिरिक्त स्केच प्रभाव हो।

मूल लेख में, आप एक इंटरैक्टिव कैनवास सतह पर दीर्घवृत्त खींच सकते हैं। भिन्न खुरदरापन और देखो कि कैसे रूप बदलता है:

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

एल्गोरिथ्म स्वचालित रूप से आकार के आकार के आधार पर समायोजित करता है, जिससे सर्कल में अंकों की संख्या बढ़ जाती है ( n)। नीचे स्वचालित ट्यूनिंग का उपयोग करके उत्पन्न हलकों का एक ही सेट है।

भरना

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

ऊपर दिखाए गए वर्गों को भरना आसान है, लेकिन अन्य आकृतियों के मामले में, सभी प्रकार की समस्याएं हो सकती हैं। उदाहरण के लिए, अवतल बहुभुज (जिसमें कोण 180 ° से अधिक हो सकते हैं) अक्सर ऐसी समस्याएं पैदा करते हैं:

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

स्ट्रिंग स्कैनिंग एल्गोरिदम का उपयोग किया जा सकता है। इसका सिद्धांत क्षैतिज रेखाओं (रेखापुंज लाइनों) का उपयोग करके बहुभुज को स्कैन करना है। रेस्टर लाइनें बहुभुज के ऊपर से नीचे तक जाती हैं। प्रत्येक रेखापुंज रेखा के लिए, हम यह निर्धारित करते हैं कि बहुभुज के साथ रेखा किन बिंदुओं को काटती है। हम इन चौराहे बिंदुओं को बाएं से दाएं बनाते हैं।

बिंदु से बिंदु तक बढ़ते हुए, हम भरने के मोड से गैर-भरने वाले मोड पर स्विच करते हैं; राज्यों के बीच स्विचिंग तब होती है जब रेखापुंज रेखा पर प्रत्येक चौराहे बिंदु से मिलता है। यहाँ विशेष रूप से, सीमावर्ती मामलों और स्कैनिंग ऑप्टिमाइज़ेशन विधियों को ध्यान में रखने की अधिक आवश्यकता है; आप इसके बारे में यहां और अधिक पढ़ सकते हैं: बहुभुज का रेखांकन करना , या छद्म कोड के साथ एक स्पॉइलर को तैनात करना।

स्ट्रिंग स्कैनिंग एल्गोरिदम के कार्यान्वयन का विवरण

() .

— (Edge Table, ET), , Y_min. Y_min, X_min.

— (Active Edge Table, AET), , .

:

interface EdgeTableEntry {
  ymin: number;
  ymax: number;
  x: number; // Initialized to Xmin
  iSlope: number; // Inverse of the slope of the line: 1/m
}

interface ActiveEdgeTableEntry {
  scanlineY: number; // The y value of the scanline
  edge: EdgeTableEntry;
}

, :

1. y y ET. .

2. AET .

3. , AET, ET :

(a) ET y AET , y_min ≤ y.

(b) AET , y = y_max, AET x.

() y, x AET.

(d) y , , .. .

(e) , AET, x y (edge.x = edge.x + edge.iSlope)

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

स्ट्रोक में भरने के दौरान, रेखापुंज लाइनों की वृद्धिशील स्ट्रोक की लाइनों के दिए गए घनत्व के आधार पर वेतन वृद्धि में किया जाता है, और प्रत्येक रेखा ऊपर वर्णित एल्गोरिदम का उपयोग करके खींची जाती है।

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

सिर्फ स्ट्रोक्स भरने से नहीं

रफजेएस अन्य भरण शैलियों का भी समर्थन करता है, लेकिन वे सभी एक ही हैचिंग एल्गोरिथ्म से प्राप्त होते हैं। क्रॉस हैचिंग में एक कोण पर धराशायी रेखाएँ होती हैं angle, और फिर एक कोण पर दूसरी रेखाएँ angle + 90°। Zigzag पिछले एक के साथ एक धराशायी लाइन को जोड़ने का प्रयास करता है। एक डॉट पैटर्न प्राप्त करने के लिए , धराशायी लाइनों के साथ छोटे सर्कल बनाएं।

घटता है

RoughJS में सब कुछ घटता-घटता-बढ़ता रहता है - रेखाएं, बहुभुज, दीर्घवृत्त, आदि। इसलिए, इस विचार का प्राकृतिक विकास एक स्केच वक्र बनाना है। रफ़जेएस में, हम एक वक्र के लिए बिंदुओं का एक सेट पास करते हैं, जिसके बाद हम वक्र सन्निकटन का उपयोग उन्हें क्यूबिक बेज़ियर कर्व्स में बदलने के लिए करते हैं ।

प्रत्येक बेज़ियर वक्र में दो अंत बिंदु और दो नियंत्रण बिंदु होते हैं। इस आधार पर उन्हें यादृच्छिक बनाकर roughness, आप इसी तरह "हस्तलिखित" वक्र बना सकते हैं।

वक्र भरना

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

आप क्यूबियर बेजियर वक्र के समीकरण का उपयोग करके वांछित आवृत्ति के साथ वक्र पर अंक का नमूना कर सकते हैं ।

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

में वर्णित विधि का उपयोग करके वक्र की चिकनाई की गणना की जाती है । सहनशीलता मूल्य के साथ चिकनाई मूल्य की तुलना की जाती है, जिसके बाद एक निर्णय किया जाता है कि वक्र को विभाजित करना है या नहीं। यहाँ 0.7 के सहिष्णुता स्तर के साथ एक ही वक्र है:

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

निम्नलिखित दूरी, के बराबर , और 0.15, के मूल्यों के साथ उत्पन्न अंक दिखाता है ।0.751.53.0

आकृति की खुरदरापन के आधार पर , आप उचित दूरी मान सेट कर सकते हैं । बहुभुज के सभी कोने प्राप्त करने के बाद, हम घुमावदार आकृतियों को खूबसूरती से भर सकते हैं:

एसवीजी सर्किट

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

रफजेएस मार्ग को पार करता है और इसे केवल तीन परिचालन में सामान्य करता है: हटो , लाइन और क्यूबिक कर्व । ( पाथ-डेटा-पार्सर )। सामान्यीकरण के बाद, ड्राइंग लाइनों और घटता के उपरोक्त तरीकों का उपयोग करके आंकड़ा खींचा जा सकता है। पॉइंट-ऑन-पथ

पैकेज पथों के सामान्यीकरण और संबंधित पथ बिंदुओं की गणना करने के लिए वक्र बिंदुओं के नमूने को जोड़ती है।

निम्नलिखित पथ के लिए एक उदाहरण बिंदु गणना है M240,100c50,0,0,125,50,100s0,-125,50,-150s175,50,50,100s-175,50,-300,0s0,-125,50,-100s0,125,50,150s0,-100,50,-100:

एक और एसवीजी उदाहरण जो मुझे दिखाना पसंद है वह संयुक्त राज्य अमेरिका की रूपरेखा है :

RoughJS का प्रयास करें

की जाँच करें वेबसाइट या Github पर भंडार या API दस्तावेज़ । परियोजना की जानकारी के लिए ट्विटर @RoughLib का पालन करें ।

RoughJS के उदाहरण पर फ्रीहैंड ड्राइंग का अनुकरण