🗾 💫 👩‍👦 सरलतम जावास्क्रिप्ट भग्न 🦗 📇 🎪

मैं समुदाय को जावास्क्रिप्ट में एक पृष्ठ प्रस्तुत करता हूं जो आपको आत्म-समानता के आधार पर सरल भग्न आकृतियों को बनाने, खींचने, बनाने की अनुमति देता है। यह वास्तव में HTML / CSS / JS का उपयोग करते हुए मेरा पहला अनुभव है। व्यापक प्रोग्रामिंग अनुभव के साथ, मैंने अभी भी वेब विकास को छोड़ दिया है। और जब से, मेरी राय में, किसी भी तरह की परियोजना बनाने का तरीका सीखने का सबसे सुविधाजनक तरीका है, यहां यह मेरा भग्न हैलोवीन है ।

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

पहला पुनरावृत्ति:

दूसरा:

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

और यहाँ प्रबंधन और नियंत्रण के तरीके हैं।

आधार रेखा पर Shift + बाएँ माउस बटन - एक नया शीर्ष जोड़ें;
Ctrl + LMB शीर्ष पर - शीर्ष हटाएं;
शीर्ष पर एलएमबी - चलती;
एक खंड पर एलएमबी - इस खंड पर प्रतिबिंब का उपयोग;
खरोंच से एलएमबी - एक पूरे के रूप में पूरे आंकड़े का आंदोलन।

और कुछ तस्वीरें:

अंत में, कोड के बारे में कुछ शब्द। बेशक, C ++ / Matlab / Python के बाद, मैं JS में वस्तुओं की प्रस्तुति पर काफी हैरान था। और कक्षाओं की कमी, और वैश्विक चर। अंत में, मैंने सभी कोड को दो कार्यों में लपेट दिया। पहले एक फ्रैक्टल ऑब्जेक्ट बनाया गया था और एक क्लोजर का उपयोग करके निम्नानुसार किया जाता है:

function fracObject() { //     var own = {}; //    var that = {}; // ...    ... //     return that; }

मुझे यह पता नहीं है कि इसमें उत्तराधिकार को कैसे जोड़ा जाए, इसका सही उपयोग कैसे किया जाए। लेकिन यह भविष्य में है, विरासत इस परियोजना के लिए अतिरेक होगा। दूसरा फ़ंक्शन शरीर के बाद लोड किया गया है। लोड और उपयोगकर्ता सहभागिता को लागू करता है।

GitHub पर प्रोजेक्ट का लिंक: https://github.com/nordwinder/frac-js

और जो लोग अंत तक पढ़ चुके हैं, मैं सुंदर भग्नियों की कामना करता हूं।

UPD: पुनरावर्ती कॉल को एक नियमित, यद्यपि अधिक जटिल कार्य के साथ बदला गया। मुझे लगता है कि यह काम करने के लिए तेज हो गया है। इसके अलावा, अब एक बार में 10 हजार से अधिक खंड नहीं खींचे जाते हैं। फिर एक छोटा विराम है - ब्राउज़र घटनाओं को संसाधित करेगा, देखें कि क्या उपयोगकर्ता छोड़ दिया है। जोड़ा गया प्रगति बार और रद्द करें बटन। अब ब्राउज़र को सबसे जटिल और जटिल लाइनों पर भी लटका नहीं होना चाहिए।

सरलतम जावास्क्रिप्ट भग्न

More articles: