पेपर डोरबेल डब्ल्यू/पी5.जेएस और मेकी मेकी: 9 कदम

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

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

यह प्रोजेक्ट p5.js में एक स्केच बनाता है जो एक कुंजी प्रेस का उपयोग करके एक ऑडियो फ़ाइल चला सकता है फिर ध्वनि को ट्रिगर करने के लिए एक पेंसिल, पेपर और एक मेकी मेकी के साथ एक साधारण बटन बनाता है।

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

p5.js के बारे में अधिक जानें:

यदि आप Makey Makey के साथ p5.js का उपयोग करने के लिए नए हैं, तो मेरा सुझाव है कि पहले इस प्रोजेक्ट को देखें:

आपूर्ति

पेंसिल

कागज का एक छोटा वर्ग

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

लैपटॉप डब्ल्यू / इंटरनेट कनेक्शन

चरण 1: ऑडियो फ़ाइल डाउनलोड करना

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

यदि आप अपने कंप्यूटर पर फ़ाइलें डाउनलोड करने में असमर्थ हैं या केवल फ़ाइल डाउनलोड करना और इसे अपने स्केच में अपलोड करना छोड़ना चाहते हैं, तो आप पहले से अपलोड की गई ध्वनि के साथ p5.js टेम्पलेट के लिए इस लिंक पर जा सकते हैं और चरण 3 पर जा सकते हैं। हालांकि, यदि आप भविष्य में p5.js में ऑडियो फाइलों के साथ काम करना चाहते हैं, तो यह चरण और अगला चरण आपको दिखाएगा कि यह कैसे करना है।

वेब पर ध्वनि प्रभाव और ऑडियो फ़ाइलें डाउनलोड करने के लिए कई स्थान हैं, जिनमें से कुछ के लिए खाते की आवश्यकता होती है, जैसे कि freesound.org और कुछ ऐसे स्थान जिन्हें किसी खाते की आवश्यकता नहीं है, जैसे soundbible.com । अपने प्रोजेक्ट के लिए ध्वनि का उपयोग करते समय हमेशा किसी भी लाइसेंसिंग और/या एट्रिब्यूशन आवश्यकताओं के प्रति सावधान रहें। उस पर और अधिक यहाँ:

इस परियोजना के लिए घंटी की आवाज टिम कान द्वारा प्रदान की गई https://freesound.org/s/163730/ से आई थी।

यदि आप बिना खाता बनाए ध्वनि डाउनलोड करना चाहते हैं, तो मैंने ध्वनि को एमपी3 प्रारूप में बदल दिया है जिसे यहां डाउनलोड किया जा सकता है:

चरण 2: ऑडियो फ़ाइल को P5.js. में अपलोड करना

एक बार जब हम अपने डोरबेल साउंड को डाउनलोड कर लेते हैं, तो हमें इसे अपने p5.js स्केच में अपलोड करना होगा ताकि हम इसे एक्सेस कर सकें।

यह करने के लिए, इन उपायों का पालन करें:

- प्ले बटन के ठीक नीचे वेब संपादक के बाईं ओर '>' आइकन पर क्लिक करें। यह साइडबार खोलेगा जो आपके स्केच के लिए फाइलें दिखाता है।

- 'स्केच फाइल्स' के ठीक दाईं ओर नीचे की ओर दिखने वाले छोटे त्रिभुज पर क्लिक करें। यह 'फ़ोल्डर जोड़ें' और 'फ़ाइल जोड़ें' के विकल्पों के साथ एक ड्रॉप डाउन मेनू लाएगा।

- 'फाइल जोड़ें' पर क्लिक करें। यह एक फाइल जोड़ने के लिए एक विंडो लाएगा। आप डोरबेल फ़ाइल को बॉक्स में खींच सकते हैं या जहाँ बॉक्स कहता है 'फ़ाइलों को अपलोड करने के लिए यहाँ खींचें या फ़ाइल ब्राउज़र का उपयोग करने के लिए क्लिक करें' पर क्लिक करें। यह आपको ऑडियो फ़ाइल का पता लगाने के लिए आपकी कंप्यूटर फ़ाइलों के माध्यम से नेविगेट करने देगा।

- एक बार जब आप फाइल को ड्रैग या सेलेक्ट कर लेते हैं, तो आप इसे अपलोड होते हुए देखेंगे और साइड बार में फाइल का नाम दिखाई देगा।

अब आप इस ऑडियो फ़ाइल को अपने स्केच में एक्सेस और उपयोग कर पाएंगे।

चरण 3: ऑडियो फ़ाइल को P5.js स्केच में लोड करना

एक ऑडियो फ़ाइल को p5.js स्केच में लोड करने के लिए हमें एक साउंडफाइल ऑब्जेक्ट बनाने की आवश्यकता होती है। किसी वस्तु के अपने गुण और कार्य होते हैं जिनका हम उपयोग कर सकते हैं।

ऑब्जेक्ट बनाने के लिए, हमें पहले ऑब्जेक्ट को होल्ड करने के लिए एक वैरिएबल बनाना होगा। यह हमें पूरे स्केच में वस्तु और उसके गुणों तक पहुंचने की अनुमति देगा। वेरिएबल बनाने के लिए, स्केच की सबसे ऊपर की लाइन पर जाएँ और let शब्द लिखें। इस शब्द का प्रयोग जावास्क्रिप्ट में एक वेरिएबल घोषित करने के लिए किया जाता है। फिर वेरिएबल को एक नाम दें। हम वेरिएबल को अपनी इच्छानुसार कुछ भी कॉल कर सकते हैं, लेकिन इसे एक ऐसा नाम देना मददगार होता है जो हमारे कोड में यह क्या करेगा, से संबंधित है। इस मामले में, इसे डोरबेल कहना समझ में आता है।

घंटी बजने दो;

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

घुंघराले कोष्ठक के अंदर, हम लोडसाउंड () फ़ंक्शन का उपयोग करके अपने चर को ध्वनि वस्तु को सौंपेंगे। कोष्ठक के अंदर, ऑडियो फ़ाइल का सटीक नाम उद्धरण चिह्नों के अंदर लिखें:

फ़ंक्शन प्रीलोड () {

डोरबेल = लोडसाउंड ('डोरबेल.एमपी3');

}

चरण 4: कीप्रेस () फ़ंक्शन का उपयोग करके ऑडियो फ़ाइल चलाएं

अब जब ऑडियो फ़ाइल स्केच में लोड हो गई है, तो आप इसे प्ले () विधि का उपयोग करके चला सकते हैं। विधियाँ अनिवार्य रूप से ऐसे कार्य हैं जो किसी वस्तु के लिए विशिष्ट हैं।

यदि आपने पहले p5.js में कुंजी प्रेस का उपयोग किया है, तो संभवतः आपने ड्रा फ़ंक्शन के अंदर keyIsPressed चर के साथ एक सशर्त विवरण का उपयोग किया है। हालाँकि, ऑडियो फ़ाइलों के साथ काम करते समय, हम इसे ड्रा फ़ंक्शन के अंदर ट्रिगर नहीं करना चाहते हैं। ड्रा फ़ंक्शन एक लूप है इसलिए यह लगातार अपडेट हो रहा है। इसका मतलब यह है कि ऑडियो फ़ाइल तब तक बार-बार चलेगी जब तक कि एक कुंजी को दबाया जाता है जिसे सुनना सुखद नहीं होगा।

इससे बचने के लिए, आप keyPressed() नामक फ़ंक्शन का उपयोग करने जा रहे हैं। इसे सेटअप () और ड्रा () फ़ंक्शन के समान ही लिखा जाता है। इसे ड्रा () फ़ंक्शन के नीचे कोड के नीचे लिखें।

घुंघराले कोष्ठक के अंदर वह जगह है जहाँ आप प्ले () विधि डालते हैं जो एक बार कुंजी दबाने पर ऑडियो फ़ाइल को ट्रिगर करेगा। किसी ऑब्जेक्ट के लिए एक विधि का उपयोग करने के लिए, वेरिएबल नाम लिखें जो ऑब्जेक्ट रखता है उसके बाद.play();

फंक्शन कीप्रेस्ड () {

डोरबेल.प्ले ();

}

अब जब आप अपना स्केच चलाते हैं, तो आप एक कुंजी दबा सकते हैं और घंटी की आवाज बजेगी।

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

चरण 5: पेपर बटन बनाएं

मेकी मेकी के साथ ध्वनि को ट्रिगर करने के लिए, हम एक बटन बनाने के लिए एक नियमित पेंसिल और कागज का उपयोग करेंगे।

उनके बीच एक बहुत छोटे अंतर के साथ दो आधे वृत्त बनाएं ताकि वे वास्तव में स्पर्श न करें लेकिन इतना करीब हों कि हम एक ही समय में एक उंगली से दोनों हिस्सों को छू सकें। प्रत्येक आधे वृत्त में एक मोटी रेखा भी होनी चाहिए जो कागज के प्रत्येक सिरे तक फैली हो। यह वह जगह है जहां आप मेकी मेकी से मगरमच्छ क्लिप संलग्न करेंगे।

सुनिश्चित करें कि आप दोनों पक्षों को बहुत गहरा भरें ताकि पेंसिल से ग्रेफाइट मेकी मेकी से करंट को पकड़ सके।

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

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

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

स्पेस की से जुड़ी एलीगेटर क्लिप लें और इसे पेपर बटन के एक तरफ क्लिप करें। एलीगेटर क्लिप लें जो पृथ्वी से जुड़ी हुई है और इसे पेपर बटन के दूसरी तरफ क्लिप करें।

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

चरण 7: ऑडियो फ़ाइल को ट्रिगर करने के लिए बटन दबाएं

इस बिंदु पर, आप अपने दरवाजे की घंटी बजाने के लिए तैयार हैं। स्केच शुरू करें (कैनवास पर माउस को क्लिक करना याद रखें ताकि की प्रेस keyPressed() फ़ंक्शन निष्पादित करे) और फिर एक ही समय में कागज पर दो आधे सर्कल को स्पर्श करें। आपको डोरबेल ऑडियो फाइल प्ले की आवाज सुननी चाहिए।

चरण 8: विस्तार: स्केच में एक दृश्य घटक जोड़ें

इस बिंदु पर, हमारे स्केच में केवल ऑडियो फ़ाइल चलाने के लिए कोड शामिल है, इसलिए आपको स्क्रीन पर कुछ भी परिवर्तन दिखाई नहीं देगा। यदि आप किसी प्रकार का इंटरेक्टिव साउंड प्रोजेक्ट बनाने का प्रयास कर रहे हैं तो यह सब आप करना चाहते हैं।

हालांकि, p5.js की दृश्य कोडिंग क्षमताओं के साथ, ग्राफिक्स जोड़ने की संभावनाएं अनंत हैं। आपके पास ऐसे दृश्य भी हो सकते हैं जो आपकी ऑडियो फ़ाइलों पर कई तरह से प्रतिक्रिया करते हैं जैसे कि केवल तभी दिखाई देना जब ऑडियो फ़ाइल चल रही हो, वॉल्यूम और/या आवृत्ति में परिवर्तन पर प्रतिक्रिया करना या यहां तक कि ध्वनि का एक दृश्य प्रतिनिधित्व करना।

चरण 9: विस्तार: बटन दबाए जाने पर एक सर्कल बदलें रंग बदलें

इस परियोजना को सरल रखने के लिए, हम बस एक ऐसा वृत्त बनाने जा रहे हैं जो बटन दबाने पर रंग बदलता है।

ड्रा () फ़ंक्शन में, दीर्घवृत्त () फ़ंक्शन का उपयोग करके एक सर्कल बनाएं। उसके ऊपर, सर्कल का रंग सेट करने के लिए भरण () फ़ंक्शन जोड़ें। इस स्केच के लिए, मूल रंग सफेद होगा जो कि 255 का ग्रेस्केल मान है। आप RGB रंग मानों का उपयोग करके किसी भी रंग को सेट कर सकते हैं।

भरण () फ़ंक्शन और दीर्घवृत्त () फ़ंक्शन के बीच, कोष्ठक के अंदर keyIsPressed चर का उपयोग करके एक सशर्त विवरण बनाएं। कंडीशनल स्टेटमेंट के कर्ली ब्रैकेट्स के बीच में, एक और फिल () फंक्शन को उस कलर पर सेट करें जिसे आप चाहते हैं कि जब आप की को दबाते हैं तो सर्कल बदल जाए। इस प्रोजेक्ट के लिए, रंग बदलकर पीला हो जाएगा, जिसका RGB मान 255, 255, 0 है।

अगर (कुंजी दबाया गया) {

भरें (255, 255, 0);

}

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

p5.js स्केच: