हम गेंदों को कैसे निचोड़ते हैं

कल रात, हमने 10K के अलावा भागीदारी के निर्णय लेने में हमारी मदद करने के लिए एक गेंद पोस्ट की। इसके अलावा , केवल ग्राहक प्रौद्योगिकियों का उपयोग करके 10 KB तक के सर्वश्रेष्ठ वेब एप्लिकेशन के लिए एक प्रतियोगिता।







और अगर कुछ लोग PNG का उपयोग करके कोड को संपीड़ित करने में लगे हुए थे, तो हमने उलटा समस्या हल की - js कोड का उपयोग करके PNG को संपीड़ित करना।

1. गेंद और परिणाम के साथ कहानी

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

अगले दिन, मैंने गेंद को किसी अन्य होस्टिंग में स्थानांतरित कर दिया और इसके लिए एक अलग डोमेन पंजीकृत किया।

ऐसा लगता है कि यह समाप्त हो जाएगा, लेकिन ...

2. प्रतियोगिता में भाग लेने का प्रस्ताव

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

3. चुनौती

अगले दिन, यह पता चला कि सब कुछ उतना सरल नहीं था जितना हम उम्मीद करते थे। गेंद का प्रारंभिक संस्करण 45 Kb पर कब्जा कर लिया है, जिसमें से मुख्य भाग (38 Kb) एक गेंद के साथ एक तस्वीर है, 5 Kb एक पारदर्शी नीले त्रिकोण (जो केंद्र में है) के साथ एक तस्वीर है और बाकी html, js css है। आप इस सब के आकार को कैसे कम कर सकते हैं?

4. एक गेंद के साथ एक तस्वीर - 38 Kb, पीएनजी

चित्र में, हर जगह धीरे-धीरे भराव होता है और स्वाभाविक रूप से, मैं गुणवत्ता खोए बिना इसके आकार को कम करना चाहूंगा।

• हमने जो पहला काम किया, वह पीएनजी प्रारूप को छोड़कर रंगों की संख्या (8 बिट प्रति रंग तक) को कम कर दिया था: छवि का आकार 31 Kb तक कम हो गया था;
• तब बाज़िल्क्सप तस्वीर को सममित बनाने और इसके आधे हिस्से को काटने के विचार के साथ आया। मूल छवि के प्रतिबिंब का उपयोग करके पूर्ण गेंद को कैनवस पर चित्रित किया जाना था (जो कि bazilxp लागू किया गया था)। नतीजतन, पेंटिंग का आकार 16 केबी तक कम हो गया और जेएस पर एक छोटी बैसाखी दिखाई दी, उस स्थिति को हल करते हुए जब तस्वीर को ब्राउज़र में लोड नहीं किया गया था जब तक कि गेंद को खींचा नहीं गया था।
• उसके बाद, हमने जीआईएफ में अपनी आधी गेंद बचाने की कोशिश की। परिणाम 8 Kb + था, गुणवत्ता में मामूली नुकसान ध्यान देने योग्य था, लेकिन कुल मिलाकर यह सहन करने योग्य था।

इस पर अस्थायी रूप से गेंद को पीड़ा देना बंद कर दिया।

5. नीले त्रिकोण के साथ समस्या - 5.5 Kb, पीएनजी

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

संभवत: सबसे सरल समाधान नीले त्रिकोण को सामान्य रूप से निकालना था, लेकिन सोचने के बाद, हमने इस विकल्प को त्याग दिया।

तो:

• सबसे पहले, जैसा कि गेंद के मामले में, हमने रंगों की संख्या कम कर दी, लेकिन इसमें से फ़ाइल का आकार व्यावहारिक रूप से कम नहीं था।
• इसके अलावा, यह कहने योग्य है कि त्रिकोण की सीमाएँ हैं, जिसमें पारदर्शिता धीरे-धीरे 1 से 0. तक प्रवाहित होती है जब आप किसी गेंद के साथ तस्वीर की काली पृष्ठभूमि पर एक त्रिकोण डालते हैं, तो ऐसा लगता है कि सीमाएं थोड़ी धुंधली हैं, जो पृष्ठ के समग्र स्वरूप में बहुत सुधार करती हैं। पारदर्शिता से छुटकारा पाने का फैसला किया गया था, इसे काले रंग की एक चिकनी प्रवाह के साथ बदल दिया गया और सब कुछ GIF में डाल दिया गया। इसके कारण, त्रिकोण के साथ छवि का आकार घटकर 3.5 Kb हो गया।
• अचानक, आधी गेंद पर आधा नीला त्रिकोण खींचने का विचार आया। फिर त्रिभुज के गायब होने और दिखने के एनीमेशन को अलग-अलग स्तर की पारदर्शिता के साथ त्रिकोण को काले रंग में स्केच करके व्यवस्थित किया जा सकता है। नतीजतन, हमने त्रिकोण के साथ छवि से छुटकारा पा लिया, लेकिन गेंद के साथ छवि का आकार 1.7 केबी बढ़ गया

इस बिंदु पर, हमारे पास था:

1. एक गेंद और आधे नीले त्रिकोण के आधे के साथ एक तस्वीर, 9.7 Kb
2. html + js + css, 4.5 Kb (जेएस कोड कैनवास तत्व पर ड्राइंग के कारण बहुत बढ़ गया है)

मैं यह वर्णन नहीं करूंगा कि हम html / js / css को कैसे संपीड़ित करते हैं - हर कोई इन विधियों को जानता है। दुर्भाग्य से, उन्होंने हमारी मदद नहीं की: आखिरकार हमारे साथ ऐसा हुआ, कुल फ़ाइल का आकार 11300 बाइट्स था।



कैनवास तत्व में जावास्क्रिप्ट के साथ गेंद को पूरी तरह से खींचने का निर्णय लिया गया था।

6. ड्राइंग

कार्य दिवस की समाप्ति के बाद, मैं एक कॉफी हाउस में बैठ गया, एक ट्यूटोरियल खोला और ड्राइंग शुरू कर दिया। bazilxp ने घर पर ही किया (वैसे, वह चीन में बैठता है और उसका समय क्षेत्र +6 घंटे से भिन्न होता है)।

हमारे लिए सबसे मुश्किल काम गेंद के शीर्ष पर "आठ" को खींचना था और नीले त्रिकोण के किनारों को धुंधला करने वाले ढाल के लिए जावास्क्रिप्ट निर्देशांक की गणना करना था (मुझे त्रिकोणमिति को याद करना था, जो मैंने लगभग 5 साल से नहीं किया है)।

परिणामस्वरूप, लगभग 5 घंटे (23 घंटे मास्को समय तक) के बाद हमारे पास एक तैयार पृष्ठ था, जहां भी संभव हो, एक परीक्षण पृष्ठ, जिसने एक गेंद के साथ मूल पृष्ठ को लगभग पूरी तरह से दोहराया। एक ही समय में, सभी फ़ाइलों का आकार, जिसमें css और favicon.ico शामिल हैं, यहां तक ​​कि कोड संपीड़न के बिना, 7.65 KB की राशि। मैं घर गया, और bazilxp - प्रतियोगिता में भाग लेने के लिए हमारी गेंद को पंजीकृत करें।



आप प्रतियोगिता वेबसाइट पर बॉल पेज पर परिणाम देख सकते हैं (और वोट देकर हमारी गेंद का समर्थन भी कर सकते हैं)।



-

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



आपका ध्यान देने के लिए धन्यवाद।



पुनश्च। अंत में, एक गेंद के साथ एक चित्र बनाने के चरणों के स्क्रीनशॉट:











UPD: मैं SVG के बारे में तुरंत लिखूंगा, क्योंकि इसके बारे में सवाल पहले ही शुरू हो चुके हैं



अब मुझे यह भी लगता है कि एसवीजी कम श्रम-खपत है, लेकिन कल सुबह से पहले का दिन, दुर्भाग्य से, मैं कैनवास या एसवीजी के बारे में बिल्कुल कुछ नहीं जानता था।



हमने हाथ में आई पहली चीज को पकड़ा।



किसी भी मामले में, मुझे नहीं लगता कि हमने समय बर्बाद किया है, क्योंकि अनुभव प्राप्त किया। यह मेरे लिए बहुत महत्वपूर्ण है।



UPD2: ग्रे बैकग्राउंड के बारे में

यहां विंडोज पर मैक और सफारी पर एक तस्वीर है।





वे खुद को दोषी मानते हैं: वे डिफ़ॉल्ट पृष्ठभूमि के साथ कैनवास को भरना भूल गए।



दुर्भाग्य से, कुछ भी बदलने में बहुत देर हो चुकी है।