কাগজ ডোরবেল W/ P5.js & Makey Makey: 9 ধাপ

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 07:58

Makey Makey প্রকল্প

এই প্রকল্পটি p5.js এ একটি স্কেচ তৈরি করে যা একটি কী প্রেস ব্যবহার করে একটি অডিও ফাইল চালাতে পারে তারপর একটি পেন্সিল, কাগজ এবং একটি ম্যাকি ম্যাকি দিয়ে একটি সহজ বোতাম তৈরি করে শব্দটি ট্রিগার করে।

যদিও এই প্রকল্পটি একটি ডোরবেল সাউন্ড ব্যবহার করে, ধাপগুলি অন্তর্ভুক্ত করে কিভাবে আপনার p5.js স্কেচে একটি অডিও ফাইল লোড করা যায়, তাই এটি সহজেই যেকোনো ধরনের শব্দ ব্যবহার করতে পারে।

P5.js সম্পর্কে আরও জানুন:

যদি আপনি Makey Makey এর সাথে p5.js ব্যবহার করতে নতুন হন, আমি প্রথমে এই প্রকল্পটি পরীক্ষা করে দেখার পরামর্শ দিচ্ছি:

সরবরাহ

পেন্সিল

কাগজের একটি ছোট বর্গ

Makey Makey কিট (w/ 2 alligator clips)

ল্যাপটপ w/ ইন্টারনেট সংযোগ

ধাপ 1: অডিও ফাইল ডাউনলোড করা

এই প্রকল্পের জন্য একটি অডিও ফাইল ব্যবহার করতে হবে যা আমাদের p5.js স্কেচে আপলোড করতে হবে। এটি করার জন্য, আমাদের প্রথমে অডিও ফাইলটি ডাউনলোড করতে হবে।

আপনি যদি আপনার কম্পিউটারে ফাইল ডাউনলোড করতে অক্ষম হন বা কেবল ফাইলটি ডাউনলোড করা এবং আপনার স্কেচে আপলোড করা এড়িয়ে যেতে চান, তাহলে আপনি p5.js টেমপ্লেটের জন্য এই লিঙ্কে যেতে পারেন ইতিমধ্যেই আপলোড করা শব্দ এবং ধাপ 3 এ যান। আপনি যদি ভবিষ্যতে p5.js এ অডিও ফাইল নিয়ে কাজ করতে চান, তাহলে এই ধাপ এবং পরেরটি আপনাকে দেখাবে কিভাবে এটি করতে হয়।

ওয়েবে সাউন্ড এফেক্টস এবং অডিও ফাইল ডাউনলোড করার জন্য অনেক জায়গা আছে, যেগুলোর কিছুতে অ্যাকাউন্টের প্রয়োজন হয়, যেমন freesound.org এবং কিছু যেখানে অ্যাকাউন্টের প্রয়োজন হয় না, যেমন soundbible.com। আপনার প্রকল্পের জন্য একটি শব্দ ব্যবহার করার সময় সর্বদা কোন লাইসেন্সিং এবং/অথবা অ্যাট্রিবিউশন প্রয়োজনীয়তা সম্পর্কে সচেতন থাকুন। এখানে আরও:

এই প্রকল্পের জন্য ডোরবেল শব্দটি টিম কান দ্বারা সরবরাহিত https://freesound.org/s/163730/ থেকে এসেছে।

আপনি যদি কোনো অ্যাকাউন্ট না করে সাউন্ড ডাউনলোড করতে চান, আমি সাউন্ডটিকে mp3 ফরম্যাটে রূপান্তর করেছি যা এখানে ডাউনলোড করা যাবে:

ধাপ 2: P5.js এ অডিও ফাইল আপলোড করা

একবার আমরা আমাদের ডোরবেল সাউন্ড ডাউনলোড করলে, আমাদের এটি আমাদের p5.js স্কেচে আপলোড করতে হবে যাতে আমরা এটি অ্যাক্সেস করতে পারি।

এটি করার জন্য, নিম্নলিখিত ধাপগুলি অনুসরণ করুন:

- খেলার বোতামের ঠিক নিচে ওয়েব এডিটরের বাম পাশে '>' আইকনে ক্লিক করুন। এটি সাইডবারটি খুলবে যা আপনার স্কেচের ফাইলগুলি দেখায়।

- 'স্কেচ ফাইলস' এর ঠিক ডানদিকে ছোট নিম্নমুখী ত্রিভুজটিতে ক্লিক করুন। এটি 'অ্যাড ফোল্ডার' এবং 'অ্যাড ফাইল' বিকল্পগুলির সাথে একটি ড্রপ ডাউন মেনু নিয়ে আসবে

- 'ফাইল যোগ করুন' ক্লিক করুন। এটি একটি ফাইল যুক্ত করার জন্য একটি উইন্ডো নিয়ে আসবে। আপনি বাক্সে ডোরবেল ফাইলটি টেনে আনতে পারেন বা বাক্সটি যেখানে ক্লিক করে 'ফাইলগুলি আপলোড করতে এখানে টেনে আনুন বা ফাইল ব্রাউজার ব্যবহার করতে ক্লিক করুন' ক্লিক করুন। এটি আপনাকে অডিও ফাইলটি সনাক্ত করতে আপনার কম্পিউটার ফাইলগুলির মাধ্যমে নেভিগেট করতে দেবে।

- একবার আপনি ফাইলটি টেনে আনলে বা নির্বাচন করলে, আপনি এটি আপলোড দেখতে পাবেন এবং পাশের বারে ফাইলের নাম উপস্থিত হবে।

এখন আপনি আপনার স্কেচে এই অডিও ফাইলটি অ্যাক্সেস করতে এবং ব্যবহার করতে পারবেন।

ধাপ 3: P5.js স্কেচে অডিও ফাইল লোড হচ্ছে

একটি p5.js স্কেচে একটি অডিও ফাইল লোড করার জন্য আমাদের একটি সাউন্ড ফাইল অবজেক্ট তৈরি করতে হবে। একটি বস্তুর নিজস্ব বৈশিষ্ট্য এবং ফাংশন রয়েছে যা আমরা ব্যবহার করতে পারি।

একটি বস্তু তৈরি করতে, আমাদের প্রথমে বস্তুকে ধরে রাখার জন্য একটি পরিবর্তনশীল করতে হবে। এটি আমাদের সমস্ত স্কেচ জুড়ে বস্তু এবং এর বৈশিষ্ট্যগুলি অ্যাক্সেস করার অনুমতি দেবে। একটি পরিবর্তনশীল করতে, স্কেচের উপরের লাইনে যান এবং লেট শব্দটি লিখুন। এই শব্দটি জাভাস্ক্রিপ্টে একটি পরিবর্তনশীল ঘোষণা করতে ব্যবহৃত হয়। তারপর ভেরিয়েবলের একটি নাম দিন। আমরা যা চাই তা ভেরিয়েবলকে কল করতে পারি, কিন্তু এটি একটি নাম দেওয়া সহায়ক যা এটি আমাদের কোডে কী করবে তার সাথে সম্পর্কিত। এই ক্ষেত্রে, এটিকে ডোরবেল বলাটা বোধগম্য।

ডোরবেল হতে দিন;

যেহেতু p5.js ওয়েব ভিত্তিক, স্কেচ চলতে শুরু করার আগে আমাদের নিশ্চিত করতে হবে যে অডিও ফাইলটি স্কেচে লোড করা হয়েছে, অন্যথায় আমরা বস্তুর বৈশিষ্ট্যগুলি অ্যাক্সেস করতে পারব না। এটি করার জন্য, স্কেচ শুরু হওয়ার আগে আমাদের অডিও ফাইল লোড করার জন্য একটি ফাংশন যুক্ত করতে হবে। এই ফাংশনটিকে প্রিলোড () বলা হয়। আমরা এটি সেটআপ () এবং ড্র () ফাংশনের মতোই লিখি।

কোঁকড়া বন্ধনীগুলির ভিতরে, আমরা loadSound () ফাংশন ব্যবহার করে আমাদের ভেরিয়েবলকে সাউন্ড অবজেক্টে বরাদ্দ করব। বন্ধনীর ভিতরে, উদ্ধৃতি চিহ্নের ভিতরে অডিও ফাইলের সঠিক নাম লিখুন:

ফাংশন প্রিলোড () {

doorbell = loadSound ('doorbell.mp3');

}

ধাপ 4: KeyPressed () ফাংশন ব্যবহার করে অডিও ফাইল চালান

এখন যেহেতু অডিও ফাইলটি স্কেচে লোড করা হয়েছে, আপনি এটি play () পদ্ধতি ব্যবহার করে চালাতে পারেন। পদ্ধতিগুলি মূলত ফাংশন যা একটি বস্তুর জন্য নির্দিষ্ট।

আপনি যদি আগে p5.js- এ কী প্রেস ব্যবহার করে থাকেন, তাহলে সম্ভবত আপনি ড্র ফাংশনের ভিতরে keyIsPressed ভেরিয়েবলের সাথে একটি শর্তাধীন বিবৃতি ব্যবহার করেছেন। যাইহোক, অডিও ফাইলগুলির সাথে কাজ করার সময়, আমরা এটি ড্র ফাংশনের ভিতরে ট্রিগার করতে চাই না। ড্র ফাংশন একটি লুপ তাই এটি ক্রমাগত আপডেট হচ্ছে। এর মানে হল অডিও ফাইলটি বারবার চলবে যতক্ষণ না একটি কী চেপে রাখা হয় যা শুনতে সুখকর হবে না।

এটি এড়ানোর জন্য, আপনি keyPressed () নামে একটি ফাংশন ব্যবহার করতে যাচ্ছেন। এটি সেটআপ () এবং ড্র () ফাংশনের মতোই লেখা হয়েছে। ড্র () ফাংশনের নিচে কোডের নীচে এটি লিখুন।

কোঁকড়া বন্ধনীগুলির ভিতরে যেখানে আপনি প্লে () পদ্ধতিটি রাখেন যা একবার আপনি একটি কী চাপলে অডিও ফাইলটি ট্রিগার করবে। একটি বস্তুর জন্য একটি পদ্ধতি ব্যবহার করার জন্য, পরিবর্তনশীল নাম লিখুন যা বস্তুকে ধারণ করে তার পরে.play ();

ফাংশন কী প্রেস () {

doorbell.play ();

}

এখন যখন আপনি আপনার স্কেচ চালাবেন, আপনি একটি কী টিপতে পারেন এবং ডোরবেল বাজবে।

গুরুত্বপূর্ণ দ্রষ্টব্য: আমাদের কোডে কী প্রেস যুক্ত করার সময়, ওয়েব এডিটরকে জানতে হবে যে আমরা টেক্সট এডিটরে কোড লেখার জন্য কী চাপছি বা আমরা কী কী করার জন্য কী চাপছি তা কী কী প্রেস করার জন্য। যখন আপনি প্লে বাটনে ক্লিক করেন, ক্যানভাসের উপর মাউস সরান এবং ক্যানভাসে ক্লিক করুন। এটি সম্পাদকের ফোকাসকে স্কেচে নিয়ে আসবে এবং একটি কী চাপলে কী কী প্রেস কোডটি আমরা ঘটতে চাই তা ট্রিগার করবে।

ধাপ 5: কাগজের বোতাম তৈরি করুন

Makey Makey দিয়ে সাউন্ড ট্রিগার করার জন্য, আমরা একটি বোতাম তৈরির জন্য একটি নিয়মিত পেন্সিল এবং কাগজ ব্যবহার করব।

তাদের মধ্যে একটি খুব ছোট ফাঁক দিয়ে দুইটি অর্ধবৃত্ত আঁকুন যাতে তারা আসলে স্পর্শ না করে কিন্তু যথেষ্ট কাছাকাছি থাকে যাতে আমরা একই সাথে একটি আঙুল দিয়ে উভয় অর্ধেক স্পর্শ করতে পারি। প্রতিটি অর্ধ বৃত্তের একটি মোটা রেখা থাকা উচিত যা কাগজের প্রতিটি প্রান্ত পর্যন্ত বিস্তৃত। এই যেখানে আপনি Makey Makey থেকে অ্যালিগেটর ক্লিপ সংযুক্ত করবেন।

নিশ্চিত করুন যে আপনি উভয় দিক খুব অন্ধকারে পূরণ করেছেন যাতে পেন্সিল থেকে গ্রাফাইট ম্যাকি ম্যাকি থেকে কারেন্ট ধরে রাখতে সক্ষম হয়।

দুই অর্ধ বৃত্তের নকশা হল তাদের মধ্যে এত ছোট ফাঁক থাকা যে একই সময়ে উভয় পক্ষকে স্পর্শ না করা মূলত অসম্ভব। এটি আপনাকে মাটির মকেতে চাবি এবং পৃথিবীর মধ্যে সার্কিটটি সম্পূর্ণ করতে দেয় স্থল তারটি না ধরে।

ধাপ 6: Makey Makey সেট আপ করুন

Makey Makey বোর্ড, USB তারের এবং দুটি অ্যালিগেটর ক্লিপ বের করুন। পৃথিবীতে একটি অ্যালিগেটর ক্লিপ সংযুক্ত করুন এবং একটি স্পেস কীতে সংযুক্ত করুন (যেহেতু আমরা আমাদের কোডে একটি কী নির্দিষ্ট করিনি, আমরা যে কোন কী টিপব তা শব্দকে ট্রিগার করবে)।

স্পেস কী এর সাথে সংযুক্ত অ্যালিগেটর ক্লিপটি নিন এবং কাগজের বোতামের এক পাশে ক্লিপ করুন। পৃথিবীর সাথে সংযুক্ত অ্যালিগেটর ক্লিপটি নিন এবং কাগজের বোতামের অন্য পাশে ক্লিপ করুন।

ল্যাপটপে ইউএসবি কেবল লাগান।

ধাপ 7: অডিও ফাইল ট্রিগার করতে বোতাম টিপুন

এই মুহুর্তে, আপনি আপনার ডোরবেল বাজানোর জন্য প্রস্তুত। স্কেচ শুরু করুন (ক্যানভাসে মাউস ক্লিক করতে মনে রাখবেন যাতে কী প্রেস কী -প্রেসড () ফাংশনটি সম্পাদন করবে) এবং তারপর একই সময়ে কাগজের দুটি অর্ধ বৃত্ত স্পর্শ করুন। আপনার ডোরবেল অডিও ফাইল বাজানোর শব্দ শুনতে হবে।

ধাপ 8: এক্সটেনশন: স্কেচে একটি ভিজ্যুয়াল কম্পোনেন্ট যুক্ত করুন

এই মুহুর্তে, আমাদের স্কেচে কেবল অডিও ফাইল চালানোর জন্য কোড অন্তর্ভুক্ত রয়েছে, তাই আপনি পর্দায় কিছু পরিবর্তন দেখতে পাবেন না। আপনি যদি কিছু ধরণের ইন্টারেক্টিভ সাউন্ড প্রজেক্ট তৈরি করার চেষ্টা করেন তবে এটিই আপনি করতে চান।

যাইহোক, p5.js এর ভিজ্যুয়াল কোডিং ক্ষমতা সহ, গ্রাফিক্স যুক্ত করার সম্ভাবনাগুলি অফুরন্ত। আপনি এমন ভিজ্যুয়ালও পেতে পারেন যা আপনার অডিও ফাইলের প্রতি অসংখ্য উপায়ে প্রতিক্রিয়া দেখায় যেমন অডিও ফাইল চালানোর সময় উপস্থিত হওয়া, ভলিউম এবং/অথবা ফ্রিকোয়েন্সি পরিবর্তনের প্রতিক্রিয়া বা এমনকি শব্দ নিজেই একটি ভিজ্যুয়াল উপস্থাপনা তৈরি করা।

ধাপ 9: এক্সটেনশন: বোতাম চাপলে একটি বৃত্ত পরিবর্তন করুন

এই প্রকল্পটিকে সহজ রাখতে, আমরা কেবল একটি বৃত্ত তৈরি করতে যাচ্ছি যা বোতাম টিপলে রঙ পরিবর্তন করে।

ড্র () ফাংশনে, ellipse () ফাংশন ব্যবহার করে একটি বৃত্ত তৈরি করুন। তার উপরে, বৃত্তের রঙ সেট করতে fill () ফাংশন যোগ করুন। এই স্কেচের জন্য, আসল রঙ সাদা হবে যা 255 এর গ্রেস্কেল মান।

Fill () ফাংশন এবং ellipse () ফাংশনের মধ্যে, বন্ধনীতে keyIsPressed ভেরিয়েবল ব্যবহার করে একটি কন্ডিশনাল স্টেটমেন্ট তৈরি করুন। শর্তসাপেক্ষ বিবৃতির কোঁকড়া বন্ধনীগুলির মধ্যে, যখন আপনি কী টিপবেন তখন বৃত্তটি যে রঙে পরিবর্তন করতে চান তাতে আরেকটি fill () ফাংশন সেট করুন। এই প্রকল্পের জন্য, রঙ হলুদে পরিবর্তিত হবে যার RGB মান 255, 255, 0।

যদি (keyIsPressed) {

পূরণ করুন (255, 255, 0);

}

স্কেচ চালানোর জন্য প্লে বোতাম টিপুন। স্কেচ লোড হওয়ার সময় সাদা বৃত্তটি উপস্থিত হওয়া উচিত (ক্যানভাসে মাউস ক্লিক করতে মনে রাখবেন)। তারপরে কাগজের বোতাম টিপুন এবং আপনার ডোরবেল রিং শুনতে হবে এবং বৃত্তটি রঙ পরিবর্তন দেখতে পাবে।

p5.js স্কেচ: