ReactJS पर फ्री पार्टिकल मूवमेंट को लागू करना

नमस्ते! मैं आपको उन तरीकों में से एक दिखाना चाहता हूं कि निर्दिष्ट सीमा में कणों के मुक्त आंदोलन को कैसे महसूस किया जाए। मैं इस कार्य को पूरा करने के लिए ReactJS का उपयोग करूंगा। लेकिन एल्गोरिथ्म स्वयं अभी भी सामान्य होगा, और आप इसे कहीं भी उपयोग कर सकते हैं।



लेख के अंत में, हम आपके साथ ऐसी चीज बनाएंगे।

गलत तरीका

इस समस्या को हल करने के लिए पहली बात जो दिमाग में आती है, वह है X और Y को रैंडमाइज करना। देखते हैं क्या होता है।


यहाँ हम X और Y में -50 से लेकर 50 तक की सीमा को हर सेकंड में यादृच्छिक करते हैं:

Math.random() * 100 - 50 

और संक्रमण सीएसएस संक्रमण संपत्ति का उपयोग कर चिकनी है:

 transition: transform 1s linear; 

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

सही तरीका है

पिछली विधि कई कारणों से कुटिल लगती है:

1. वास्तव में, एक कण इतनी आसानी से अपनी दिशा नहीं बदल सकता है।
2. समय की प्रत्येक अवधि के लिए कण एक निश्चित दूरी से गुजरना होगा

और इससे यह पता चलता है कि आपको उस दिशा को बिल्कुल यादृच्छिक बनाने की आवश्यकता है जिसमें कण स्थानांतरित होगा, और एक निश्चित सीमा में डिग्री, ताकि कोई तेज मोड़ न हो। तो हम पहली समस्या का समाधान करेंगे।

और दूसरी समस्या को हल करने के लिए, हम उस कदम को पहले से इंगित करेंगे जिसके द्वारा समय अंतराल पर कण को ​​स्थानांतरित करने की आवश्यकता होती है।

अब आपको त्रिकोणमिति के मूल पाठ्यक्रम को याद रखना होगा। हम लंबाई l और कोण नीचे जानते हैं। X और Y खोजने की जरूरत है Y

पाप कर्ण के विपरीत पक्ष का अनुपात है।
कॉस कर्ण के पक्ष का अनुपात है।

गणना के लिए हमें निम्नलिखित सूत्र मिलते हैं:

 x = cos(deg) * l y = sin(deg) * l 

लेकिन एक बात है। JavaScript में, Math.sin रेडियंस में एक कोण लेता है ( -1 से 1 का मान )। इसलिए, एक कोने को कास्टिंग करने से पहले, आपको पहले इसे रेडियंस में बदलना होगा।

 deg() = deg() * Pi / 180 

हम एक फ़ंक्शन लिखते हैं जो इनपुट पर एक कोण प्राप्त करेगा, और जिस दूरी से कण को ​​स्थानांतरित करने की आवश्यकता है। और फ़ंक्शन { x, y } शिफ्ट के लिए हमारे मूल्यों के साथ फ़ंक्शन वापस कर देगा।

 function getShift(deg, step) { return { x: +(Math.cos(deg * Math.PI / 180) * step).toFixed(), y: +(Math.sin(deg * Math.PI / 180) * step).toFixed(), }; }; 

हम परीक्षण करेंगे कि हमारा कार्य क्या होगा। मान लीजिए कि हम हर बार कण 10px चलते हैं। आइए देखें कि अलग-अलग कोणों के लिए getShift क्या रिटर्न देता है।

 getShift(30, 10); // {x: 9, y: 5} getShift(90, 10); // {x: 0, y: 10} getShift(135, 10); // {x: -7, y: 7} getShift(210, 10); // {x: -9, y: -5} getShift(-30, 10); // {x: 9, y: -5} 

अच्छा, ऐसा लगता है, क्या आप सहमत हैं?

अब हमारे पहले लिखित आवेदन को ठीक करने का प्रयास करें।


पहले से ही बुरा नहीं है! यह उस ढांचे को महसूस करने के लिए रहता है जिसके आगे कण बाहर नहीं जा पाएंगे। चूंकि अब, कुछ समय के बाद सबसे अधिक संभावना है, नीले सर्कल स्क्रीन से उड़ जाएंगे।

रूपरेखा बनाने के लिए, आपको एक नया स्थिरांक जोड़ना होगा। और एक शर्त भी जोड़ दें। यह वह जगह है जहाँ लूप हमारे लिए काम करता है। यदि रास्ते में कोई प्रतिबंध है, तो हम कोने को फ्रेम से मोड़ पर घुमाएंगे।

स्पष्टता के लिए, एक पीला वर्ग जोड़ें, जिसके आगे वृत्त बाहर नहीं जा सकेगा। यहाँ क्या हुआ:


हमारा एल्गोरिदम उपयोग के लिए पूरी तरह से तैयार है। अगला कदम अपनी क्षमताओं का उपयोग करके इस एल्गोरिदम को रिएक्टजेएस पर लागू करना है।

एल्गोरिथ्म को ReactJS में पोर्ट करना

जब हमारे आवेदन को ReactJS में पोर्ट करते हैं, तो हम खुद को निम्नलिखित कार्य निर्धारित करेंगे:

1. MovingPart रैपर MovingPart बनाएं जिसमें आप कुछ भी फेंक सकते हैं।
2. राज्य में, हम एक्स और वाई के मूल्यों को संग्रहीत करेंगे, क्योंकि केवल उन्हें घटक को फिर से बनाने के लिए आवश्यक है।
3. बाहर, एक घटक को अंतराल में फेंक दिया जाएगा, एक सीमा जिसके पार जाना असंभव है, और एक कदम जिसके द्वारा तत्व को एक समय अंतराल में स्थानांतरित किया जाएगा।
4. चलिए चलिए MovingPart कई घटकों के साथ थोड़ा सा MovingPart , मोटे तौर पर कल्पना करने के लिए कि यह वास्तविक जीवन में कहां लागू किया जा सकता है

परिणामस्वरूप, हमें निम्नलिखित उदाहरण मिलते हैं:


हम data सरणी से प्रारंभिक डेटा लेंगे।

उसके बाद, हम MovingPart घटक का वर्णन करते हैं:

• अंतराल (अंतराल), दूरी (दूरी) और एक कदम (कदम) में बदलाव हम प्रॉप्स से बाहर हो जाते हैं;
• आंदोलन के दौरान अधिकतम रोटेशन (अधिकतमरूट) और तत्व के अंदर शिफ्ट (डाउन) का वर्तमान कोण निर्धारित किया जाता है;
• एक्स और वाई के मूल्यों को घटक की स्थिति में ले जाया जाता है;
• GetShift विधि को घटक की आंतरिक विधि के रूप में परिभाषित किया गया है।

उसके बाद, map लूप का उपयोग करते हुए, सभी तत्वों को प्रस्तुत करें, उन्हें हमारे बनाए MovingPart घटक के साथ लपेटकर।

आपका ध्यान के लिए धन्यवाद! यह हबेरी पर मेरा पहला लेख था, मुझे उम्मीद है कि यह उपयोगी होगा। इसे आज़माएं, प्रयोग करें।