آموزش p5.js و فراتر از آن!

فهرست

چرا آموزش p5.js؟

چند سالی هست که دارم با جاوااسکریپت و p5.js سر و کله می‌زنم و اخیراً این ایده به ذهنم رسید که چیزایی که تا الان یاد گرفتمو در قالب مجموعه‌ای از نوشته‌ها تحت عنوان «آموزش p5.js» توی سایتم منتشر کنم. البته من واقعاً هنوز در حال یادگیری هستم، اما فک می‌کنم چیزایی که تا الان یاد گرفتم هم ارزش دارن که با کسایی که اول این مسیر هستن به اشتراک گذاشته بشن. ضمن این که هیچ آموزش p5.js خوبی به زبون فارسی توی اینترنت پیدا نکردم.

یادداشت‌هایی که این جا می‌نویسم موضوعشون فقط آموزش p5.js نیست: قراره درباره مبانی برنامه‌نویسی، مقدار زیادی جاوااسکریپت، الگوریتم‌های مختلف و در نهایت ـ موضوع مورد علاقه خودم ـ ینی هنر مولد یا Generative Art کلی چیزمیز بخونید.

با یاد گرفتن یه زبان برنامه‌نویسی جدید، دنیایی از موقعیت‌های جدید روبروی شما قرار می‌گیره، چون می‌تونید با کامپیوتر صحبت کنید و ازش بخواید کارهایی رو براتون انجام بده.

جاوااسکریپت چیه؟

بعضیا ممکنه جاوااسکریپت رو با جاوا اشتباه بگیرن؛ این دو تا، چیزهای متفاوتی هستن و به غیر از تشابه اسمی هیچ ارتباطی به همدیگه ندارن. جاوااسکریپت زبونیه که برای برنامه‌نویسی صفحات وب استفاده می‌شه، با این که کاربرد اصلیش همین برنامه‌نویسیِ وب و فرانت‌انده و بیشتر افراد هم برای همین جاوااسکریپت یاد می‌گیرن، اما محیط‌های زیادی هستن که از این زبون پشتیبانی می‌کنن و همین باعث شده تا بشه کارای زیادی باهاش انجام داد: وقتی جاوااسکریپت یاد بگیرید، می‌تونید برنامه‌نویسی سرور انجام بدید، اپلیکیشن موبایل و دسکتاپ بنویسید و حتی بازی بسازید یا هوش مصنوعی کار کنید؛ همه این کارها رو می‌تونید با یاد گرفتن فقط یک زبون برنامه‌نویسی انجام بدید و برای همینه که جاوااسکریپت این قدر جذابه.

دوره‌های برنامه‌نویسی معمولاً تمرکزشون روی سینتکس و روش‌های حل مسئله‌س؛ خیلیا رو دیدم که حتی قبل از به پایان رسوندن این دوره‌ها کلاً بی‌خیال برنامه‌نویسی می‌شن؛ برای همین توی این یادداشت‌ها سعی می‌کنم تجربه‌هامو به اشتراک بذارم و با استفاده از کتابخونه p5.js، برنامه‌نویسی جاوااسکریپت رو با ایجاد تصاویر آموزش بدم؛ یعنی شما که در حال یادگیری جاوااسکریپت هستید، بیشتر مفاهیم رو با ساختن شکل و انیمیشن و سایر عناصر گرافیکی یاد می‌گیرید؛ امیدوارم این بازخورد گرافیکی باعث افزایش انگیزه برای یادگیری بشه؛ اگه اولین باره که دارید چیزی درباره برنامه‌نویسی یاد می‌گیرید، این طوری از نقطه خیلی خوبی وارد دنیای برنامه‌نویسی می‌شید.

p5.js چیه؟

p5.js کتابخونه‌ایه که با استفاده جاوااسکریپت نوشته شده و می‌شه باهاش برنامه‌هایی نوشت که تصویر و انیمیشن تولید می‌کنن؛ من چند سالیه که دارم ازش استفاده می‌کنم و هنوز برام جذابه. قدیما که دانشکده معماری درس می‌خوندم، وقتی یه ایده‌ای برای طراحی داشتم سریع یه کاغذ و قلم برمی‌داشتم و خیلی ساده روی کاغذ می‌کشیدمش؛ این کار بهم کمک می‌کرد که جنبه‌های مختلف اون ایده رو بررسی کنم و توسعه بدم؛ به این کار می‌گفتیم «اسکیس» زدن؛ ایده اصلی p5.js هم همینه که یه برنامه‌نویس با نوشتن حداقل کد، خیلی سریع به اون تصویری که توی ذهنشه برسه و بعد روی اون ایده کار کنه؛ مثلاً چند خط کد بنویسه و دایره روی مانیتور، دنبال ماوس حرکت کنه؛ به این کار اصطلاحاً می‌گیم «اسکیس زدن با کد».

p5.js چه کاربردهایی دارده؟

داده‌نمایی یا Data Visualization
تولید تصاویر مولد یا Generative Art
ساختن انیمیشن در صفحات وب
ساختن وبسایت
ساختن بازی

من شخصاً چون به موضوع Generative Art علاقه داشتم رفتم سراغ یادگیری p5.js و بعد که یاد گرفتم، شروع کردم به تصویر ساختن و پروژه‌های شخصی انجام دادن؛ اما یادگیری p5.js به درد همه کسایی می‌خوره که به گرافیک و برنامه‌نویسی علاقه دارن و مشتاقن ببینن که چطوری می‌شه اینارو با هم ترکیب کرد و چیزایی مثل تصویر، نمودار و انیمیشن درست کرد. اگه شما هم مثل من فکر می‌کنید که ساختن یه اثر هنری با کد، کار جذاب و هیجان‌انگیزیه توصیه من اینه که مبانی برنامه‌نویسی رو توی p5.js یاد بگیرید و بعد بر اساس اهدافتون، مسیرتون رو انتخاب کنید و پیش‌رفت کنید. اگه موافق هستید، شروع کنیم.

چه چیزهایی لازم داریم؟

خوبی یاد گرفتن یه زبون برنامه‌نویسی اینه که واقعاً به چیزای خیلی خفنی نیاز ندارید تا یادگیری رو شروع کنید. توی این دوره فرض من اینه که شما پای یه کامپیوتر دسکتاپ نشستید، به اینترنت دسترسی دارید و مثل من دوست دارید موقع کار یه لیوان قهوه داغ دم دستتون باشه. ضمناً اگه هیچ پیش‌زمینه‌ای از برنامه‌نویسی ندارید نگران نباشید، قرار نیست درباره چیزهای خیلی پیچیده و سخت صحبت کنیم و بیشتر، موضوعاتِ اساسی مورد بحث قرار می‌گیرن. خیلی‌ها اعتقاد دارن یاد گرفتن زبان برنامه‌نویسی از یاد گرفتن زبان خارجی راحت‌تره، پس اصلاً نگران نباشید.

برای شروع باید یه ویرایشگر کد نصب کنیم. برنامه‌های ویرایشگر کد مثل برنامه‌های ویرایشگر متن هستن (مثلاً نوت‌پد)، با این تفاوت که قابلیت‌های ویژه‌ای برای نوشتن و ویرایش کد دارن که جلوتر می‌بینیم؛ می‌تونید با هر برنامه‌ای که راحت‌تر هستید کار کنید چون تعدادشون خیلی زیاده. من از VS Code استفاده می‌کنم که متن‌باز و سبُکه. توی گوگل سرچ کنید VS Code، آخرین نسخه برنامه رو از سایتش دانلود کنید و با تنظیمات پیش‌فرض نصب کنید. بعد باید یه سر به این لینک بزنید: https://p5js.org/download و بسته p5.js complete رو دانلود کنید.

فایل زیپی که دانلود کردید رو توی یه فولدر دیگه آن‌زیپ کنید؛ مهم نیست اسم فولدر جدید چی باشه و فولدرو کجا درست می‌کنید؛ می‌تونید توی دسکتاپ درستش کنید و هر اسمی که دوست دارید براش بذارید. بعد به ترتیب این کارا رو انجام بدید:

برنامه VS Code رو باز کنید
از منوی File گزینه Open Folder رو انتخاب کنید
فولدری که ساختید رو پیدا کنید
فولدر empty-example رو توی VS Code باز کنید

تا این جای کار فولدر پروژه رو توی VS Code باز کردیم و آماده‌ایم تا اولین برنامه‌مونو بنویسیم.

توی p5.js، یه اسکیس شامل فایل‌های مختلفی می‌شه. اول از همه یه فایل HTML می‌بینید به نام index.html که همه اجزای برنامه رو توی یک صفحه به همدیگه متصل می‌کنه و فایلیه که در نهایت توسط مرورگر باز می‌شه و پروژه رو نمایش می‌ده. اگه فایل index.html رو داخل VS Code باز کنید می‌بینید که یه جایی از فایل، کتابخونه p5.js فراخونده شده. همچنین یه فایل دیگه فراخونده شده به نام sketch.js.

<!DOCTYPE html>
<html lang="">

<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>p5.js example</title>
     <style>
          body {
               padding: 0;
               margin: 0;
          }
     </style>
     <script src="../p5.js"></script>
     <!-- <script src="../addons/p5.sound.js"></script> -->
     <script src="sketch.js"></script>
</head>

<body>
     <main>
     </main>
</body>

</html>

پس‌وند js مرتبط با زبان جاوااسکریپته. فایل p5.js شامل کدهای مرتبط با کتابخونه‌ایه که قراره باهاش کار کنیم و اصلاً نباید کاری با این فایل داشته باشید و قراره فقط توی اون فایل sketch.js کد جاوااسکریپت مرتبط با برنامه‌تونو بنویسید. فعلاً با فایل HTML هم هیچ کاری ندارید و نباید بهش دست بزنید.

فایل sketch.js رو باز کنید و یه نگاهی به کدی که توش نوشته شده بندازید:

function setup() {
     // put setup code here
}
function draw() {
     // put drawing code here
}

بعداً که درباره تابع‌ها صحبت کنیم، درباره این که تابع‌ها چی هستن و چطوری کار می‌کنن مفصل یاد می‌گیریم، اما فعلاً بدونید این دو تابعِ اصلیِ setup و draw توی همه برنامه‌هایی که با p5.js نوشته می‌شه وجود داره و یه تفاوتی بین اجراشون هست: هر کدی که مرتبط با وضعیت ابتدایی برنامه شما باشه، داخل تابع setup قرار می‌گیره و فقط یک بار اجرا می‌شه؛ هر کدی که مرتبط با کشیدن یه چیزی روی صفحه باشه توی تابع draw قرار می‌گیره و دائماً تکرار می‌شه.

توی کد بالا خطوطی وجود دارن که با علامت // مشخص شدن، به اینا می‌گیم کامنت. توی برنامه‌نویسی، کامنت‌ها خطوطی هستن که به زبان آدمیزاد نوشته می‌شن، یعنی موقعی که مرورگر داره برنامه رو اجرا می‌کنه، اون خطوط رو نادیده می‌گیره. کامنت‌ها برای این نوشته می‌شن که یه پیامی رو به آدمی که داره کد رو می‌خونه منتقل کنن و معمولاً برای توضیح دادن یه بخشی از کد استفاده می‌شن.

فعلاً چیزی توی تابع setup نمی‌نویسیم و می‌ذاریم خالی باشه. قراره اولین خطوط کدی که می‌نویسیم رو توی تابع draw قرار بدیم. داخل تابع draw کامنت put drawing code here رو پاک کنید و به جاش اینارو تایپ کنید:

background(204)
ellipse(50, 50, 80, 80)

کل فایل باید این شکلی باشه الان:

function setup() {
     // put setup code here
}
function draw() {
     background(204)
     ellipse(50, 50, 80, 80)
}

با فشار دادن دکمه‌های Ctrl + S فایل رو ذخیره کنید و بعد فایل index.html رو با هر مرورگری که دوست دارید باز کنید. اگه همه چی رو درست تایپ کرده باشید، باید یه دایره توی مرورگر ببینید.

