کتابخانه P5.js و برنامه نویسی یک ربات انیمیشن حساس به صدا – راهنمای مقدماتی
جاوا اسکریپت زبان اینترنت است. کار در حوزه توسعه فرانتاند بدون جاوا اسکریپت امری ناممکن تلقی میشود. با این وجود، استفاده از ساختار این زبان برای افراد مبتدی و به خصوص کودکان ممکن است چالشبرانگیز باشد.
برای افراد کاملاً مبتدی حتی نصب و راهاندازی یک سرور محلی در مرورگر نیز ممکن است مانع بزرگی به حساب آید. چه میشود اگر روش برای ساخت چیز جالبی با جاوا اسکریپت ارائه شود که نیاز به نصب هیچ چیز نداشته باشد؟ پاسخ این است که چنین کاری صورت گرفته و نام آن چیز P5.js است. P5.js یک کتابخانه کدنویسی است که بر اساس ذهنیت خلاقانهای طراحی شده است.
در این نوشته یک ربات انیمیشنی حساس به صدا را با استفاده از برخی مفاهیم ساده کدنویسی میسازیم.
کتابخانه P5.js چیست؟
کتابخانه P5.js توسط یک هنرمند لسآنجلسی به نام لارِن مککارتی (Lauren MacCarthy) ایجاد شده است تا پلتفرمی مشابه Processing برای بیان هنری باشد. ابزارهای روشن همراه با راهنماهای واضح و مستندات مرجع باعث شده است که این کتابخانه برای افراد مبتدی کاملاً مناسب باشد.
اگر میخواهید انیمیشن، موسیقی یا بازیهای ساده بسازید و یا حتی اگر میخواهید به سختافزار خارجی وصل شوید، P5.js میتواند به شما کمک کند.
ویرایشگر P5.js
در آغاز کار باید پنجره مرورگر خود را باز کنید و به وبسایت ویرایشگر p5.js بروید. قبل از هر کاری دو مرحله اختیاری وجود دارد:
1. شما باید در وبسایت P5.js ثبت نام کنید تا بتوانید طرحهای خود را ذخیره نمایید و از این رو این کار توصیه میشود. ثبت نام رایگان است و میتوانید در صورت تمایل از حساب گوگل یا گیتهاب خود استفاده کنید.
2. روی آیکون تنظیمات (چرخدنده) در گوشه راست-بالای صفحه کلیک کنید. در این بخش میتوانید قالب و اندازه متن تغییر دهید که برای علاقهمندان قالبهای تیره گزینهای ایدهآل است.
ویرایشگر P5.js ترکیبی از یک ویرایشگر کد، کنسول و پنجره خروجی در یک فضای واحد است. بنابراین دو کارکرد قبلاً برای شما راهاندازی شدهاند.
مبانی P5.js
هر طرح در P5.js با دو عنصر آغاز میشود: تابع ()setup و تابع ()draw. افرادی که قبلاً برای آردوینو برنامهنویسی کردهاند، با این دو تابع آشنا هستند:
function setup() { createCanvas(500, 500); }
تابع ()setup در آغاز برنامه اجرا میشود. در این زمان setup یک بوم مربعی با ابعاد 400 در 400 پیکسل میسازد. برای این که محیط بزرگتری برای کار داشته باشیم، این اندازه را به صورت (500، 500) تغییر میدهیم.
Setup تنها یکبار اجرا میشود و برای ایجاد بخشهای مورد نیاز برنامه همراه با مقادیر اولیه مورد استفاده قرار میگیرد.
function draw() { background(220); }
متد ()draw روی هر فریم فراخوانی میشود. کارکرد آن تا حدود زیادی شبیه تابع loop در آردوینو یا تابع update در موتور Unity 3D است. هر چیزی که لازم باشد در طرح شما تغییر یابد، در این بخش صورت میگیرد. فعلاً پسزمینه در هر فریم مجدداً ترسیم میشود. در بخش فوقانی دو آیکون میبینید که play و stop هستند. روی Play کلیک کنید.
برنامه ما تا به اینجا یک بوم 500×500 با پسزمینه خاکستری است.
ایجاد یک شکل
کار با شکلها در P5.js کمی متفاوت است. برای ایجاد یک بیضی ساده باید کد زیر را در متد ()draw یعنی درست زیر آن جایی که رنگ پسزمینه تعیین شده است، اضافه کنید:
function draw() { background(220); ellipse(250,250,50) }
متد ()ellipse چند آرگومان دارد.
دو آرگومان نخست موقعیت X و Y روی بوم هستند. از آنجا که بوم 500 پیکسل عرض دارد تعیین این دو مقدار برابر با 250 باعث میشود که مرکز بیضی در نقطه مرکزی بوم قرار گیرد. آرگومان سوم عرض دایره است که در این مورد 50 پیکسل است.
بنابراین یک پسزمینه و یک دایره داریم؛ اما ظاهر آن چندان جالب نیست و اینک زمان اصلاح آن فرا رسیده است.
افزودن استایلهای مختلف
کار خود را با تغییر دادن رنگ پسزمینه آغاز میکنیم. عدد درون پرانتز نشاندهنده مقدار خاکستری است. بنابراین 0 نماینده رنگ سیاه و 255 رنگ سفید است و اعداد بین این دو مقدار سایههای مختلفی از رنگ خاکستری هستند. برای این که پسزمینه سیاه باشد، باید این مقدار را برابر با 0 قرار دهیم:
function draw() { background(0); ellipse(250,250,50); }
اکنون وقتی روی Play کلیک کنیم، پسزمینه سیاه خواهد شد. برای این که دایره نیز رنگی داشته باشد، از مقادیر RGB (اختصاری برای سه رنگ قرمز، سبز و آبی) استفاده میکنیم. در بخش ابتدایی اسکریپت، درست پیش از تابع setup متغیرهایی ایجاد میکنیم تا این سه مقدار را ذخیره کنیم:
var r، g، b;
در تابع setup مقدار r را برابر با 255 قرار میدهیم و به دو متغیر دیگر مقدار 0 میدهیم. بدین ترتیب ترکیب رنگی RGB ما قرمز روشن خواهد بود.
r=255; g=0; b=0;
برای اعمال این رنگ روی دایره باید از متد ()fill در متد draw در بخش قبل از ترسیم دایره استفاده کنیم:
fill(r،g،b); ellipse(250،250،50);
اکنون روی Play کلیک کنید تا ببینید که دایره به رنگ قرمز و پسزمینه به رنگ سیاه درمیآید:
ساخت یک دایره، شروع خوبی محسوب میشود؛ اما افزودن تعاملپذیری باعث میشود برنامه ما بسیار جذابتر شود.
کلیک کردن برای تغییر رنگ
اضافه کردن کدی که با کلیک ماوس فعال شود در P5.js کاری بسیار آسان محسوب میشود.
کافی است یک تابع جدید زیر متد ()draw ایجاد کنید:
function mousePressed() { r = random(256); g = random(256); b = random(256); }
شنونده (listener) به نام ()mousePressed منتظر فشرده شدن ماوس میماند تا کد درون پرانتز را اجرا کند. تابع random() یک عدد تصادفی بین 0 و عدد مفروض بازمیگرداند. در این مورد میخواهیم مقادیر متغیرهای r، g و b در هر بار کلیک ماوس بین 0 تا 255 تعیین شوند.
کد را مجدد اجرا کرده و چند بار کلیک کنید. میبینید که هر بار رنگ دایره تغییر مییابد.
اینک انیمیشن ما به کلیکهای ماوس حساس است؛ اما آیا میتوانیم آن را نسبت به صدای کاربر نیز حساس سازیم؟
راهاندازی کنترل صوتی
استفاده از میکروفن سیستم در کتابخانه صوتی P5P5.js کار سادهای است. در بخش بالای اسکریپت یک متغیر جدید به نام mic ایجاد کنید:
var r، g، b; var mic;
خطوط زیر را به تابع ()setup خود اضافه کنید و mic را به ورودی صوتی اختصاص دهید:
mic = new p5.AudioIn() mic.start();
زمانی که روی Play کلیک کنید یک کادر گفتگو باز میشود که از شما مجوز دسترسی به میکروفن داخلی سیستم را تقاضا میکند:
با کلیک روی Allow این مجوز را بدهید. بسته به این که از چه مرورگری استفاده میکنید، احتمالاً با کلیک روی یک کادر تأیید میتوانید کاری کنید که این انتخاب در دفعههای بعدی در خاطر سیستم بماند و مجدداً سؤال نکند. این میکروفن راهاندازی شده و نوبت به استفاده عملی از آن رسیده است.
مقیاسبندی بر اساس حجم صدا
برای استفاده از حجم صدای میکروفن به عنوان یک مقدار در برنامه باید آن را در یک متغیر ذخیره کنیم به این منظور متد ()draw را طوری تغییر دهید که به شکل زیر درآید:
function draw() { var micLevel = mic.getLevel(); background(0); fill(r,g,b); ellipse(250,250,50 + micLevel * 2000); }
در آغاز تابع، یک متغیر جدید به نام micLevel ایجاد میشود و به شدت صوتی میکروفن موجود انتساب مییابد. بیضی ما دارای عرض ثابت 50 پیکسل بود. اینک 50 پیکسل کمینه عرض است و بسته به حجم صدای ورودی میکروفن عرض بیضی در هر فریم اضافه میشود. تعداد مضربهای micLevel بسته به حساسیت میکروفن متفاوت خواهد بود.
استفاده از مقادیر بالاتر مانند 5000 باعث خواهد شد که تغییرات شدیدتری را مقیاس شاهد باشیم.
نکته: اگر این وضعیت برای شما کار نمیکند، میکروفن شما ممکن است به درستی نصب نشده باشد. مرورگر از میکروفن پیش فرض سیستم استفاده میکند و ممکن است لازم باشد تنظیمات صوتی سیستم را بازبینی کنید.
ساخت ربات
اکنون همه ابزارهای مورد نیاز برای ساخت ربات فراهم شده است. ابتدا بیضی که ساختهایم را جابهجا میکنیم و یکی دیگر اضافه میکنیم تا به دو چشم تبدیل شوند.
ellipse(150،150،50 + micLevel * 2000); ellipse(350،150،100 +micLevel * 2000);
دقت کنید که «teeth» (دندانها) یک سری از مستطیلها هستند که از پایین صفحه به سمت بالا گسترش یافتهاند. متد ()rect نیازمند یک پارامتر اضافی برای عرض ثابت خود است:
rect(0، 500،100، -100 -micLevel * 5000) rect(400، 500،100، -100 -micLevel * 5000); rect(100، 500،100، -100 -micLevel * 3000); rect(300، 500،100، -100 -micLevel * 3000); rect(200، 500،100، -100 -micLevel * 1000);
این بار میخواهیم که ارتفاع دندانها تغییر یابد و یک جلوه لبخند با حساسیتهای مختلف ایجاد شود. ارتفاع کمینه برابر با 100- است که به انتهای تحتانی بوم میرسد و از این رو micLevel باید عددی منفی باشد.
با کلیک روی Play یک چهره تقریباً کامل شده از ربات را شاهد خواهید بود.
این بار نیز ممکن است نیازمند دستکاری و تنظیم عدد مضرب باشید تا بهترین نتیجه را به دست آورید.
افزودن تنظیمات نهایی
با استفاده از چند فراخوانی ()ellipse دیگر میتوان برای چشمهای ربات مردمک نیز گذاشت. همچنین با استفاده از ()fill میتوان رنگ آنها را تعیین کرد. این تغییرات باید در متد ()draw در زیر teeth اضافه شوند.
fill(255); ellipse(150،150،20 + micLevel * 1000); ellipse(345،150،30 + micLevel * 1000);
در نهایت باید کمی تعریف کلی چهره را بهبود بخشیم و بدین منظور وزن عرض را در تابع ()setup افزایش میدهیم.
strokeWeight(5);
بدین ترتیب کار ما پایان یافته است:
اگر هر بخش از این کد کار نکند باید آن را به طور کامل بررسی کنید. کد کامل به صورت زیر است:
//Creating variables for the RGB colors and the microphone var r, g, b; var mic; function setup() { createCanvas(500, 500); //initial RGB values r = 255; g = 0; b = 0; //setting the stroke weight strokeWeight(5); //assinging the mic variable to the AudioIn method and starting it mic = new p5.AudioIn(); mic.start(); } function draw() { //at the start of each loop, update the micLevel variable var micLevel = mic.getLevel(); //also update the background background(0); fill(255); text("CLICK OR SPEAK", 390, 15); //assign the fill color for everthing except the pupils, and draw them fill(r, g, b); ellipse(150, 150, 50 + micLevel * 2000); ellipse(350, 150, 100 + micLevel * 2000); rect(0, 500, 100, -100 - micLevel * 5000); rect(400, 500, 100, -100 - micLevel * 5000); rect(100, 500, 100, -100 - micLevel * 3000); rect(300, 500, 100, -100 - micLevel * 3000); rect(200, 500, 100, -100 - micLevel * 1000); //change fill value for the pupils, and draw them fill(255); ellipse(150, 150, micLevel * 1000 + 20); ellipse(345, 150, micLevel * 1000 + 30); } //use the mousePressed function to assign random color values on a mouse click function mousePressed() { r = random(256); g = random(256); b = random(256); }
سخن پایانی
در این راهنمای مقدماتی برخی مفاهیم اولیه P5.js بررسی شد و میزان سادگی و سطح خلاقیت آن را نشان دادیم. البته این پروژه تنها بخش محدودی از قابلیتهای کتابخانه P5.js را بازتاب میدهد. صرف زمان برای ایجاد کارهای هنرمندانه با P5.js باعث میشود که با طرز فکر یک برنامهنویس و ساختار جاوا اسکریپت آشنا شود. اینها همگی مهارتهای مهمی در مسیر یادگیری واقعی جاوا اسکریپت و ارتقای سطح دانش برنامهنویسی محسوب میشوند.
اگر این مطلب برایتان مفید بوده است، آموزشهای زیر نیز به شما پیشنهاد میشوند:
- مجموعه آموزشهای برنامهنویسی
- آموزش جاوا اسکریپت (JavaScript)
- مجموعه آموزشهای طراحی و برنامهنویسی وب
- مجموعه آموزشهای طراحی سه بعدی و متحرک سازی
- آموزش انیمیشن دو بعدی با Anime Studio
- آموزش ساخت انیمیشن دوبعدی با Photoshop
==