📖 🥠 〽️ एक प्रक्रियात्मक रूप से उत्पन्न नक्शे की सीमाओं को बनाएं 🕘 🤲🏾 🕦

स्कॉट टर्नर अपने प्रक्रियात्मक रूप से उत्पन्न गेम पर काम करना जारी रखता है और अब उसने नक्शे की सीमाओं को डिजाइन करने की समस्या से निपटने का फैसला किया है। ऐसा करने के लिए, उसे कई कठिन समस्याओं को हल करना होगा और यहां तक कि सीमाओं का वर्णन करने के लिए अपनी भाषा भी बनानी होगी।

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

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

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

इन नाम फ़ील्ड में परिवर्तनशीलता है, लेकिन वे सभी मैन्युअल रूप से बनाई गई हैं।

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

सबसे सरल सीमा एक रेखा है जो नक्शे के किनारों के साथ चल रही है और इसकी सीमा को दर्शाती है। जैसा कि मैंने ऊपर कहा, इसे "फ्रेम लाइन" भी कहा जाता है:

नक्शे के भीतर सीमाओं के स्थान के साथ भिन्नता भी है। इस संस्करण में, मानचित्र छवि के किनारों तक पहुंचता है, लेकिन सीमा छवि के अंदर एक आभासी सीमा बनाती है:

यह किसी भी प्रकार की सीमा के साथ किया जा सकता है, लेकिन इसका उपयोग आमतौर पर केवल सीमा के साथ सरल सीमाओं के साथ किया जाता है।

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

यहाँ एक और अधिक परिष्कृत उदाहरण है:

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

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

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

तत्व के आधार पर, विभिन्न शैली भिन्नताएं संभव हैं। इस उदाहरण में, पंक्ति दोहराती है, लेकिन रंग बदलता है:

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

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

क्या ये दो रेखाएं हैं, चार या छह? मुझे लगता है कि यह सब इस बात पर निर्भर करता है कि आप उन्हें कैसे आकर्षित करते हैं!

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

यहाँ एक उदाहरण दिया गया है कि सीमा को एक पैटर्न से कैसे भरा जाता है:

इसके अलावा, तत्वों को स्टाइल किया जा सकता है ताकि वे तीन आयामी दिखें। यहाँ एक नक्शा है जिसमें सीमा को छायांकित किया गया है ताकि यह हल्का दिखाई दे:

इस नक्शे में, सीमा को त्रि-आयामी दिखने के लिए छायांकित किया गया है, और इसे मानचित्र के किनारों के अंदर सीमाओं के स्थान के साथ जोड़ा गया है:

एक अन्य आम सीमा तत्व बहु-रंगीन धारियों के रूप में पैमाना है:

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

ये धारियां आमतौर पर काले और सफेद रंग में खींची जाती हैं, लेकिन कभी-कभी लाल या किसी और रंग को जोड़ा जाता है:

इस तत्व को दूसरों के साथ भी जोड़ा जा सकता है, जैसा कि इस उदाहरण में लाइनों और पैमाने के साथ है:

यह उदाहरण थोड़ा असामान्य है। आमतौर पर पैमाना (यदि कोई हो) सीमा का अंतरतम तत्व है।

इस नक्शे पर, अलग-अलग रिज़ॉल्यूशन के साथ अलग-अलग पैमाने हैं (साथ ही साथ अजीब नोटों के साथ!)।

(Reddit पर, उपयोगकर्ता AbouBenAdhem ने मुझे सूचित किया कि बेबिलिक क्यूनिफॉर्म में रनिक मार्क्स संख्या 48 और 47 लिखे गए हैं। इसके अलावा, "अलग-अलग प्रस्तावों वाले तराजू" में छह डिवीजनों को दस छोटे डिवीजनों में विभाजित किया गया है, जो बेबीलोन हेक्साडेसिमल संख्या प्रणाली से मेल खाती है। आमतौर पर। मैं मानचित्रों के स्रोतों को इंगित करता हूं, लेकिन इस पोस्ट में बहुत छोटे टुकड़े हैं, इसलिए मैंने परेशान नहीं किया। हालाँकि, यह नक्शा लेखक रे । बोलेइन के लिए थॉमस रे द्वारा बनाया गया था , इसलिए, शायद, उनकी पुस्तकों में कार्रवाई बेबीलोन के प्रवेश में होती है।)

लाइनों और पैमाने के अलावा, सबसे आम तत्व एक दोहराता ज्यामितीय पैटर्न है। अक्सर इसमें मंडलियाँ, समचतुर्भुज और आयत जैसे भाग होते हैं:

ज्यामितीय तत्व, लाइनों की तरह, उन्हें तीन आयामी दिखने के लिए छायांकित किया जा सकता है:

इन तत्वों को विभिन्न तरीकों से मिलाकर जटिल सीमाएँ बनाई जा सकती हैं। यहां वह सीमा है जो लाइनों, ज्यामितीय पैटर्न और पैमाने को जोड़ती है:

ऊपर दिखाए गए उदाहरण डिजिटल कार्ड थे, लेकिन, निश्चित रूप से, हस्तलिखित कार्ड के साथ भी ऐसा ही किया जा सकता है। यहाँ हाथ से निर्मित एक सरल ज्यामितीय पैटर्न का उदाहरण दिया गया है:

इन तत्वों को भी लचीले ढंग से कई तरीकों से जोड़ा जा सकता है। यहाँ एक ज्यामितीय पैटर्न एक "रैग्ड एज" के साथ संयुक्त है:

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

पैटर्न का एक अन्य लोकप्रिय तत्व बुनाई या सेल्टिक गाँठ है:

यहाँ रंग, पैमाने और अन्य तत्वों से युक्त एक अधिक जटिल विकर सीमा है:

इस नक्शे पर, बुनाई एक धार वाले तत्व के साथ संयुक्त है:

ज्यामितीय पैटर्न और बुनाई के अलावा, किसी भी दोहराए जाने वाले पैटर्न कार्ड की सीमा का हिस्सा हो सकते हैं। यहाँ एक उदाहरण है, जो तीर के आकार के आकार का उपयोग कर रहा है:

और यहाँ एक दोहराव लहर पैटर्न के साथ एक उदाहरण है:

और अंत में, फंतासी वर्णमाला के रन या अन्य तत्वों को कभी-कभी फंतासी कार्ड के किनारों में जोड़ा जाता है:

उपरोक्त उदाहरण आधुनिक फंतासी मानचित्रों से लिए गए हैं, लेकिन यहां एक ऐतिहासिक (18 वीं शताब्दी) लाइनों और एक हाथ से तैयार किए गए नक्शे के उदाहरण हैं

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

यह समरूपता के बारे में थोड़ी बात करने लायक भी है । पुनरावृत्ति की तरह, समरूपता एक शक्तिशाली उपकरण है, और मानचित्र सीमाएं आमतौर पर सममित होती हैं या सममित तत्व होते हैं।

कई मानचित्र सीमाएँ अंदर से बाहर सममित हैं, जैसा कि इस उदाहरण में है:

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

इस अधिक जटिल उदाहरण में, सीमा सममित है, पैमाने के काले और सफेद धारियों को बारी-बारी से छोड़कर:

चूंकि पैमाने की नकल करने का कोई मतलब नहीं है, इसलिए इसे अक्सर एक अलग तत्व माना जाता है, भले ही बाकी की सीमा सममित हो।

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

ध्यान दें कि इस उदाहरण में पैटर्न में एक तत्व होता है जो सममित (बाएं से दाएं) नहीं है, लेकिन सामान्य पैटर्न सममित और दोहराता है:

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

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

भाग २

