कोडिंग सिंपल प्लेडोह शेप्स W/ P5.js और Makey Makey: 7 Steps

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:19

मेकी मेकी प्रोजेक्ट्स »

यह एक भौतिक कंप्यूटिंग प्रोजेक्ट है जो आपको Playdoh के साथ एक आकृति बनाने की अनुमति देता है, कोड जो p5.js का उपयोग करके आकार देता है और उस आकार को एक Makey Makey का उपयोग करके Playdoh आकार को स्पर्श करके कंप्यूटर स्क्रीन पर प्रदर्शित होने के लिए ट्रिगर करता है।

p5.js जावास्क्रिप्ट में एक खुला स्रोत, वेब आधारित, रचनात्मक कोडिंग वातावरण है। यहां और जानें:

इस प्रोजेक्ट को करने के लिए आपको किसी कोडिंग अनुभव की आवश्यकता नहीं है। इसका उपयोग टेक्स्ट आधारित कोडिंग के परिचय के रूप में किया जा सकता है (स्क्रैच जैसी ब्लॉक आधारित भाषाओं के विपरीत)। इस प्रोजेक्ट को पूरा करने के लिए आपको कोड की केवल 4 पंक्तियाँ लिखनी होंगी। ऐसे कई तरीके हैं जिनसे आप इस मूल विचार को बदल सकते हैं और इसका विस्तार कर सकते हैं।

आपूर्ति

मेकी मेकी किट (w/2 एलीगेटर क्लिप्स)

प्लेडोह (कोई भी रंग)

लैपटॉप w / इंटरनेट कनेक्शन

चरण 1: एक Playdoh आकार बनाएं

Playdoh से एक आकृति बनाएं। यह एक वृत्त, अंडाकार, वर्ग, आयत या त्रिभुज हो सकता है। ध्यान रखें कि आपको बाद में इस आकृति को कोड करने की आवश्यकता होगी, इसलिए आकार जितना सरल होगा, कोडिंग भाग उतना ही आसान होगा। हालांकि, p5.js कई अलग-अलग आकृतियों को कोड करने में सक्षम है, यहां तक कि कस्टम वाले भी, इसलिए आप तय कर सकते हैं कि आप किस कठिनाई स्तर को आजमाना चाहते हैं।

चरण 2: P5.js. में आरंभ करें

यदि आपने पहले p5.js का उपयोग नहीं किया है, तो मेरा सुझाव है कि वेबसाइट पर आरंभ करें पृष्ठ देखें:

मैं p5.js का उपयोग करने के बारे में उत्कृष्ट ट्यूटोरियल के लिए The Coding Train यूट्यूब चैनल की जांच करने की अत्यधिक अनुशंसा करता हूं। यहां एक प्लेलिस्ट का लिंक दिया गया है, जो सभी बुनियादी बातों को पढ़ती है:

चूंकि p5.js वेब आधारित है, आप p5 वेब संपादक का उपयोग करके वेब पर अपनी सभी कोडिंग कर सकते हैं। इस प्रोजेक्ट को करने के लिए आपको किसी खाते की आवश्यकता नहीं है, लेकिन यदि आप अपना काम सहेजना चाहते हैं, तो आपको एक खाते के लिए साइन अप करना होगा।

वेब संपादक:

p5.js वेब संपादक में बाईं ओर कोड लिखने के लिए एक क्षेत्र होता है और कैनवास जो दाईं ओर कोड के परिणाम प्रदर्शित करेगा।

प्रत्येक p5.js स्केच में एक सेटअप () फ़ंक्शन और एक ड्रॉ () फ़ंक्शन शामिल होता है। जब स्केच पहली बार शुरू होगा तो सेटअप () फ़ंक्शन एक बार चलेगा। सेटअप () फ़ंक्शन में createCanvas फ़ंक्शन है जो एक स्थान बनाता है जहां आपका आकार खींचा जाएगा। createCanvas फ़ंक्शन के कोष्ठक में संख्याएँ कैनवास के X अक्ष (बाएँ से दाएँ) और Y अक्ष (ऊपर से नीचे) सेट करती हैं। डिफ़ॉल्ट संख्या 400, 400 है जिसका अर्थ है कि आपका कैनवास बाएं से दाएं 400 पिक्सेल और ऊपर से नीचे 400 पिक्सेल है (आप अपनी आवश्यकताओं के अनुरूप इन्हें हमेशा बदल सकते हैं)। ध्यान रखें कि कैनवास का ऊपरी बाएँ हाथ का कोना 0, 0 है। यह जानना महत्वपूर्ण होगा कि आप अपनी आकृति को कब कोडित करते हैं।

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

चरण 3: P5.js. में अपना आकार कोड करें

अपने आकार को कोड करने के लिए, आपको केवल ड्रा () फ़ंक्शन के अंदर कोड की पंक्तियों में जोड़ना होगा।

कैनवास पर प्रदर्शित करने के लिए प्रत्येक आकृति का अपना कार्य होता है। यहाँ p5.js में सभी आकृतियों के लिए संदर्भ पृष्ठ है:

एक वृत्त बनाने के लिए, हम दीर्घवृत्त फलन का उपयोग करेंगे। यह फ़ंक्शन 3 तर्क लेता है (संख्याएं जो कोष्ठक के अंदर जाती हैं)। पहली संख्या कैनवास पर वृत्त के केंद्र की X स्थिति है और दूसरी संख्या कैनवास पर Y स्थिति है। याद रखें कि ऊपरी बाएँ हाथ का कोना 0, 0 है और कैनवास 400 x 400 पिक्सेल है। तो अगर मैं चाहता हूं कि सर्कल कैनवास के बीच में दिखाई दे, तो मैं इसे एक्स अक्ष पर 200 और वाई अक्ष पर 200 पर रखूंगा। कैनवास पर चीजों को कैसे रखा जाए, यह महसूस करने के लिए आप इन नंबरों के साथ प्रयोग कर सकते हैं।

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

हमारे आकार का रंग सेट करने के लिए, हम भरण फ़ंक्शन का उपयोग करते हैं। यह 3 तर्कों का उपयोग करता है जो RGB मान हैं (R = लाल, G = हरा, B = नीला)। प्रत्येक मान 0 और 255 के बीच की कोई संख्या हो सकती है। उदाहरण के लिए, लाल बनाने के लिए, हम 255, 0, 0 डालेंगे, जो बिना हरे या नीले रंग के सभी लाल होंगे। इन नंबरों के अलग-अलग संयोजन अलग-अलग रंग बनाएंगे।

ऐसी कई वेबसाइटें हैं जो कई अलग-अलग रंगों के लिए RGB मान प्रदान करती हैं, जैसे यह एक:

एक बार जब आप अपने PlayDoh के रंग से मेल खाने के लिए RGB मान प्राप्त कर लेते हैं, तो आकृति फ़ंक्शन के ऊपर भरण फ़ंक्शन लिखें।

फिर आप वेब एडिटर में प्ले बटन पर क्लिक कर सकते हैं और आपको स्क्रीन पर अपनी आकृति दिखाई देनी चाहिए।

चरण 4: एक कुंजी प्रेस के साथ अपना आकार बनाएं

चूंकि हम चाहते हैं कि हमारा p5.js स्केच Makey Makey के साथ इंटरेक्टिव हो, इसलिए जब हम कीबोर्ड पर एक कुंजी दबाते हैं तो हमें कुछ करने के लिए कुछ कोड जोड़ने की आवश्यकता होती है। इस मामले में, हम चाहते हैं कि आकृति केवल तभी दिखाई दे जब हम एक कुंजी दबाते हैं। ऐसा करने के लिए हमें एक सशर्त बयान की जरूरत है। इसका मतलब है कि हमारे कोड में कुछ तभी होगा जब एक निश्चित शर्त पूरी होगी, इस मामले में, एक कुंजी दबाया जाता है।

इस सशर्त कथन को सशर्त बनाने के लिए, हम शब्द से शुरू करते हैं यदि उसके बाद कोष्ठक हैं। कोष्ठक के अंदर वह स्थिति होगी जिसे हम पूरा करना चाहते हैं। p5.js में, keyIsPressed नामक एक बिल्ट इन वेरिएबल है (सुनिश्चित करें कि आप कैपिटल अक्षरों का ठीक उसी तरह उपयोग करते हैं जैसा कि यहां लिखा गया है)। keyIsPressed एक बूलियन वैरिएबल है। इसका मतलब है कि इसका मान सही या गलत हो सकता है। जब कुंजी दबाया जाता है, तो इसका मान सत्य होता है और जब इसे दबाया नहीं जाता है, तो इसका मान गलत होता है।

अंत में हम घुंघराले कोष्ठक { } का एक सेट जोड़ते हैं। घुंघराले कोष्ठक के अंदर वह कोड होगा जिसे हम निष्पादित करना चाहते हैं यदि हमारी शर्त पूरी होती है। तो हम उन घुंघराले कोष्ठकों के बीच में आकार बनाने के लिए अपना कोड डालने जा रहे हैं।

अब जब हम अपना स्केच चलाते हैं, तब तक हमें आकार दिखाई नहीं देगा जब तक कि हम कीबोर्ड पर एक कुंजी नहीं दबाते।

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

चरण 5: मेकी मेकी सेट करें

Makey Makey बोर्ड, USB केबल और दो मगरमच्छ क्लिप बाहर निकालें। एक एलीगेटर क्लिप को अर्थ से और एक को स्पेस की से संलग्न करें (चूंकि हमने अपने कोड में एक कुंजी निर्दिष्ट नहीं की है, हम जो भी कुंजी दबाते हैं वह आकार को प्रकट होने के लिए ट्रिगर करेगा)।

स्पेस की से जुड़ी एलीगेटर क्लिप लें और दूसरे सिरे को प्लेडोह शेप में दबाएं।

USB केबल को लैपटॉप में प्लग करें।

चरण 6: Playdoh आकार स्पर्श करें

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

इस परियोजना के लिए p5.js स्केच का लिंक यहां दिया गया है:

यदि आकृति प्रकट नहीं होती है:

1. सुनिश्चित करें कि आपने Playdoh को छूने से पहले p5.js स्केच के कैनवास पर माउस क्लिक किया है।

2. सुनिश्चित करें कि आप अर्थ वायर की धातु क्लिप को पकड़े हुए हैं।

चरण 7: विभिन्न आकार

पीला त्रिभुज:

ब्लू स्क्वायर: