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

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

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

वैसे भी, रेखापुंज के साथ काम करना असंभव लग रहा था। टकटकी सर्वशक्तिमान लैंडफिल की ओर मुड़ गई थी। कई घंटे के आराम-लगातार कोडिंग ने परिकल्पना को साबित कर दिया: आप इस तरह के " वर्टेक्स कलर " - वर्टेक्स रंग का उपयोग कर सकते हैं।


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

पहला कदम

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

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



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

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

कार्यशीलता की उम्मीद नहीं है

परीक्षण के दौरान, यह पता चला है कि अक्सर कहीं-न-कहीं फिगर के कोनों में खाली चोटियाँ होती हैं, जो नेत्रहीन निर्धारित करना मुश्किल था। इस तथ्य के बावजूद कि अगले तत्व पर स्विच करने के लिए ट्रिगर ने काम किया जब भरण स्तर 97% था, स्थिति "आगे क्या करना है?" »- 90% से 97% तक अधिभोग की डिग्री के साथ - वे अक्सर और भ्रमित उपयोगकर्ताओं (जो मूल रूप से 12 वर्ष से अधिक नहीं थे) में पैदा हुए। मैं 97% से कम का ट्रिगर सेट नहीं करना चाहता था, क्योंकि तब " मैंने इसे अभी तक पूरा नहीं किया था, लेकिन यह पहले ही कूद चुका था "।

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



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

UX और UI

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



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

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

पैलेट के बारे में

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

मीठे के लिए

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



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