तो मेरे पास एक एनीमेशन है कि मैं जावास्क्रिप्ट और एचटीएमएल 5 में कोडिंग कर रहा हूं (कोई पुस्तकालय नहीं, कोई प्लगइन्स नहीं, कुछ नहीं और मैं इसे इस तरह से रहना चाहता हूं)। एनीमेशन एक साधारण तरल अनुकरण करने के लिए भौतिकी (मूल रूप से लोगों से जुड़ी असामान्य स्प्रिंग्स का एक गुच्छा) का उपयोग करता है। कार्यक्रम के इस भाग से आउटपुट ऑब्जेक्ट्स का ग्रिड (2 डी-सरणी) है, प्रत्येक एक जेड वैल्यू के साथ है। यह काफी अच्छी तरह से काम करता है। एचटीएमएल 5 कैनवास में डेटा खींचते समय मेरी समस्या उत्पन्न होती है।एचटीएमएल 5 कैनवास क्रिएटिव अल्फा-ब्लेंडिंग
कि यह कैसा लग रहा है। मेरा विश्वास करो, एनिमेटेड होने पर यह बेहतर होगा।
प्रत्येक डेटा बिंदु के लिए, प्रोग्राम जेड मान द्वारा निर्धारित रंग के साथ एक सर्कल खींचता है। बस इन बिंदुओं को चित्रित करते हुए, ग्रिड पैटर्न दर्दनाक रूप से स्पष्ट है और यह तरल पदार्थ को देखना मुश्किल है। इसे हल करने के लिए, मैंने मंडलियों को बड़ा और अधिक पारदर्शी बना दिया ताकि वे एक-दूसरे को और रंगों को मिश्रित कर सकें, जिससे एक सरल संकल्प धुंध पैदा हो सके। परिणाम दोनों तेजी से और सुंदर था, लेकिन एक छोटी सी दोष के लिए:
के रूप में हलकों क्रम में तैयार कर रहे हैं, उनके रंग मूल्यों समान रूप से ढेर नहीं है, और इसलिए बाद में तैयार हलकों पहले तैयार लोगों को अस्पष्ट। गणितीय रूप से, रेंडरर मंडलियों के रंग-मूल्यों के बार-बार भारित औसत ले रहा है। यह दो सर्किलों के लिए ठीक काम करता है, प्रत्येक को 0.5 * अल्फा_एन का मान देता है, लेकिन तीन सर्कल के लिए, रेंडरर दूसरे सर्कल का औसत दूसरे दो के औसत के साथ लेता है, जिससे नवीनतम सर्कल 0.5 * अल्फा_एन का मान देता है, लेकिन पहले की सर्किल प्रत्येक 0.25 * अल्फा_एन का मान है। जैसे ही अधिक मंडल ओवरलैप होते हैं, प्रक्रिया जारी है, नई सर्किलों और पुराने लोगों के प्रति पूर्वाग्रह बना रही है। मैं चाहता हूं कि, इसके बजाय, 0.33 * अल्फा_एन का मान प्राप्त करने के लिए तीन या अधिक मंडलियों में से प्रत्येक के लिए है, ताकि पहले की मंडल अस्पष्ट न हों।
यहां क्रिया में अल्फा-ब्लेंडिंग की एक छवि है। ध्यान दें कि बाद में नीले वृत्त पहले लाल और हरे रंग वाले तैयार धुंधला कर देता है:
यहाँ समस्या कार्रवाई में कैसा दिखता है। गांठ के बाईं तरफ की विभिन्न उपस्थिति पर ध्यान दें।
इस समस्या को हल करने के लिए, मैं विभिन्न तरीकों की कोशिश की है:
- अलग कैनवास का उपयोग करना "मिश्रण-मोड"। "गुणा करें" (जैसा उपरोक्त छवि में देखा गया है) ने चाल की, लेकिन दुर्भाग्यपूर्ण रंग विकृतियां बनाईं।
- ड्राइंग कॉल एक साथ लंपिंग। प्रत्येक सर्कल को एक अलग कैनवास पथ बनाने के बजाय, मैंने उन सभी को एक साथ लंपने की कोशिश की। दुर्भाग्यवश, यह अलग-अलग भरने वाले रंगों के साथ असंगत है और, और भी, पथ मैट, मोनोटोन सिल्हूट बनाने, बिल्कुल खुद के साथ मिश्रण नहीं किया गया है।
- ड्राइंग-ऑर्डर इंटरलसिंग। मंडलियों को 0 से एन क्रम में खींचने के बजाय, मैंने पहले शाम को और फिर बाधाओं को चित्रित करने की कोशिश की। इसने केवल आंशिक रूप से समस्या को हल किया, और एक भयानक परत पैटर्न बनाया जिसमें बाधाओं के ऊपर की तरफ बहने लगते थे।
- putImageData का उपयोग करके अपना खुद का मिश्रण मोड बनाना। मैंने जावास्क्रिप्ट का उपयोग करके मेरी ज़रूरतों के अनुरूप मैनुअल पिक्सेल-शेडर बनाने की कोशिश की, लेकिन, जैसा कि अपेक्षित था, यह बहुत धीमी थी।
इस बिंदु पर, मैं थोड़ा फंस गया हूं। मैं इस समस्या को हल करने या सर्कसविगेट करने के रचनात्मक तरीकों की तलाश में हूं, और मैं आपके विचारों का स्वागत करता हूं। मुझे यह कहने में बहुत दिलचस्पी नहीं है कि यह असंभव है, क्योंकि मैं इसे अपने लिए समझ सकता हूं।आप इस तरह के डेटा-पॉइंट से तरल पदार्थ कैसे आकर्षित करेंगे?
पुनश्च: मैं जावास्क्रिप्ट और एचटीएमएल 5 में काफी कुशल हूँ, इसलिए तुम मुझे कुछ भी सिखाने की जरूरत नहीं है। इसके अलावा, अगर यह आपके लिए एक छोटी सी समस्या की तरह लगता है, तो ध्यान रखें कि मैं आपको जवाब देने के लिए मजबूर नहीं कर रहा हूं। यह सिर्फ मुझे परेशान करता है और मैं इसे हल करने पर काम करना चाहता हूं। – mindoftea
हानिकारक ऑप्टिकल भ्रम, आपकी छवियां तब भी एनिमेटेड दिखती हैं जब वे नहीं हैं। – Philipp
क्या कोई मुझे बता सकता है कि नीचे वोट क्यों? – mindoftea