🧑🏼‍🤝‍🧑🏼 🥞 🖼️ कैनवास का उपयोग करके त्रिकोणमिति के चमत्कार 👨🏾‍🏫 👤 🎋

लंबे समय से मैं एचटीएमएल 5 कैनवास सीखना शुरू करना चाहता था, और अंत में निश्चित रूप से इसे ले लिया। पहली चीज़ जो मैंने करने की कोशिश की, वह "छद्म 3 डी" में मानक लाइनों का उपयोग करके विभिन्न आकृतियों को प्रदर्शित कर रही थी। एक बार मैंने winamp plugin में एक बहुत ही दिलचस्प तरीके से जासूसी की और खुद इसे लागू करने का फैसला किया। 2002 में, मैंने इसे C ++ में किया, लेकिन अब इस चमत्कार को HTML और JavaScript में पोर्ट करने का समय आ गया है।

मैंने तुरंत jCanvasScript शेल का उपयोग करने के लिए और अधिक आसानी से कैनवास से जुड़े कार्यों का उपयोग करने का निर्णय लिया, और IE8 में परिणाम का समर्थन करने के लिए explorercanvas ।

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

$(window).load(function(){ $("<canvas></canvas>").attr({ 'width': $('body').width(), 'height': $('body').height(), 'id': idCanvas }).appendTo("body"); });

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

आरंभिक कोड:

 var settings = { n : 500, // num of points tx: 0, ty: 0, tz: 0, x1: 0, y1: 0, z1: 0, dtx: 1, dty: 1, dtz: 1, dx: 2, dy: 2, dz: 2, clCol: 9, dir: 1 }

फ्रेम से फ्रेम तक कोड निष्पादित:

 tx += 0.01*dtx; ty += 0.01*dty; tz += 0.01*dtz;

प्रत्येक फ्रेम में कोड निष्पादित:

 x1 = cos(tx+dx*i*PI)*i; y1 = sin(ty-dy*i*PI)*i; z1 = sin(tz-dz*i*PI)*i; x = x1/(2+z1/2); y = y1/(2+z1/2);

चर मैं 0 से n में भिन्न होता है। चर x और y 0 से 1 तक भिन्न होंगे - यह स्क्रीन की निर्देशांक में अनुवाद करने के लिए इसकी चौड़ाई और ऊंचाई के आधार पर सुविधाजनक है।

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

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

CodeMirror कोड को उजागर करने के लिए उपयोग किया जाता है

कैनवास का उपयोग करके त्रिकोणमिति के चमत्कार

More articles: