Rainyday.js

उन सभी के लिए जो इन दिनों खिड़की के बाहर पर्याप्त ठंडी बारिश नहीं करते हैं, मारेक ब्रोडज़ीक ने js + कैनवास ( डेमो # 1 , डेमो # 2 - पर एक मज़ेदार डेमो बनाया और मैं आपको तुरंत चेतावनी देता हूं कि यह सभी ब्राउज़रों में काम नहीं कर सकता है), जो ग्लास पर रेनड्रॉप की नकल करता है । डेवलपर ने बूंदों के एनीमेशन की बेहतर चिकनाई हासिल करने का लक्ष्य रखा।

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

निराशाहीन चुटकुले के सभी प्रशंसकों को निश्चित रूप से इस छवि को पसंद करना चाहिए।

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

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

आंतरिक उपकरण के बारे में विवरण के लिए, स्पष्टीकरण के साथ लेखक का लेख देखें । नए संस्करण में, लेखक की योजना बूंदों के लिए टक्कर की जाँच को जोड़ने की है।

Github