P5js দিয়ে কীভাবে একটি অঙ্কন অ্যাপ তৈরি করতে হয়

সাপ্তাহিক কোডিং চ্যালেঞ্জের 5 তম সপ্তাহের থিমটি হ'ল:

একটি অঙ্কন অ্যাপ্লিকেশন তৈরি করুন

এটি # উইকলি কোডিংচ্যালেনজ প্রোগ্রামে আমরা তৈরি করব প্রথম অ্যাপ্লিকেশন। এতক্ষণ আমরা ছোট ছোট প্রকল্পগুলি তৈরি করেছি যাতে আপনি আমাকে জিজ্ঞাসা করেন তবে তা বেশ আকর্ষণীয়!

এই নিবন্ধে, আমরা অঙ্কন অ্যাপ্লিকেশন তৈরি করতে p5js, একটি অঙ্কন গ্রন্থাগার ব্যবহার করব:

কোডপেনের এই পথে:

আপনি যদি p5js এবং এর বৈশিষ্ট্যগুলি সম্পর্কে আরও জানতে চান তবে আপনি তাদের অফিসিয়াল ওয়েবসাইটটি দেখতে পারেন। মূলত, আমি এটি ব্যবহার করি কারণ এটি একটি ঝরঝরে API সরবরাহ করে ব্রাউজারের ক্যানভাস উপাদানটির উপরে খুব ভাল কাজ করে।

এইচটিএমএল

আপনি উপরের উদাহরণে দেখতে পাচ্ছেন, আমাদের পর্দার বাম দিকে একটি .সাইডবার রয়েছে। আমরা আমাদের "সরঞ্জাম" - একটি রঙ চয়নকারী, ওজন নির্বাচনকারী এবং "মুছুন" বোতামটি (ট্র্যাস আইকন ক্যান করতে পারি) রাখতে যাচ্ছি: এতে:

সিএসএস

সিএসএস ব্যবহার করে আমরা .সাইডবার এবং এর মধ্যে থাকা সমস্ত কিছুই বাম দিকে সরিয়ে নিচ্ছি। আমরা এটি আরও সুন্দর দেখানোর জন্য এটি কিছুটা স্টাইল করতে যাচ্ছি (বিশেষ কিছু নয়, সাধারণ সিএসএস):

এখন গুরুত্বপূর্ণ অংশে ...

জেএস / পি 5 জেএস

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

দুটি গুরুত্বপূর্ণ ফাংশন রয়েছে যা আমরা p5js লাইব্রেরিতে ব্যবহার করব:

  • প্রোগ্রাম শুরু হওয়ার পরে সেটআপ - বলা হয়। এটি স্ক্রিনের আকার এবং পটভূমির রঙের মতো প্রাথমিক পরিবেশগত বৈশিষ্ট্যগুলি সংজ্ঞায়িত করে।
  • অঙ্কন - সেটআপ () পরে সরাসরি বলা হয়। অঙ্কন () ফাংশন অবিচ্ছিন্নভাবে তার ব্লকটিতে থাকা কোডের লাইনগুলি কার্যকর করে।

আমরা এগিয়ে যাওয়ার আগে আসুন এক মুহুর্তের জন্য থামুন এবং আমরা কী অর্জন করতে চাই তা দেখুন।

মূলত, আমরা ক্যানভাসে একটি মাউস-চাপা ইভেন্টলিস্টনার যুক্ত করতে চাই যা মাউসআইপ্রেসড কী টিপানো অবধি একটি আকার আঁকবে।

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

যেহেতু আমরা প্রতিবার এই আকারটি আবার আঁকতে চাই, আসুন অঙ্কন পদ্ধতিতে এই কোডটি যুক্ত করুন:

আপনি দেখতে পাচ্ছেন, p5js এর একটি মাউসআইপ্রেসড ফ্ল্যাগ রয়েছে যা আমরা যখন মাউস বোতাম টিপতে হয় তা জানাতে ব্যবহার করতে পারি।

এখন পর্যন্ত সবকিছু ঠিকঠাক দেখাচ্ছে তবে একটি বড় সমস্যা আছে is মাউস বোতামটি ছেড়ে দেওয়ার সাথে সাথে অন্য আকারটি আঁকতে চেষ্টা করার সাথে সাথে পূর্ববর্তী আকারের শেষ পয়েন্টটি নতুন আকারের প্রথম বিন্দুতে সংযুক্ত হবে। এটি অবশ্যই আমরা চাই না তাই আমাদের দৃষ্টিভঙ্গিটি কিছুটা পরিবর্তন করা দরকার।

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

আমি উপরের কোডে কিছু মন্তব্য রেখেছি, সেগুলি নিশ্চিত করে দেখুন।

মাউসপ্রেসড ফাংশনটি প্রতিবার মাউস বোতাম টিপলে একবার বলা হয় - p5js stuff!

দুর্দান্ত! এখন আমরা আমাদের ক্যানভাসে কাস্টম আকারগুলি আঁকতে পারি!

আপনাকে শেষ কাজটি করতে হবে হ'ল এইচটিএমএলে তৈরি করা বোতামগুলি লিঙ্ক করা এবং আকারটি স্টাইল করার জন্য সেগুলিতে মানগুলি ব্যবহার করুন:

এবং এটি দিয়ে আমরা আমাদের ছোট অ্যাপ্লিকেশনটি শেষ করেছি! হ্যাঁ!

সমস্ত জেএস কোড

এছাড়াও, এই জেএস ফাইলটি আমদানির আগে আপনার এইচটিএমএল-তে p5js ফাইলটি আমদানি করতে ভুলবেন না।

উপসংহার

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

আপনি যদি চিত্র (.png বা .jpg) হিসাবে অঙ্কনটি সংরক্ষণ করতে পারেন? । (আপনি p5js লাইব্রেরিতে এটি করতে পারেন)।

আমরা বর্তমানে কেবল মাউসের ইভেন্টগুলি পর্যালোচনা করছি। স্পর্শ ইভেন্টগুলি খুঁজে বের করে আপনি এটি মোবাইলে কাজ করতে পারেন? আকাশটি এই অ্যাপটিতে যোগ করা যায় এমন পরিমাণের সাথে সীমাটি!

আপনি কি তৈরি করতে যাচ্ছেন তা দেখতে আমি পছন্দ করব! আপনার টুইটের সাথে আমাকে @ ফ্লোরিনপপ ১70০৫!

আপনি সাপ্তাহিক কোডিং চ্যালেঞ্জ প্রোগ্রামের অন্য একটি চ্যালেঞ্জ উপভোগ করতে পারেন। এটি এখানে দেখুন।

পরবর্তী সময় পর্যন্ত! মজা কোডিং আছে!

মূলত www.florin-pop.com এ প্রকাশিত।