इस भाग में, मैं मैप बॉर्डर विवरण भाषा (MBDL) का प्रारंभिक संस्करण बनाऊंगा।

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

मैं सरलतम तत्व को परिभाषित करके MBDL बनाना शुरू करूंगा: लाइन। लाइन का रंग और चौड़ाई है। इसलिए, MBDL में मैं इस रूप में लाइन प्रस्तुत करूंगा:

L(width, color)

यहाँ कुछ उदाहरण हैं (मेरे फ़ोटोशॉप कौशल के लिए खेद है):

तत्वों का अनुक्रम बाहर से अंदर की ओर (*) प्रदान किया जाता है, इसलिए हम मानते हैं कि यह नक्शे के शीर्ष पर सीमा है:

दूसरे उदाहरण को देखें - सीमाओं के साथ एक रेखा को तीन अलग लाइन तत्वों के रूप में दर्शाया गया है।

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

आसानी से, रिक्त स्थान को बिना रंग के रेखाओं के रूप में दर्शाया जा सकता है:

लेकिन यह एक विशिष्ट ऊर्ध्वाधर अंतरिक्ष तत्व के लिए अधिक दृश्य होगा:

वीएस (चौड़ाई)

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

B(width, length, outline, outline width, fill) D(width, length, outline, outline width, fill) E(width, length, outline, outline width, fill)

(* मैंने स्वीकार किया कि मैं बाहर से अंदर तक की दिशा में चौड़ाई पर विचार करूंगा, और लंबाई सीमा के साथ मापा जाता है।)

यहाँ सरल ज्यामितीय आकृतियों के उदाहरण दिए गए हैं:

इन तत्वों को सीमा की पूरी लंबाई भरने के लिए, उन्हें दोहराया जाना चाहिए। उन तत्वों के समूह को इंगित करने के लिए जो सीमा की लंबाई को भरने के लिए दोहराया जाएगा, मैं वर्ग कोष्ठक का उपयोग करता हूं:

[ element element element ... ]

यहाँ आयतों और समचतुर्भुज के दोहराव पैटर्न का एक उदाहरण दिया गया है:

कभी-कभी मुझे दोहराए जाने वाले पैटर्न के तत्वों के बीच एक क्षैतिज (क्षैतिज) स्थान की आवश्यकता होगी। यद्यपि आप अंतरिक्ष बनाने के लिए रंगों के बिना एक तत्व का उपयोग कर सकते हैं, यह क्षैतिज अंतरिक्ष तत्व के लिए अधिक स्मार्ट और सुविधाजनक होगा:

HS(length)

MBDL के इस पहले पुनरावृत्ति के लिए आवश्यक अंतिम कार्य एक दूसरे के ऊपर तत्वों को ढेर करने की क्षमता है। यहाँ एक उदाहरण सीमा है:

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

{element element element ...}

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

L(1, black) {L(20, yellow)} VS(3) [B(5, 10, black, 3, none) D(5, 10, black,3,red)] VS(3) L(1, black)

हम एक काली रेखा खींचते हैं, जहां हम हैं, ठीक करते हैं, एक पीले रंग की रेखा खींचते हैं, और फिर पूर्व निर्धारित स्थिति पर लौटते हैं, थोड़ा नीचे गिराते हैं, आयतों और rhombuses का एक पैटर्न आकर्षित करते हैं, थोड़ा नीचे छोड़ते हैं, और फिर दूसरी काली रेखा खींचते हैं।

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

पार्सिंग कंप्यूटर विज्ञान का एक काफी अच्छा अध्ययन क्षेत्र है। भाषा को पार्स करना बहुत सरल नहीं है, लेकिन हमारे मामले में यह अच्छा (*) है कि MBDL एक संदर्भ-मुक्त व्याकरण है। प्रसंग-मुक्त व्याकरण को काफी आसानी से पार्स किया जाता है, और उनके लिए कई जावास्क्रिप्ट पार्सिंग टूल हैं। मैं नियरलीजज पर बसा हुआ था , जो काफी परिपक्व और एक अधिक महत्वपूर्ण उपकरण है।

(* यह सिर्फ भाग्य नहीं है, मैंने यह सुनिश्चित किया कि भाषा संदर्भ-मुक्त हो।)

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

border -> element | element border element -> “ L"

प्रत्येक नियम कहता है कि बाईं ओर को दाईं ओर के किसी भी विकल्प से बदला जा सकता है। अर्थात्, पहला नियम कहता है कि एक सीमा एक तत्व है, या एक तत्व है, जिसके बाद दूसरी सीमा है। जो स्वयं एक तत्व हो सकता है, या एक तत्व जिसके बाद एक सीमा हो सकती है, और इसी तरह। दूसरा नियम कहता है कि एक तत्व केवल एक स्ट्रिंग "एल" हो सकता है। अर्थात्, ये नियम ऐसी सीमाओं के अनुरूप हैं:

L LLL

और ऐसी सीमाओं के अनुरूप नहीं हैं:

X L3L

वैसे, यदि आप नियरले में इस (या किसी अन्य) व्याकरण के साथ प्रयोग करना चाहते हैं, तो यहां पर ऑनलाइन सैंडबॉक्स है । आप व्याकरण में प्रवेश कर सकते हैं और मामलों को देख सकते हैं कि यह मेल खाता है और मेल नहीं खाता।

यहाँ एक लाइन की अधिक पूरी परिभाषा है आदिम:

@builtin “number.ne" @builtin “string.ne" border -> element | element border element -> “L(" decimal “," dqstring “)"

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

विभिन्न पात्रों के बीच रिक्त स्थान जोड़ना अच्छा होगा, तो चलिए इसे करते हैं। नियर कैरेक्टर क्लासेस और RBNF को “: *” के साथ किसी चीज़ के “शून्य या अधिक” के लिए सपोर्ट करता है, इसलिए मैं इसका उपयोग “शून्य या अधिक स्पेस” को निर्दिष्ट करने के लिए कर सकता हूं और विवरणों में स्पेस की अनुमति देने के लिए कहीं भी पेस्ट कर सकता हूं:

@builtin "number.ne" @builtin "string.ne" border -> element | element border WS -> [\s]:* number -> WS decimal WS color -> WS dqstring WS element -> "L(" number "," color ")"

हालांकि, सभी पर WS के उपयोग से व्याकरण को पढ़ना मुश्किल हो जाता है, इसलिए मैं उन्हें छोड़ दूंगा, लेकिन कल्पना कीजिए कि वे हैं।

एक तत्व एक ऊर्ध्वाधर स्थान भी हो सकता है:

@builtin "number.ne" @builtin "string.ne" border -> element | element " " border number -> decimal color -> dqstring element -> "L(" number "," color ")" element -> "VS(" number ")"

यह ऐसी सीमाओं से मेल खाती है

L(3.5,"black") VS(3.5)

इसके बाद पट्टी, रोम्बस और दीर्घवृत्त की प्रधानता आती है।

@builtin "number.ne" @builtin "string.ne" border -> element | element " " border number -> decimal color -> dqstring element -> "L(" number "," color ")" element -> "VS(" number ")" geometric -> "B(" number "," number "," color "," number "," color ")" geometric -> "E(" number "," number "," color "," number "," color ")" geometric -> "D(" number "," number "," color "," number "," color ")"

यह ऐसे तत्वों से मेल खाएगा

B(34, 17, "white", 3, "black")

(ध्यान दें कि ज्यामितीय प्रधानता "तत्व" नहीं हैं क्योंकि वे शीर्ष स्तर पर अकेले नहीं हो सकते। उन्हें एक पैटर्न में संलग्न किया जाना चाहिए।)

मुझे भी एक क्षैतिज स्थान की आवश्यकता है आदिम:

@builtin "number.ne" @builtin "string.ne" border -> element | element " " border number -> decimal color -> dqstring element -> "L(" number "," color ")" element -> "VS(" number ")" geometric -> "B(" number "," number "," color "," number "," color ")" geometric -> "E(" number "," number "," color "," number "," color ")" geometric -> "D(" number "," number "," color "," number "," color ")" geometric -> "HS(" number ")"

अब मैं एक पैटर्न (रिपीट) ऑपरेशन जोड़ूंगा। यह वर्ग कोष्ठक के अंदर एक या एक से अधिक तत्वों का अनुक्रम है। मैं आरबीएनएफ ऑपरेटर ": +" का उपयोग करूंगा, जिसका अर्थ है "एक या अधिक।"

@builtin "number.ne" @builtin "string.ne" border -> element | element " " border number -> decimal color -> dqstring element -> "L(" number "," color ")" element -> "VS(" number ")" geometric -> "B(" number "," number "," color "," number "," color ")" geometric -> "E(" number "," number "," color "," number "," color ")" geometric -> "D(" number "," number "," color "," number "," color ")" geometric -> "HS(" number ")" element -> "[" (geometric):+ "]"

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

[B(34,17,"white",3,"black")E(13,21,"white",3,"rgb(27,0,0)")]

भाषा का अंतिम भाग ओवरले ऑपरेटर है। यह ब्रेसिज़ के अंदर तत्वों की संख्या है।

@builtin "number.ne" @builtin "string.ne" border -> element | element " " border number -> decimal color -> dqstring element -> "L(" number "," color ")" element -> "VS(" number ")" geometric -> "B(" number "," number "," color "," number "," color ")" geometric -> "E(" number "," number "," color "," number "," color ")" geometric -> "D(" number "," number "," color "," number "," color ")" geometric -> "HS(" number ")" element -> "[" (geometric ):+ "]" element -> "{" (element ):+ "}"

जो हमें निम्नलिखित करने की अनुमति देता है:

{L(3.5,"rgb(98,76,15)")VS(3.5)}

(ध्यान दें कि पुनरावृत्ति ऑपरेटर के विपरीत, ओवरले ऑपरेटर का आंतरिक रूप से उपयोग किया जा सकता है।)

विवरण को साफ करने और आवश्यक स्थानों पर स्थान जोड़ने के बाद, हमें निम्नलिखित MBDL व्याकरण मिलता है:

@builtin "number.ne" @builtin "string.ne" border -> (element WS):+ WS -> [\s]:* number -> WS decimal WS color -> WS dqstring WS element -> "L(" number "," color ")" element -> "VS(" number ")" element -> "(" WS (element WS):+ ")" element -> "[" WS (geometric WS):+ "]" geometric -> "B(" number "," number "," color "," number "," color ")" geometric -> "E(" number "," number "," color "," number "," color ")" geometric -> "D(" number "," number "," color "," number "," color ")" geometric -> "HS(" number ")"

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

भाग 3

अब हम रेंडरिंग प्रिमिटिव्स को स्वयं लागू करना शुरू करेंगे। (इस बिंदु पर, मुझे अभी तक प्रतिपादन प्राइमेटरीज के लिए पार्सर को बांधना नहीं है। परीक्षण के लिए, मुझे मैन्युअल रूप से कॉल करना होगा।)

आइए आदिम रेखा से शुरू करते हैं। याद रखें कि यह कैसा दिखता है:

L(width, color)

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

अगर मुझे केवल नक्शे के शीर्ष के साथ एक सीमा खींचने की आवश्यकता है, तो लाइन आदिम लागू करने के लिए बहुत सरल होगी। हालांकि, वास्तव में, मुझे ऊपर से आकर्षित करने की आवश्यकता होगी। नीचे, बाएँ और दाएँ। (शायद किसी दिन मुझे तिरछी या घुमावदार सीमाओं का एहसास होगा, लेकिन अब हम मानक आयताकार सीमाओं का पालन करेंगे।) इसके अलावा, लाइन तत्व की लंबाई और स्थान नक्शे के आकार (साथ ही ऑफसेट पर) पर निर्भर करते हैं। इसलिए, पैरामीटर के रूप में, मुझे यह सभी डेटा चाहिए।

इन सभी मापदंडों को सेट करने के बाद, यह केवल एक पंक्ति को आदिम बनाने के लिए और मानचित्र के चारों ओर एक रेखा खींचने के लिए इसका उपयोग करने के लिए पर्याप्त है:

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

L(3, black) L(10, gold) L(3, black)

यह इस तरह दिखता है:

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

एक ऊर्ध्वाधर स्थान को लागू करना आदिम काफी सरल है; यह सिर्फ एक ऑफसेट वेतन वृद्धि करता है। थोड़ा स्थान जोड़ते हैं:

L(3, black) L(10, gold) L(3, black) VS(5) L(3, black) L(10, red) L(3, black)

रेखाएँ खींचते समय, कोणों को ऑफसेट और मानचित्र के साथ रेखाचित्र के बीच खींचकर महसूस किया जा सकता है। लेकिन सामान्य तौर पर, मुझे एक बेवल के साथ कोणीय संबंध बनाने के लिए मानचित्र सीमा के प्रत्येक तरफ ट्रंकेशन को लागू करने की आवश्यकता होती है। यह कोनों पर सही ढंग से शामिल होने वाले पैटर्न के साथ बॉर्डर्स बनाने के लिए आवश्यक होगा, और सामान्य स्थिति में एक कोण पर किनारों के साथ तत्वों को खींचने की आवश्यकता को समाप्त कर देगा जो अन्यथा आवश्यक होंगे। (*)

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

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

मुख्य विचार यह है कि प्रत्येक सीमा को तिरछे काटकर चार काटे गए क्षेत्रों को बनाया जाए, जिसमें सीमा के प्रत्येक भाग को नीचे रखा जाएगा:

ट्रंकटिंग करते समय, संबंधित क्षेत्र में खींची गई सभी चीजें वांछित कोण पर काट दी जाएंगी।

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

अगला आपको ज्यामितीय आकृतियों को लागू करने की आवश्यकता है। लाइनों के विपरीत, वे पैटर्न की सीमा को दोहराते हैं, जो नक्शे की सीमा के किनारे को भरते हैं:

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

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

इस कोड का कई बार उपयोग करना और एक ही ऑफसेट के साथ रेंडर करना, मैं मैप स्केल बनाने के लिए काले और सफेद धारियों को मिला सकता हूं:

इससे पहले कि मैं यह पता लगाना शुरू करूँ कि नक्शे की वास्तविक सीमा पर यह सब कैसे लागू किया जाए, आइए सबसे पहले आइलिप्स और रॉमबों के लिए समान कार्यक्षमता लागू करें।

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

यहां एक उदाहरण दिया गया है (मैन्युअल रूप से बनाया गया) जो ऊपर लागू सुविधाओं का उपयोग करता है:

कोड की इतनी कम राशि के लिए, यह बहुत अच्छा लग रहा है!

आइए अब दोहराए जाने वाले तत्वों के साथ सीमाओं के जटिल मामले को हल करें: कोनों।

यदि दोहराए जाने वाले तत्वों के साथ सीमा है, तो कोनों के साथ समस्या को हल करने के कई तरीके हैं। पहला दोहराव समायोजित करना है ताकि वे ध्यान देने योग्य विवाह के बिना कोनों में निष्पादित हो जाएं:

एक अन्य विकल्प दोनों पक्षों पर कोने के पास पुनरावृत्ति को रोकना है। यह अक्सर किया जाता है यदि पैटर्न को कोने में आसानी से "घुमाया" नहीं जा सकता है:

अंतिम विकल्प कुछ कोने की सजावट के साथ पैटर्न को बंद करना है:

किसी दिन मुझे कोने की सजावट मिल जाएगी, लेकिन अब हम पहले विकल्प का उपयोग करेंगे। बिना अंतराल के नक्शे के कोनों में धारियों या हलकों को "घुमाएँ" कैसे बनाया जाए?

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

अन्य मामलों में, तत्व एक दिशा में आधा खींचा जाता है, और दूसरे में आधा, लेकिन किनारों का मेल होता है:

इस मामले में, एक सफेद पट्टी दोनों तरफ खींची जाती है, लेकिन बिना अंतराल के कोने में जुड़ी रहती है।

एक कोने में एक तत्व रखने पर विचार करने के दो पहलू हैं।

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

दूसरे, दोनों पक्षों के कोने तत्वों को सही ढंग से जोड़ने के लिए, नक्शे के दोनों किनारों पर तत्वों (*) की पूर्णांक संख्या होनी चाहिए। उनके पास समान संख्या नहीं है, लेकिन दोनों तरफ तत्वों की पूर्णांक संख्या होनी चाहिए। यदि एक तरफ एक आंशिक संख्या में पैटर्न समाहित है, तो एक किनारे से पैटर्न आसन्न पक्ष के साथ मेल नहीं खाएगा।

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

पैमाने की एक सफेद पट्टी विभिन्न आंशिक दोहराव के साथ होती है और परिणामस्वरूप केंद्र के सापेक्ष एक तत्व स्थानांतरित हो जाता है। मानचित्र पैमाने के लिए, यह हमेशा ऐसा नहीं होता है, क्योंकि यह पूर्ण दूरी को दर्शाता है और सममित नहीं होना चाहिए। लेकिन एक सजावटी पैटर्न के लिए, यह आमतौर पर खराब दिखता है।)

यहां एक उदाहरण दिखाया गया है कि कैसे पुनरावृत्ति की एक पूर्णांक संख्या कोने में बिल्कुल छंटनी की जाती है:

यदि आप चारों तरफ से समान करते हैं, तो कोनों का संयोग होगा और सीमा की पूरी लंबाई के साथ पैटर्न मूल रूप से स्थित होगा:

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

इसलिए, हम कोनों में पैटर्न के एक परिपूर्ण कनेक्शन का एहसास कर सकते हैं, प्रत्येक किनारे के लिए पुनरावृत्ति की पूर्णांक संख्या का चयन कर सकते हैं। हालाँकि, इस समस्या का समाधान nontrivial है।

पहले, मान लीजिए कि हम जानते हैं कि पक्ष 866 पिक्सेल लंबा है, और हम तत्व को 43 बार दोहराना चाहते हैं। फिर तत्व को हर 20.14 पिक्सेल दोहराया जाना चाहिए। हम किसी तत्व की विशिष्ट लंबाई (और सामान्य स्थिति में, तत्वों का एक पैटर्न) कैसे निर्धारित करते हैं? उपरोक्त उदाहरण में, मैंने मंडलियों के बीच अतिरिक्त स्थान जोड़ा। लेकिन अगर सर्कल शुरू में एक-दूसरे को छूते हैं, तो यह पैटर्न को बदल देगा। शायद यह मंडलियों को फैलाने के लायक है ताकि वे एक-दूसरे को छूते रहें?

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

लेकिन इसे महसूस करने के लिए, हमें तत्वों को मूल रूप से बनाने की तुलना में बहुत छोटा करना होगा। इन विकल्पों में से कोई भी सही नहीं लगता है।

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

, , , :

, . , , .

, ? . , !

4

, . , . , ( ), . — , — . , !

, , . «» , . , . , , , , .

, , . , . (: .) , . , — , !

:

, , .
, . ( , , .)
.

. . , , , , 45 . :

, .

( , !)

2:1:

, , . , , , .

, :

. :

, . , ; , , . .

:

, , .

, , . : , ; , !

, , . :

, , — . - , , .

, , , ( , ), . :

, ( ):

, , , proof of concept .

5

2 Map Border Description Language (MBDL), 3 4 . , MBDL .

3 MBDL , Javascript- Nearley . :

@builtin " number.ne" @builtin " string.ne" border -> (element WS):+ WS -> [\s]:* number -> WS decimal WS color -> WS dqstring WS element -> " L(" number " ," color " )" element -> " VS(" number " )" element -> " (" WS (element WS):+ " )" element -> " [" WS (geometric WS):+ " ]" geometric -> " B(" number " ," number " ," color " ," number " ," color " )" geometric -> " E(" number " ," number " ," color " ," number " ," color " )" geometric -> " D(" number " ," number " ," color " ," number " ," color " )" geometric -> " HS(" number " )"

, Nearley , , . ,

test -> " A" | " B" | " C"

A

Nearley

[ " A" ]

— «A», .

Nearley, ?

number -> WS decimal WS

, . , WS, , decimal, , WS. " 57", :

[ [ " " ], [ "5", "7" ], [ ] ]

Nearley , . — , — . Dragons Abound , , .

, Nearley , . , () decimal , Javascript, , number :

[ [ " " ], 57, [ ] ]

Nearley , , , . — Javascript . , number . , , . , :

number -> WS decimal WS {% default => default[1] %}

( ) , Javascript decimal . , number .

, . , Nearley MBDL Javascript, , «op». :

element -> " L(" number " ," color " )" {% data=> {op: " L", width: data[1], color: data[3]} %}

«L(13,black)» Javascript:

{op: " L", width: 13, color: " black"}

() .

L( 415, “black") VS(5) [B(1, 2, “black", 3, “white") HS(5) E(1, 2, “black", 3, “white")]

[ {op: "L", width: 415, color: "black"}, {op: "VS", width: 5}, {op: "P", elements: [{op: "B", width: 1, length: 2, olColor: "black", olWidth: 3, fill: "white"}, {op: "HS", width: 5}, {op: "E", width: 1, length: 2, olColor: "black", olWidth: 3, fill: "white"}]} ]

.

— Nearley Javascript, ? . .

-, MBDL (*) , . , ( ) , . , , , . .

(* , .)

-, Javascript Nearley , Javascript , . , , .. , Nearley, , , .

, .

, MBDL . . (, ) .

.

-, . , , , , . , , , . , . ; (VS).

— . , . , , .

, :

, (?) , :

[ {op:'P', elements: [ {op:'B', width: 10, length: 37, lineWidth: 2, color: 'black', fill: 'white'}, {op:'B', width: 10, length: 37, lineWidth: 2, color: 'black', fill: 'black'}, ]}, {op:'VS', width: 2}, {op:'L', width:3, color: 'black'}, {op:'PUSH'}, {op:'L', width:10, color: 'rgb(222,183,64)'}, {op:'POP'}, {op:'PUSH'}, {op:'P', elements: [ {op:'E', width: 5, length: 5, lineWidth: 1, color: 'black', fill: 'red'}, {op:'HS', length: 10}, ]}, {op:'L', width:3, color: 'black'}, {op:'POP'}, {op:'VS', width: 2}, {op:'P', elements: [ {op:'E', width: 2, length: 2, lineWidth: 0, color: 'black', fill: 'white'}, {op:'HS', length: 13}, ]}, ]

. , !

MBDL. : , . MBDL:

[B(5,37,"black",2,"white") B(5,37,"black",2,"black")] VS(3) L(3,"black") {L(10,"rgb(222,183,64)")} [E(5,5,"black",1,"red") HS(-5) E(2,2,"none",0,"white") HS(10)] L(3,"black")

, . , , .

, , , , :

, : , . — !