🍡 👦🏻 👍 हमें फिल्म "द मैट्रिक्स" के दृश्य प्रभाव का एहसास है 🧑🏾‍🤝‍🧑🏽 😋 👋🏾

शुभ दिन, दोस्तों!

हाल ही में "मैट्रिक्स" को संशोधित किया। एक शांत फिल्म क्या है (यह केवल पहले भाग पर लागू होती है) सुनो। एक बार फिर मैंने उनकी स्क्रीन पर चित्रलिपि के साथ "गिर रही" लाइनों की ओर ध्यान आकर्षित किया (मैंने जानबूझकर "उनके" शब्द का इस्तेमाल मज़े के लिए किया था)। मैंने सोचा कि इसे कैसे लागू किया जा सकता है ... जितना संभव हो उतना सरल (क्योंकि आलस्य)। मुझे यही मिला है।

मैट्रिक्स में आपका स्वागत है

मार्कअप इस तरह दिखता है:

<body style="margin: 0; background: #000; overflow: hidden;"> <canvas></canvas> </body>

कैनवस, संदर्भ, चौड़ाई और ऊंचाई की प्रारंभिक शुरुआत करें। हम ब्राउज़र विंडो की चौड़ाई और ऊंचाई के बराबर बाद बनाते हैं:

 const C = document.querySelector("canvas"), $ = C.getContext("2d"), W = C.width = innerWidth, H = C.height = innerHeight

हम वर्णों के साथ एक पंक्ति बनाते हैं जो विज़ुअलाइज़ेशन के लिए उपयोग किया जाएगा (मुझे चित्रलिपि नहीं चाहिए, मुझे साइरिलिक वर्णमाला चाहिए!)। इस स्ट्रिंग को एक अरै में बदलें। स्थान स्तंभों में voids देते हैं, उनके साथ प्रभाव अधिक दिलचस्प है:

 const str = "+0-1=2 3 4 5 6 7 8 9 ! ? ., :;", matrix = str.split('')

हम फ़ॉन्ट आकार, स्तंभों की संख्या निर्धारित करते हैं और एक खाली सरणी बनाते हैं। हम इस सारणी का उपयोग y समन्वय निर्धारित करने के लिए करेंगे:

 let font = 11, //   =   /   col = W / font, arr = []

स्तंभों की संख्या से इकाइयों के साथ एक खाली सरणी भरें:

 for(let i = 0; i < col; i++) arr[i] = 1

सब कुछ ड्राइंग के लिए तैयार है। आरंभ करना:

 function draw() { //    //         $.fillStyle = "rgba(0, 0, 0, .05)" //     $.fillRect(0, 0, W, H) //     $.fillStyle = "#0f0" //    $.font = font + "px system-ui" //   for (let i = 0; i < arr.length; i++) { //     let txt = matrix[Math.floor(Math.random() * matrix.length)] //   //     // fillText( ,  x =  i,    ,  y =  arr,    ) $.fillText(txt, i * font, arr[i] * font) //  "y"     Math.random()   0.975 (   ,      ),    ( "y") //        if (arr[i] * font > H && Math.random() > 0.975) arr[i] = 0 //   y arr[i]++ } }

हम प्रत्येक 123 मिलीसेकंड (एक यादृच्छिक संख्या) ड्राइंग फ़ंक्शन शुरू करते हैं:

 setInterval(draw, 123)

अंत में, विंडो का आकार बदलते समय, हम पृष्ठ को पुनः लोड करते हैं (आलस्य के लिए):

 window.addEventListener('resize', () => location.reload())

इसका परिणाम यहां देखा जा सकता है ।

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

आपका ध्यान के लिए धन्यवाद। ऑल द बेस्ट।

हमें फिल्म "द मैट्रिक्स" के दृश्य प्रभाव का एहसास है

मैट्रिक्स में आपका स्वागत है

More articles: