कैनवास पर लूपिंग रंग

कैनवास में रुचि (<कैनवास>) , साथ ही साथ मोबाइल अनुप्रयोगों में, आठ-बिट चित्रों के पूर्व कला विद्यालय के पुनरुद्धार की ओर जाता है। इफ़ेक्ट गेम्स 'जो हुक्काबी ने रंग छोरों के साथ खेला, जिसके कारण कुछ आश्चर्यजनक परिणाम आए ।

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

कुशल अनुकूलन भी यहाँ होता है - प्रत्येक फ्रेम में पूरे दृश्य को साफ़ करने और फिर से परिभाषित करने के बजाय, जो केवल पिक्सेल को बदलता है उसे अपडेट करता है:

ब्राउज़र में एक त्वरित फ्रेम परिवर्तन को प्राप्त करने के लिए, मुझे इंजन के थोड़ा पागल अनुकूलन की व्यवस्था करनी थी। एक बत्तीस आरजीबी कैनवस पर अनुक्रमित रंग के साथ एक 640x480 चित्र प्रदर्शित करने का मतलब जावास्क्रिप्ट के साथ प्रत्येक फ्रेम में 307200 पिक्सेल रेंगना और ड्राइंग करना होगा। यह विशाल सरणी का एक बाईपास है, इसलिए कुछ ब्राउज़र बस इसे संभालने में सक्षम नहीं हैं। जब मैंने पहली बार लोड किया, और उन पिक्सल्स को इकट्ठा किया, जो एनिमेटेड रंगों (यानी, पैलेट के लूपिंग सबसेट में शामिल रंग) को संदर्भित करते हुए, मैंने चित्रों को पूर्व-प्रसंस्करण करके उनके धीमेपन पर काबू पा लिया। इन पिक्सेल के निर्देशांक को एक अलग (छोटे) सरणी में संग्रहीत किया जाता है, और इसलिए केवल परिवर्तनशील पिक्सेल स्क्रीन पर अपडेट किए जाते हैं। इस अनुकूलन चाल ने इतनी अच्छी तरह से काम किया कि एनीमेशन वास्तव में मेरे iPhone 3GS और iPad में बहुत अच्छी गति से घूमता है!