توی p5.js دستورهایی وجود دارن که کارشون رسم شکله. مثلاْ همین ellipse که دایره یا بیضی می‌کشه یا دستور rect که مربع یا مستطیل می‌کشه. بیشتر دستورهایی که برای کشیدن اشکال استفاده می‌شن، چند تا پارامتر ضروری دارن که مشخص می‌کنه شکل کجا باید کشیده بشه و اندازه‌ش چقدر باشه (چند پیکسل باشه). دستورهایی هم وجود دارن که مشخص می‌کنن شکل‌هایی که بعد از اون‌ها ظاهر می‌شن، چه مشخصاتی قراره داشته باشن. مثلاً دستور noStroke که یعنی شکل، دورخط یا استروک نداره یا دستور fill که مشخص می‌کنه شکل قراره چه رنگی باشه.

توی مرحله بعد می‌ریم سراغ یه اسکیس جذاب‌تر. محتویات فایل script.js رو پاک کنید و کد پایین رو توش کپی کنید. فایل رو ذخیره کنید و پنجره مرورگرو با فشار دادن کلید F5 رفرش کنید.

function setup() {
     createCanvas(windowWidth, windowHeight)
}
function draw() {
     if(mouseIsPressed) {
          fill(0)
     } else {
          fill(255)
     }
     ellipse(mouseX, mouseY, 80, 80)
}

اولین چیزی که با خوندن مطلب آموزش p5.js درست کردید باید یه همچین شکلی باشه؛ کلی دایره روی مانیتور داریم!

این کد چه کاری انجام می‌ده؟

مرورگر، کدهایی که نوشتیمو به ترتیب از بالا به پایین اجرا می‌کنه. اگه دقت کنید می‌بینید که تابع setup شامل تابع createCanvas هست؛ این تابع چی کار می‌کنه؟ به صورت پیش‌فرض، بومی که اسکیس ما توش کشیده می‌شه، یه بوم صد پیکسل در صد پیکسله؛ اگه بخوایم یه بوم نقاشی با اندازه‌ی دلخواه خودمون داشته باشیم باید از تابع createCanvas استفاده کنیم. تابع createCanvas برای ما یه بوم نقاشی درست می‌کنه که توی مثال ما، عرضش هم‌عرض صفحه و ارتفاعش هم‌ارتفاع صفحه نمایشه.

کدی که توی تابع draw نوشته شده ـ همون طور که قبلاً گفتم ـ مکرراً اجرا می‌شه و با حرکت ماوس شروع می‌کنه به کشیدن دایره‌های سفید. اگر دکمه ماوس فشار داده بشه، رنگ دایره‌ای که داره کشیده می‌شه به سیاه تغییر پیدا می‌کنه.

اگه الان بخش‌هایی از کد هست که درست متوجه نمی‌شید؛ کاملاً طبیعیه و اصلاً لازم نیست نگران باشید؛ بعداً درباره جزییات هر بخش از این کد بیشتر صحبت می‌کنیم. مثلاً توی یاددشت مربوط به متغیرها می‌بینید که mouseIsPressed یه متغیر ازپیش‌تعریف‌شده‌س که هر وقت دکمه ماوس فشار داده می‌شه مقدارش true می‌شه. فعلاً لازم نیست نگرانش باشید و فقط فایل رو اجرا کنید و ببینید نتیجه‌ش چه شکلیه.

کنسول

مرورگرها یه ابزار خیلی مفیدی برای برنامه‌نویس‌ها دارن به نام کنسول. مهم‌ترین کار کنسول برای برنامه‌نویس‌ها اینه که برنامه نوشته شده رو عیب‌یابی می‌کنه. توی کروم برای این که کنسول رو باز کنید می‌تونید از کلیدهای میان‌بر Ctrl + Shift + J استفاده کنید؛ مثلاً اگه یه غلط دیکته‌ای توی برنامه شما باشه، اون جا ممکنه یه متن قرمز ببینید که خطا رو توضیح داده؛ البته توضیحاتی که می‌نویسه ممکنه یه خرده عجیب‌غریب به نظر برسه، اما اگه سمت راست همون خطا رو نگاه کنید نوشته که این خطا مربوط به کدوم فایل و کدوم خط از اون فایله؛ این آدرسی که می‌ده به شما کمک می‌کنه به اون جا مراجعه کنید و ببینید کجا مرتکب خطا شدید. دقت کنید که جاوااسکریپت نسبت به بزرگی و کوچکی حروف حساسیت داره. مثلاً توی حروف دستور noStroke فقط حرف S بزرگ نوشته شده و اگه به شکل nostroke یا NoStroke نوشته بشه، قطعاً با خطا مواجه می‌شید.

از کنسول می‌شه برای انجام تست‌های مختلف هم استفاده کرد. مثلاً می‌شه از دستور console.log جاهای مختلف کدی که می‌نویسیم استفاده کنیم تا ببینیم هر بخش از کد چطوری کار می‌کنه. الان من console.log رو داخل تابع setup و تابع draw قرار می‌دم تا ببینم چه اتفاقی می‌افته:

function setup() {
     console.log('setup')
}
function draw() {
     console.log('draw')
}

اگه شما هم کد بالا رو اجرا کنید و کنسول رو نگاه کنید، می‌بینید که اول از همه کد داخل تابع setup یک بار اجرا می‌شه و بعد از اون، کد داخل تابع draw پشت سر هم و خیلی سریع در حال اجرا شدنه و متوقف هم نمی‌شه و البته این همون چیزیه که ما توقع داریم p5.js برامون انجام بده.

چطوری یه پروژه جدید بسازیم؟

آسون‌ترین راه ساختن یه پروژه جدید اینه که از فولدر empty-example یه کپی بگیرید و همون جا پیست کنید؛ حالا می‌تونید اسم فولدر جدیدو عوض کنید و مثل فولدر قبلی توی برنامه VS Code بازش کنید. این خیلی مهمه که هر وقت خواستید برنامه‌تونو تست کنید، فایل index.html مرتبط با همون پروژه رو باز کنید.

افزونه Live Server روی VS Code

اگر شما هم مثل من از VS Code استفاده می‌کنید می‌تونید از افزونه Live Server برای دیدن تغییرات به صورت همزمان استفاده کنید؛ این طوری دیگه نیاز نیست هر موقع تغییری توی پروژه ایجاد می‌کنید صفحه مرورگرو رفرش کنید تا تغییرات رو ببینید؛ فقط تغییرات رو ذخیره کنید تا مرورگر خودبه‌خود رفرش بشه و تغییراتتون اعمال بشه.

برای نصب کردن افزونه Live Server:

از منوی سمت چپ وارد بخش Extensions بشید
عبارت Live Server رو سرچ کنید و افزونه رو نصب کنید
توی برنامه VS Code صفحه HTML پروژه رو باز کنید
از نوار آبی پایین روی Go Live کلیک کنید
شروع کنید به کد زدن

سر زدن به رفرنس‌ها

می‌دونم که خیلی طولانی شد ولی این مقدمات برای شروع آموزش p5.js لازم بود. توی یادداشت بعدی درباره متغیرها یاد می‌گیریم که برای یاد گرفتن جاوااسکریپت و همچنین ادامه آموزش p5.js خیلی اساسی و مهمه. امیدوارم حوصله‌تون سر نرفته باشه.

یه نکته نهایی هم بگم و برای یادداشت اول دیگه کافیه. وقتی دارید با p5.js برنامه‌نویسی می‌کنید خیلی وقتا لازمه که به وبسایت p5.js سر بزنید و یه نگاهی به رفرنس‌هایی که توی این لینک هستن بندازید: https://p5js.org/reference. من دائماً این کارو انجام می‌دم چون چیزای به‌دردبخور و مهم زیادی توش پیدا می‌شه. به نظر من هر وقت حس کردید که نسبت به یه چیزی توی برنامه‌تون آشنایی کامل ندارید، باید یه سر به رفرنس بزنید، ازش سر دربیارید و بفهمید دقیقاً چطوری کار می‌کنه و غافل‌گیر نشید. رفرنس p5.js خیلی کامله و همه توابع رو با مثال توضیح داده. بعداً که بیشتر با جاوااسکریپت و p5.js آشنا شدید، می‌تونید توی رفرنس بگردید و چیزای جدید کشف کنید.

آموزش p5.js و فراتر از آن! Hello World