کد نویسی ساده Playdoh Shapes W/ P5.js و Makey Makey: 7 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:52

پروژه های Makey Makey »

این یک پروژه محاسباتی فیزیکی است که به شما امکان می دهد با Playdoh یک شکل ایجاد کنید ، کد را با استفاده از p5.js ایجاد کنید و با لمس کردن شکل Playdoh با استفاده از Makey Makey ، آن شکل را در صفحه کامپیوتر نشان دهید.

p5.js یک منبع باز ، مبتنی بر وب ، محیط برنامه نویسی خلاق در Javascript است. در اینجا بیشتر بدانید:

برای انجام این پروژه نیازی به تجربه کد نویسی ندارید. این می تواند به عنوان مقدمه ای بر برنامه نویسی مبتنی بر متن (برخلاف زبانهای مبتنی بر بلوک مانند Scratch) استفاده شود. برای تکمیل این پروژه فقط باید 4 خط کد بنویسید. چندین راه وجود دارد که می توانید این ایده اساسی را تغییر داده و گسترش دهید.

تدارکات

کیت Makey Makey (بدون کلیپ تمساح)

Playdoh (هر رنگی)

لپ تاپ با اتصال به اینترنت

مرحله 1: یک شکل Playdoh بسازید

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

مرحله 2: شروع به کار در P5.js

اگر قبلاً از p5.js استفاده نکرده اید ، توصیه می کنم از صفحه شروع به کار در وب سایت دیدن کنید:

همچنین به شدت توصیه می کنم کانال یوتیوب The Coding Train را برای آموزش های عالی در مورد استفاده از p5.js. در اینجا پیوندی به یک لیست پخش وجود دارد که همه اصول اولیه را رعایت می کند:

از آنجا که p5.js مبتنی بر وب است ، می توانید تمام برنامه نویسی خود را در وب با استفاده از ویرایشگر وب p5 انجام دهید. برای انجام این پروژه نیازی به حساب کاربری ندارید ، اما اگر می خواهید کار خود را ذخیره کنید ، باید برای یک حساب کاربری ثبت نام کنید.

ویرایشگر وب:

ویرایشگر وب p5.js دارای ناحیه ای برای نوشتن کد در سمت چپ و بوم است که نتایج کد را در سمت راست نمایش می دهد.

هر طرح p5.js شامل یک تابع setup () و یک تابع draw () است. تابع setup () یکبار هنگام شروع طرح اولیه اجرا می شود. در تابع setup () تابع createCanvas است که فضایی ایجاد می کند که شکل شما در آن کشیده می شود. اعداد داخل پرانتز تابع createCanvas محور X (چپ به راست) و محور Y (از بالا به پایین) بوم را تنظیم می کنند. اعداد پیش فرض 400 ، 400 است که به این معنی است که بوم شما 400 پیکسل از چپ به راست و 400 پیکسل از بالا به پایین است (شما همیشه می توانید آنها را با توجه به نیاز خود تغییر دهید). توجه داشته باشید که گوشه سمت چپ بالای بوم نقطه 0 ، 0 است. این مهم است که بدانید وقتی شکل خود را کد می کنید.

تابع draw () بصورت یک حلقه اجرا می شود که بدین معنی است که دائماً به روز می شود. 60 بار در ثانیه این می تواند به ما امکان ایجاد انیمیشن در طرح های خود را بدهد. در داخل تابع draw () تابع background وجود دارد که به بوم ما رنگ می افزاید. پیش فرض 220 است که مقدار مقیاس خاکستری است. 0 = سیاه ، 255 = سفید و عدد بین آنها رنگهای مختلف خاکستری خواهد بود. عملکرد پس زمینه همچنین می تواند مقادیر RGB را در نظر بگیرد که به ما اجازه می دهد رنگ اضافه کنیم. در مرحله بعد بیشتر در این مورد توضیح دهید.

مرحله 3: شکل خود را در P5.js کدگذاری کنید

برای کدگذاری شکل خود ، فقط باید خطوط کد داخل تابع draw () را اضافه کنید.

هر شکل عملکرد خاص خود را دارد تا روی بوم ظاهر شود. در اینجا صفحه مرجع همه اشکال در p5.js است:

برای ایجاد دایره ، از تابع بیضی استفاده می کنیم. این تابع 3 آرگومان می گیرد (اعدادی که داخل پرانتز قرار می گیرند). عدد اول موقعیت X مرکز دایره روی بوم و شماره دوم موقعیت Y روی بوم است. به یاد داشته باشید که گوشه سمت چپ بالای صفحه 0 ، 0 و بوم 400 در 400 پیکسل است. بنابراین اگر می خواهم دایره در وسط بوم ظاهر شود ، آن را در محور X در 200 و در محور Y روی 200 قرار می دهم. می توانید با این اعداد آزمایش کنید تا نحوه قرار دادن اشیاء روی بوم را احساس کنید.

عدد سوم اندازه دایره را تعیین می کند. برای این مثال ، قطر آن 100 پیکسل است. تابع بیضی می تواند یک آرگومان چهارم را انتخاب کند که سومین آرگومان را بر قطر X و چهارمین آرگومان نیز قطر Y را تغییر می دهد. این می تواند برای ایجاد اشکال بیضی شکل به جای دایره های کاملا گرد استفاده شود.

برای تعیین رنگ شکل خود ، از تابع fill استفاده می کنیم. این از 3 آرگومان که مقادیر RGB هستند (R = قرمز ، G = سبز ، B = آبی) استفاده می کند. هر مقدار می تواند یک عدد بین 0 تا 255 باشد. به عنوان مثال ، برای ایجاد رنگ قرمز ، ما 255 ، 0 ، 0 را قرار می دهیم که همه قرمز و بدون سبز یا آبی است. ترکیبات مختلف این اعداد رنگ های متفاوتی را ایجاد می کند.

چندین وب سایت وجود دارد که مقادیر RGB را برای رنگ های مختلف ارائه می دهند ، مانند این یکی:

هنگامی که مقدار RGB را مطابق با رنگ PlayDoh خود یافتید ، تابع fill را در بالای تابع شکل بنویسید.

سپس می توانید روی دکمه پخش در ویرایشگر وب کلیک کنید و باید شکل خود را روی صفحه نمایش دهید.

مرحله 4: شکل خود را با فشار دادن کلید ظاهر کنید

از آنجا که ما می خواهیم طرح p5.js ما با Makey Makey تعاملی باشد ، باید با فشار دادن یک کلید روی صفحه ، مقداری کد اضافه کنیم. در این حالت ، ما می خواهیم شکل فقط در صورت فشار دادن یک کلید ظاهر شود. برای انجام این کار به یک عبارت شرطی نیاز داریم. این بدان معناست که چیزی در کد ما تنها در صورتی اتفاق می افتد که شرط خاصی برآورده شود ، در این حالت ، کلیدی فشار داده می شود.

برای شرطی نمودن این گزاره شرطی ، با کلمه اگر پس از پرانتز دنبال شود شروع می کنیم. داخل پرانتز شرایطی است که می خواهیم برآورده شود. در p5.js ، یک متغیر داخلی به نام keyIsPressed وجود دارد (مطمئن شوید که از حروف بزرگ دقیقاً مشابه آنچه در اینجا نوشته شده استفاده کنید). keyIsPressed یک متغیر بولی است. این بدان معناست که می تواند دارای مقدار درست یا غلط باشد. وقتی کلید فشار داده می شود ، مقدار آن درست است و وقتی فشرده نمی شود ، مقدار آن غلط است.

در نهایت ما مجموعه ای از براکت های فرفری {} را اضافه می کنیم. در داخل براکت های مجعد ، کدی که می خواهیم اجرا کنیم در صورت برآورده شدن شرایط ما وجود خواهد داشت. بنابراین ما فقط می خواهیم کد خود را قرار دهیم تا شکل بین آن براکت های فرفری ایجاد شود.

حالا وقتی طرح خود را اجرا می کنیم ، تا زمانی که یک کلید روی صفحه کلید را فشار ندهیم ، شکل آن را نمی بینیم.

نکته مهم: هنگام افزودن کلیدهای فشاری به کد ما ، ویرایشگر وب باید بداند که آیا ما برای نوشتن کد در ویرایشگر متن کلیدی را فشار می دهیم یا کلید را برای انجام کاری که یک کلید را برای انجام آن کدگذاری کرده ایم ، فشار می دهیم. وقتی روی دکمه پخش کلیک می کنید ، ماوس را روی بوم حرکت دهید و روی بوم کلیک کنید. این کار تمرکز ویرایشگر را به طرح می رساند و فشار دادن یک کلید کد مطبوعاتی کلیدی را که می خواهیم اتفاق بیفتد فعال می کند

مرحله 5: Makey Makey را تنظیم کنید

از برد Makey Makey ، کابل USB و دو گیره تمساح خارج شوید. یک گیره تمساح را به زمین و یکی را به کلید Space وصل کنید (از آنجا که ما کلیدی را در کد خود مشخص نکرده ایم ، هر کلیدی را که فشار می دهیم باعث ظاهر شدن شکل می شود).

گیره تمساح را که به کلید Space وصل شده است بردارید و سر دیگر آن را به شکل Playdoh فشار دهید.

کابل USB را به لپ تاپ وصل کنید.

مرحله 6: Playdoh Shape را لمس کنید

انتهای فلزی گیره تمساح را که روی کره زمین روی Makey Makey چسبیده است نگه دارید و شکل Playdoh را لمس کنید. وقتی شکل Playdoh را لمس می کنید ، شکل کدگذاری شده باید روی بوم طرح شما ظاهر شود.

در اینجا پیوندی به طرح p5.js برای این پروژه آمده است:

اگر شکل ظاهر نمی شود:

1. قبل از لمس Playdoh ، مطمئن شوید که ماوس را روی بوم طرح p5.js کلیک کرده اید.

2. مطمئن شوید که گیره فلزی سیم ارت را در دست گرفته اید.

مرحله 7: اشکال مختلف

مثلث زرد:

میدان آبی: