আর্ট গ্লাভস: 10 টি ধাপ (ছবি সহ)

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

আর্ট গ্লাভস একটি পরিধানযোগ্য গ্লাভস যা মাইক্রো: বিট এবং p5.js এর মাধ্যমে আর্ট গ্রাফিক্স নিয়ন্ত্রণ করার জন্য বিভিন্ন ধরনের সেন্সর ধারণ করে।, y গ্রাফিক্সের জন্য স্থানাঙ্ক। আমি এই প্রকল্পটি আমার পরিধানযোগ্য প্রযুক্তি ক্লাসের জন্য সিইউ বোল্ডারে প্রযুক্তি, শিল্পকলা এবং মিডিয়া প্রোগ্রামের একজন সিনিয়র হিসাবে আমার টার্ম প্রকল্প হিসাবে তৈরি করেছি।

সরবরাহ:

• বাগানের গ্লাভস
• বিবিসি মাইক্রো: বিট
• 3-4 ফ্লেক্স সেন্সর
• 10 কে ওহম প্রতিরোধক
• হুক-আপ ওয়্যার (লাল ও কালো)
• তারের ক্লিপার
• ব্রেডবোর্ড
• অ্যালিগেটর ক্লিপস (ডবল পার্শ্বযুক্ত এবং একক পার্শ্বযুক্ত)
• ঝাল
• তাতাল
• সুই
• থ্রেড
• মোমের কাগজ
• টেপ
• কাঁচি
• কলম এবং পেন্সিল

ধাপ 1: বেন্ড সেন্সর ট্র্যাক

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

1. শুরু করার জন্য আমরা আঙ্গুলের উপর ট্র্যাকগুলি তৈরি করতে যাচ্ছি যা বাঁক সেন্সরগুলিকে রাখবে। এই ট্র্যাকগুলি থাকার ফলে বাঁক সেন্সরগুলি সামান্য পিছনে সরে যেতে পারে এবং এগুলি আঙ্গুলের বাঁকানোর জন্য সুরক্ষিত রাখে। প্রথমে, আপনার গ্লাভস ভিতরে বাইরে উল্টান।
2. একটি বাঁক সেন্সর নিন এবং এটি আঙুলের মাঝখানে রাখুন। একটি কলম ব্যবহার করে, বেন্ড সেন্সরের রূপরেখা দিন
3. আপনার সুই দিয়ে আপনার থ্রেড স্লিপ করুন। নিজেকে একটি উদার টুকরা দিন। থ্রেডের শেষে একটি গিঁট বাঁধুন।
4. শীর্ষে এবং লাইনে শুরু করে, কেবল বেন্ড সেন্সরের চাপটি ফুঁকুন, গ্লাভের ভিতর দিয়ে সূঁচটি স্লিপ করুন এবং সমান্তরাল লাইনের মাধ্যমে এটিকে পিছনে ধাক্কা দিন। সুইটি পুরোপুরি টানুন যাতে গিঁটটি আপনার আঁকা লাইনে বসে থাকে।
5. শক্ত করে টেনে, অন্য দিকে 2-3 গিঁট তৈরি করুন এটি নিশ্চিত করবে যে থ্রেডটি বের হবে না। নিশ্চিত করুন যে এটি টাইট যাতে বেন্ড সেন্সর আপনার আঙুলের বিরুদ্ধে সুরক্ষিত থাকে
6. কয়েক সেমি রেখে থ্রেডটি কেটে ফেলুন। শেষে থ্রেড যাতে গিঁটটি পূর্বাবস্থায় না আসে।
7. আপনি যে সমস্ত আঙ্গুলগুলিতে ফ্লেক্স সেন্সর সংযুক্ত করছেন তার জন্য 2-6 ধাপ পুনরাবৃত্তি করুন যতক্ষণ না এটি তৃতীয় থেকে শেষ চিত্রের মতো দেখাচ্ছে।
8. আপনার গ্লাভসটি উল্টে দিন যাতে এটি সঠিক পথে পরিণত হয়। ট্র্যাকের মাধ্যমে আপনার বেন্ড সেন্সরগুলি স্লিপ করুন যাতে তারা আপনার হাতে সঠিকভাবে ফিট হয়

ধাপ 2: মাইক্রো: বিট সঙ্গে সিরিয়াল যোগাযোগ ব্যবহার করে

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

1. আপনার মাইক্রো: বিট প্লাগ ইন করুন
2. আপনার টার্মিনাল খুলুন
3. টাইপ করুন 'ls /dev/cu.*'
4. আপনার এমন কিছু দেখা উচিত যা '/dev/cu.usbmodem1422' এর মতো দেখাচ্ছে কিন্তু সঠিক সংখ্যাটি আপনার কম্পিউটারের উপর নির্ভর করবে
5. একবার আপনি কোড চালানোর পর, 'screen /dev/cu.usbmodem1422 115200' টাইপ করুন (আপনার নির্দিষ্ট সিরিয়াল পোর্ট নম্বর সহ) আপনাকে আপনার মাইক্রো: বিটের সিরিয়াল আউটপুট দেবে
6. আপনি কিভাবে আপনার আউটপুট ফরম্যাট করেছেন তার উপর নির্ভর করে আপনার আউটপুট উপরের ছবির মত দেখতে হবে!

ধাপ 3: সার্কিটের প্রোটোটাইপিং

আমাদের সমস্ত উপাদান একসঙ্গে সোল্ডার করার আগে আমরা সার্কিটের প্রোটোটাইপ করতে যাচ্ছি এবং আমাদের সেন্সর মানগুলি পড়তে এবং আমাদের উপাদানগুলি সঠিকভাবে কাজ করছে তা নিশ্চিত করার জন্য উদাহরণ কোডের কয়েকটি লাইন লিখব।

1. উপরের সার্কিট ডায়াগ্রাম ব্যবহার করে, জাম্পার তার, প্রতিরোধক, একতরফা এলিগেটর ক্লিপ এবং আপনার মাইক্রো: বিট ব্যবহার করে ব্রেডবোর্ডে আপনার সার্কিট প্রোটোটাইপ করুন।
2. আপনার বেন্ড সেন্সরগুলিকে 0, 1, এবং 2 পিনের সাথে সংযুক্ত করুন।
3. আমি আমার ফ্লেক্স সেন্সর পরীক্ষা করতে এই কোডটি ব্যবহার করেছি
4. তাদের রিডিং দেখতে কয়েকবার বাঁকুন এবং নিশ্চিত করুন যে তারা সঠিকভাবে কাজ করছে

কোডে, শেষ লাইন "serial.writeLine" যেখানে আমরা আমাদের সিরিয়াল আউটপুট লিখছি। আপনি চাইলে এই আউটপুটটি ফরম্যাট করতে পারেন, আমি প্রতিটি ভেরিয়েবলকে একটি কমা দিয়ে আলাদা করেছি, এবং পরে এটিকে কমাতে বিভক্ত করেছি, কিন্তু এই অংশটি আপনার উপর নির্ভর করে।

(দ্রষ্টব্য: এই পদক্ষেপটি করার পর আমি জানতে পারি যে আমার একটি বেন্ড সেন্সরের পরিবাহী পেইন্টে একটি চিপ আছে এবং তাই ভাল রিডিং পাচ্ছে না। এজন্যই কিছু ছবি আমাকে 4 টি সেন্সরের সাথে কাজ করে দেখায়। এটি বের করার পর আমি গিয়েছিলাম পয়েন্টার, মাঝামাঝি এবং রিং ফিঙ্গারে মাত্র তিনটি সেন্সরের নিচে।)

ধাপ 4: অ্যাকসিলরোমিটার এবং লাইট সেন্সর পরীক্ষা করা

এই পর্যায়ে আমি মাইক্রো: বিটে অ্যাকসিলরোমিটার এবং লাইট সেন্সর পরীক্ষা করাও বেছে নিয়েছি

1. আপনার মাইক্রো: বিটকে আপনার কম্পিউটারে সংযুক্ত করুন
2. এই কোডটি ডাউনলোড করুন
3. তারপরে আমি এই কোডের সাথে অ্যাকসিলরোমিটার, আলো এবং বেন্ড সেন্সর পরীক্ষা করেছি

(দ্রষ্টব্য: এই মুহুর্তে আমি বুঝতে পেরেছিলাম যে আপনি একই সময়ে পিন এবং লাইট সেন্সর ব্যবহার করতে পারবেন না তাই আমি আমার ফাইনালে লাইট সেন্সর ব্যবহার করিনি, কিন্তু আমি চেয়েছিলাম আপনি কীভাবে পড়তে পারেন তা দেখতে সক্ষম হবেন আপনার প্রয়োজন হলে লাইট সেন্সর!)

ধাপ 5: বেন্ড সেন্সর সোল্ডারিং

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

1. আপনার বেন্ড সেন্সর এবং টেপ নিন বা এটিতে একটি ভারী বস্তু রাখুন যাতে এটি জায়গায় থাকে।
2. আপনার 10K ওহম প্রতিরোধক নিন এবং শেষের বেশিরভাগ অংশটি কেটে ফেলুন যাতে সীসাটি বেন্ড সেন্সরের সীসা হিসাবে দীর্ঘ হয়।
3. আপনার সোল্ডারিং লোহা নিন এবং এটি প্রতিরোধক এবং বেন্ড সেন্সর সীড উভয় উপর চাপুন যতক্ষণ না তারা গরম হয়
4. আপনার ঝাল নিন এবং এটি গরম লোহার মধ্যে চাপুন কারণ এটি উপাদানগুলির উপর গলে যেতে শুরু করে। আপনি কেবল তারের আবরণ যথেষ্ট প্রয়োজন।
5. লোহা সরান। এখানে আমি অন্য বাগানের গ্লাভস লাগিয়েছি এবং সোল্ডার ঠান্ডা হওয়ার সময় রোধকারী এবং তারের জায়গায় রেখেছি।
6. লাল তারের একটি লম্বা টুকরো ক্লিপ করুন এবং এটি সোল্ডার জয়েন্টে রাখুন যেখানে প্রতিরোধক এবং বাঁক সেন্সর মিলিত হয়। ধাপ 4-5 পুনরাবৃত্তি করুন। এটি এনালগ পিন তার।
7. কালো তারের একটি লম্বা টুকরো কেটে অন্য সীসার শেষে রাখুন। ধাপ 4-5 পুনরাবৃত্তি করুন। এটি আপনার স্থল তার।
8. লাল তারের একটি দীর্ঘ টুকরো ক্লিপ করুন এবং প্রতিরোধকের অন্য প্রান্তটি ক্লিপ করুন যাতে এটি আগের দিকের মতো দীর্ঘ হয়। ধাপ 4-5 পুনরাবৃত্তি করুন। এটি আপনার বিদ্যুতের তার।
9. আপনার বেন্ড সেন্সরের বাকি অংশের জন্য 1-8 ধাপ পুনরাবৃত্তি করুন।
10. আপনার তারগুলিকে লম্বা রেখে দিন যাতে মাইক্রো: বিট এ লাগানোর পরে তাদের সঠিক দৈর্ঘ্য তৈরি করতে আপনার সাথে কাজ করার জায়গা থাকে।

ধাপ 6: মাইক্রোতে সোল্ডারিং: বিট এবং দস্তানা একত্রিত করা

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

1. সেন্সর এবং মাইক্রো রাখুন: গ্লাভসে বিট রাখুন যাতে তারগুলি কোথায় যেতে হবে এবং কতক্ষণ তারা থাকতে হবে তার ধারণা পায়।
2. পাওয়ার পিনের চারপাশে একটি লাল তার মোড়ানো। তারের কাটার জন্য তারের কাটার ব্যবহার করুন এবং খোলা ফাঁকগুলি ছেড়ে দিন যা আপনি আপনার তারের সাথে সংযুক্ত করবেন। মাটির তারের জন্যও এটি করুন।
3. আপনি যে গ্লাভসটি ব্যবহার করছেন না তার রূপরেখা দিন। এটি আমাদের সবকিছু একসঙ্গে সোল্ডার করতে এবং জিনিসগুলির দৈর্ঘ্য সঠিক করতে সাহায্য করবে। আপনি সবকিছু পিছনে করবেন যদিও দুবার চেক করুন আপনি সঠিক পথে জিনিসগুলি বিক্রি করছেন!
4. আপনার মাইক্রো রাখুন: প্রায় যেখানে আপনি এটি আপনার হাতে রাখা চান। চিহ্নগুলি স্থল ছিল এবং বিদ্যুতের তারগুলি বসেছিল।
5. জায়গায় তার, বিদ্যুৎ বা স্থল টেপ করুন।
6. জায়গায় আপনার বেন্ড সেন্সর টেপ।
7. বিদ্যুতের তার কাটুন যাতে এটি সমস্ত বিদ্যুতের লাইনে তার চিহ্ন ছাড়িয়ে যায়।
8. এই টুকরোগুলো একসঙ্গে বিক্রি করুন।
9. অন্যান্য পাওয়ার তারের জন্য এবং স্থল তারের জন্য 5-8 ধাপ পুনরাবৃত্তি করুন।
10. মাইক্রো: বিট নিন এবং নতুন সোল্ডেড তারের নিচে রাখুন। সঠিক পিনগুলিতে শক্তি এবং স্থল বিক্রি করুন।
11. এনালগ তারগুলি ক্লিপ করুন যাতে তারা পিনের শেষের দিকে যায় এবং সামনের দিকে চারপাশে মোড়ানো যায়।
12. সঠিক পিনগুলিতে তারগুলি বিক্রি করুন।
13. আমি দেখেছি যে আমার রিডিংগুলি সর্বোত্তম এবং সবচেয়ে সামঞ্জস্যপূর্ণ ছিল যখন সমস্ত তারের (পাওয়ার, গ্রাউন্ড এবং এনালগ) পিনের সামনে এবং পিছনে উভয়ই স্পর্শ করেছিল।
14. এক ট্র্যাক এক ট্র্যাক, বেন্ড সেন্সরগুলিকে আঙ্গুল দিয়ে একসাথে ধাক্কা দিন।
15. একবার সেন্সরগুলি স্থির হয়ে গেলে, গ্লাভসটি রাখুন এবং নিশ্চিত করুন যে ফিটটি সঠিক। আপনি যদি ট্র্যাক যোগ করতে চান, অথবা তাদের বসানো ঠিক করতে চান, তাহলে এখনই করুন।
16. একবার সেন্সরগুলি যেখানে আপনি চান সেখানে শুয়ে পড়ুন, মাইক্রো কোথায় বাঁধবেন তা নোট করুন: বিট জায়গায়। আপনি A এবং B বোতামের উভয় পাশে ছোট ছিদ্র ব্যবহার করতে পারেন বা পিনের জন্য গর্ত ব্যবহার করতে পারেন। আপনার হাতের জায়গায় এটি বাঁধতে আপনার সুই এবং থ্রেড ব্যবহার করুন

অভিনন্দন! গ্লাভসের জন্য হার্ডওয়্যার উপাদানগুলি এখন সম্পূর্ণ!

ধাপ 7: মাইক্রো: বিট কোড

এখন আমি আপনাকে মাইক্রো: বিট কোড দিয়ে হাঁটতে যাচ্ছি। আপনি যা চান তা এই কোডটি করার জন্য আপনাকে স্বাগত জানাই কিন্তু আমি যাচ্ছিলাম এবং সবকিছু ব্যাখ্যা করতে চেয়েছিলাম যাতে আপনি দেখতে পারেন যে আমি কী করেছি, আমি কীভাবে করেছি এবং কেন! আপনি এখানে আমার কোড খুঁজে পেতে পারেন।

1. লাইন 1-31। এখানে আমি মাইক্রো: বিট প্রিসেট ফাংশন ব্যবহার করছি।

   • A চাপলে গণনা কমে যায়, যা উপলব্ধ গ্রাফিক্সের নির্বাচন। একবার আপনি 0 এ পৌঁছে গেলে, এটি সর্বোচ্চ সংখ্যায় ফিরে যায়।
   • B টিপলে গণনা বৃদ্ধি পায়, একবার আপনি সর্বোচ্চ গ্রাফিক্সের সর্বোচ্চ সংখ্যায় পৌঁছে গেলে এটি 0 তে ফিরে যায়।
   • আপনি যে বর্তমান গ্রাফিক নির্বাচন করেছেন তা যদি বর্তমানে আঁকা হচ্ছে না, A এবং B চাপলে একই সাথে নতুন গ্রাফিক নির্বাচন করা হবে।
   • যদি আপনি যে বর্তমান গ্রাফিক সিলেক্ট করেন সেই ছবিটি যদি একইভাবে আঁকা হয়, তাহলে A এবং B টিপলে আকৃতি পূরণ হয় যদি এটি একটি ফিল করতে পারে।
   • মাইক্রো ঝাঁকানো: বিট ইরেজ ভেরিয়েবলকে 1 সেট করে যা p5.js কে ক্যানভাস মুছতে এবং কালোতে শুরু করতে বলে। এটি এক সেকেন্ডের জন্য রান বিরতি দেয় এবং তারপর এটি 0 এ সেট করে যাতে ব্যবহারকারী অঙ্কন চালিয়ে যেতে পারে।

2. লাইন 32-64 আমার ভেরিয়েবল সেট আপ করা হয়। প্রচুর ভেরিয়েবল ব্যবহার করা গুরুত্বপূর্ণ ছিল যাতে বেশিরভাগ মান হার্ডকোড না হয়। তারা গ্লাভস দিয়ে পরিবর্তন করতে পারে এবং সহজেই এক জায়গায় পরিবর্তিত হতে পারে পরিবর্তে সমস্ত জায়গায় একগুচ্ছ মান আপডেট করা যায়। আমি কয়েকটি গুরুত্বপূর্ণ বিষয় তুলে ধরব।

   • ক্যানভাসের আকার এমন একটি যা আমার ক্যানভাসের আকারের উপর নির্ভর করে আপডেট করার জন্য একটি পরিবর্তনশীল। আকৃতি উচ্চ সঙ্গে একই। যেহেতু আমি গ্রাফিক্স যোগ করি বা পরিত্রাণ পাই আমি সেই সংখ্যাটি এখানে আপডেট করতে পারি।
   • উচ্চ এবং নিম্ন ভেরিয়েবল আমাকে সেন্সরের জন্য বর্তমান উচ্চ এবং নিম্নের ট্র্যাক রাখতে এবং একটি ক্রমাগত ক্যালিব্রেটিং পরিসীমা আছে। এটি গুরুত্বপূর্ণ কারণ প্রতিটি ব্যক্তি যিনি গ্লাভস পরেন তার গতিবেগের বিভিন্ন পরিসীমা থাকবে এবং সেইজন্য তারা বিভিন্ন উচ্চতা এবং নিম্ন স্তরে পৌঁছাতে সক্ষম হবে।
3. 66-68 লাইনগুলি ফ্লেক্স সেন্সরের জন্য পিন থেকে এনালগ মানগুলিতে পড়ছে

4. রেখা 69-74 পয়েন্টার আঙুলের জন্য উচ্চ মান ক্যালিব্রেট করছে।

   • যদি একটি নতুন উচ্চতায় পৌঁছানো হয়, এটি এটিকে উচ্চ হিসাবে সেট করে।
   • সেই আঙুলের পরিসর পুনরায় গণনা করে।
   • রঙ ম্যাপিংয়ের জন্য সেই নতুন পরিসর ব্যবহার করে
5. 75-80 রেখাগুলি পয়েন্টার আঙুলের জন্য কম মান ক্যালিব্রেট করছে।
6. লাইন 81-104 মধ্যম এবং রিং আঙ্গুলের জন্য 4 এবং 5 হিসাবে একই কাজ করছে।

7. লাইন 105-107 আমার ফ্লেক্স সেন্সর মানগুলি মান মান 0-255 (অথবা colorLow to colorHigh, যদি আমি সম্পূর্ণ পরিসীমা না করছি) ম্যাপিং করছি

   • আমার সেন্সর থেকে যে সীমিত পরিসর পেয়েছিলাম তা দিয়ে মেককোড থেকে বিল্ট ইন ম্যাপ ফাংশন আমাকে একটি দুর্দান্ত ম্যাপিং দিচ্ছিল না। তাই আমি আমার নিজের ম্যাপিং ফাংশন তৈরি করেছি।
   • এখানে কিভাবে এটা কাজ করে. প্রতিটি আঙুলের ইনপুট পরিসীমা এটি দ্বারা নির্ধারিত হয় (সর্বোচ্চ মান - এটি সর্বনিম্ন মান)। রঙ পরিসীমা, যা (সর্বোচ্চ রঙের মান - সর্বনিম্ন রঙের মান) প্রতিটি আঙ্গুলের পরিসীমা দ্বারা বিভক্ত। এই সংখ্যাটি সর্বনিম্ন পূর্ণ সংখ্যার বৃত্তাকার এবং ভাগফল।
   • (প্রকৃত সেন্সর মান - সর্বনিম্ন সেন্সর মান) আপনাকে পরিসরের মধ্যে মান দেয়। আমরা উপরে পাওয়া ভাগফল দ্বারা এটি গুণ করে এবং সর্বনিম্ন রঙের মান যোগ করলে আপনাকে সেন্সর থেকে, রঙের মধ্যে, রঙের পরিসরের মধ্যে একটি ম্যাপ করা মান দেয়।
8. লাইন 109 পিচ মান (উপরে এবং নিচে) পড়ছে।
9. 110-115 লাইনগুলি এই মানের জন্য উচ্চ এবং নিম্নকে ক্যালিব্রেট করছে
10. লাইন 116 রোল মান (বাম এবং ডান) পড়ছে।
11. লাইন 117-122 এই মান জন্য উচ্চ এবং নিম্ন calibrating হয়
12. লাইন 123-126 পিচ এবং রোল মানগুলি ক্যানভাসের আকারে মানচিত্র করে এবং তাদের পুরো সংখ্যায় গোল করে।
13. লাইন 127 সিরিয়াল আউটপুটে ভেরিয়েবল লিখে সিরিয়াল রাইটলাইন ব্যবহার করে, প্রতিটি মানকে কমা এবং স্পেস দ্বারা আলাদা করে ",", পরবর্তীতে বিশ্লেষণ করতে।

একবার আপনার কাছে আপনার পছন্দ মতো কোড হয়ে গেলে, এটি ডাউনলোড করুন এবং আপনার ডাউনলোড থেকে এটিকে আপনার মাইক্রো: বিট (আপনার ফাইন্ডারের বাম পাশে "লোকেশন" এ দেখতে হবে) কোডটি মাইক্রো: বিটে আপলোড করার জন্য টেনে আনুন।

ধাপ 8: P5.js এর সাথে সিরিয়াল যোগাযোগ

P5.js এর সাথে সিরিয়ালভাবে যোগাযোগ করার জন্য, আমাদের একটি অতিরিক্ত টুল প্রয়োজন। সিরিয়াল যোগাযোগের পর্দার পিছনে কী যায় সে সম্পর্কে আরও জানতে, আমি এই নিবন্ধটি পড়ার পরামর্শ দিই।

1. এই লিঙ্ক থেকে p5.js অ্যাপের একটি সংস্করণ ডাউনলোড করুন। আমার আলফা 6 সংস্করণ আছে কিন্তু যে কোন কাজ করবে।
2. ক্রমিকভাবে যোগাযোগের জন্য এই p5.js টেমপ্লেটটি ব্যবহার করুন। এটি সেট আপ করতে 12 নম্বরে পোর্টনেমের জন্য আপনার সঠিক সিরিয়াল পোর্টের নাম সন্নিবেশ করান। এই নামটি আমরা ধাপ 2 এ বের করেছি।
3. আপনার মাইক্রো: বিটকে আপনার কম্পিউটারে সংযুক্ত করুন
4. P5.js সিরিয়াল অ্যাপটি খুলুন।
5. পোর্ট তালিকা থেকে আপনার পোর্ট নির্বাচন করুন এবং অন্য কিছু করবেন না। এমনকি খোলা চাপুন না! শুধু আপনার তালিকা থেকে আপনার পোর্ট নির্বাচন করুন।
6. P5.js সিরিয়াল টেমপ্লেটে রান টিপুন। আপনি এটি খোলা দেখতে সক্ষম হওয়া উচিত, এবং এটি আপনাকে শূন্য মান পড়বে কারণ আমরা এখনও আমাদের সিরিয়াল আউটপুট বিশ্লেষণ করার জন্য কোড লিখিনি।

এখন আমরা আমাদের মাইক্রো: বিট থেকে p5.js পর্যন্ত ক্রমানুসারে যোগাযোগ করতে পারি!

ধাপ 9: P5.js কোড

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

1. আমি আগের ধাপে উল্লেখ করেছি, নিশ্চিত করুন যে লাইন 12 এ পোর্টনাম আপনার নির্দিষ্ট কম্পিউটার পোর্টের নাম।
2. সেটআপ () ফাংশনে, 32-33 লাইনে, আমি ক্রিয়েট গ্রাফিক্সের সাথে বাম এবং ডান বাফার যুক্ত করেছি, আমি ক্যানভাসকে আলাদা করার জন্য এটি করেছি যাতে একটি অংশ অঙ্কনের জন্য ব্যবহৃত হয়, এবং অন্য অংশটি নির্দেশ প্রদর্শন করতে পারে এবং কোন গ্রাফিক দেখাতে পারে আপনি দেখছেন বা স্ক্রোল করছেন।
3. ড্র () ফাংশনটি ফাংশনগুলিকে কল করে যা আমি বাম বাফার এবং ডান বাফার আলাদাভাবে তৈরি করেছি। এটি প্রতিটি বাফারের উপরের বাম কোণটি কোথায় শুরু হয় তা নির্ধারণ করে।
4. DrawRightBuffer () ফাংশন নির্দেশাবলী এবং গ্রাফিক্স নির্বাচনের জন্য সমস্ত পাঠ্য প্রদর্শন করে

5. DrawLeftBuffer () ফাংশন সব গ্রাফিক্স প্রদর্শন করে।

   • লাইন 93 এলোমেলোভাবে আলফা মানের জন্য একটি মান তৈরি করে। এটি তাই সব রং বিভিন্ন স্বচ্ছতা মান এটি আরো আকর্ষণীয় করতে। আমার যদি 4 টি ফ্লেক্স সেন্সর থাকত তাহলে আমি এই জন্য চতুর্থটি ব্যবহার করতাম!
   • লাইন 94 ফ্লেক্স সেন্সর দ্বারা নির্ধারিত r, g, b মানগুলিতে স্ট্রোক মান নির্ধারণ করে
   • আপনার মাউস ব্যবহার করে গ্লাভস ছাড়া গ্লাভস কিভাবে কাজ করে তা পরীক্ষা করার জন্য লাইন 96-102 পরীক্ষা করা যাবে না। বাকি ফাংশন থেকে গ্রাফিক্স দিয়ে লাইন 102 প্রতিস্থাপন করুন।
6. 104-106 ক্যানভাস মুছে ফেলুন যখন ক্যানভাসের ব্যাকগ্রাউন্ড কালো করে হাত কাঁপানো হয়
7. 108-114 যখন A+B চাপলে এবং নির্বাচন করা হয় এবং বর্তমান আকৃতি একই থাকে তখন আকারের ভরাট নিয়ন্ত্রণ করে
8. 117-312 যেখানে গ্রাফিক্স প্রদর্শিত হয়। এটি হল কোডের একটি বড় অংশ এবং সৃজনশীল হওয়ার অংশ! কিভাবে আকারগুলি নিয়ন্ত্রণ করতে হয় তা আরও ভালভাবে বোঝার জন্য আমি p5.js রেফারেন্স দেখার পরামর্শ দিই। আমি x, y অবস্থান নিয়ন্ত্রণ করতে এবং আকার এবং গ্রাফিক্সের আকার পরিবর্তন করতে রোল এবং পিচ ব্যবহার করেছি এবং যেমনটি আমি আগে উল্লেখ করেছি। রঙ নিয়ন্ত্রণ করতে সেন্সর বাঁকুন। এখানে আপনি সৃজনশীল হতে পারেন! P5.js যা অফার করে তা দিয়ে খেলুন এবং নিয়ন্ত্রণ করতে আপনার নিজের মজার গ্রাফিক্স নিয়ে আসুন! এখানে আমি কারেন্টশেপের বর্ণনাও সেট করেছি যা ডান বাফারে প্রদর্শিত হয়।
9. 318-460 আমি নির্বাচিত শেপের জন্য বর্ণনা সেট করেছি।

10. লাইন 478-498 হল serialEvent () ফাংশন। এখানেই আমরা সিরিয়াল ডেটা পাই।

    • 485-486 লাইনে আমি পূর্ববর্তী রোল এবং পিচ মানগুলিতে প্রোল এবং পিচ (পূর্ববর্তী রোল এবং পিচ) সেট করেছি।
    • লাইন 487 এ আমি "," তে ডেটা বিভক্ত করেছি। আমি এটা করি কারণ আমি কমা দ্বারা ডেটা আলাদা করার জন্য লিখেছি। আপনি এখানে আপনার ভেরিয়েবলগুলিকে আলাদা করে রাখবেন। এই ভেরিয়েবল সংখ্যা অ্যারে মধ্যে রাখা হয়।
    • তারপরে 488-496 লাইনে আমি ভেরিয়েবলগুলিকে অ্যারের সংশ্লিষ্ট উপাদানে সেট করেছি এবং সেগুলিকে একটি স্ট্রিং থেকে একটি সংখ্যায় অনুবাদ করেছি। আমি গ্রাফিক্স নিয়ন্ত্রণ করতে drawLeftBuffer () ফাংশন জুড়ে এই ভেরিয়েবল ব্যবহার করি।

যে কোড কোড আপ এবং প্রকল্প শেষ! এখন আমরা কাজ করতে গ্লাভস কাজ দেখতে পারেন।

ধাপ 10: চূড়ান্ত পণ্য

এখানে সমাপ্ত গ্লাভসের কিছু ছবি এবং সেইসাথে এটি তৈরি করা কিছু শিল্পকর্ম! ডেমো ভিডিও দেখুন এটি কার্যকরী দেখতে!