Oddiy Playdoh shakllarini kodlash W/ P5.js va Makey Makey: 7 qadam

2025 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2025-01-23 15:14

Makey Makey loyihalari »

Bu jismoniy hisoblash loyihasi, bu sizga Playdoh yordamida shakl yaratish, p5.js yordamida shakl berish va Makey Makey yordamida Playdoh shakliga tegish orqali kompyuter ekranida paydo bo'lishini tetiklash imkonini beradi.

p5.js - bu Javascriptdagi ochiq manba, veb -asosli, ijodiy kodlash muhiti. Batafsil bu erda:

Ushbu loyihani amalga oshirish uchun sizga kodlash tajribasi kerak emas. Bu matnga asoslangan kodlashga kirish sifatida ishlatilishi mumkin (Scratch kabi bloklangan tillardan farqli o'laroq). Loyihani bajarish uchun siz faqat 4 qatorli kodni yozishingiz kerak. Ushbu asosiy g'oyani o'zgartirish va kengaytirishning bir necha yo'li mavjud.

Ta'minotlar

Makey Makey to'plami (2 alligator klipi bilan)

Playdoh (har qanday rang)

Noutbuk Internetga ulangan

1 -qadam: Playdoh shaklini yarating

Playdohdan shakl yarating. Bu doira, tasvirlar, kvadrat, to'rtburchak yoki uchburchak bo'lishi mumkin. Shuni bilingki, siz keyinchalik bu shaklni kodlashingiz kerak bo'ladi, shuning uchun shakli qanchalik sodda bo'lsa, kodlash qismi shunchalik oson bo'ladi. Biroq, p5.js har xil shakllarni, hatto maxsus shakllarni ham kodlay oladi, shuning uchun siz sinab ko'rmoqchi bo'lgan qiyinchilik darajasi to'g'risida qaror qabul qilishingiz mumkin.

2 -qadam: P5.js -da boshlang

Agar siz ilgari p5.js-ni ishlatmagan bo'lsangiz, men veb-saytning boshlang'ich sahifasini tekshirishni maslahat beraman:

Men, shuningdek, p5.js -dan foydalanish bo'yicha ajoyib qo'llanmalar uchun "Coding Train" youtube kanalini tekshirishni tavsiya qilaman. Bu erda pleylistga havola bor, u barcha asoslarni o'z ichiga oladi:

P5.js veb -ga asoslanganligi sababli, siz p5 veb -muharriri yordamida barcha kodlarni Internetda qilishingiz mumkin. Bu loyihani amalga oshirish uchun sizga hisob kerak emas, lekin agar siz o'z ishingizni saqlamoqchi bo'lsangiz, hisob qaydnomasini ro'yxatdan o'tkazishingiz kerak bo'ladi.

Veb -muharrir:

P5.js veb -muharriri chapda kod yozish uchun maydon va o'ngda kod natijalarini ko'rsatadigan tuvalga ega.

Har bir p5.js eskizida setup () va draw () funktsiyalari mavjud. Eskiz birinchi boshlanganda setup () funktsiyasi bir marta ishlaydi. Setup () funktsiyasida sizning shaklingiz chiziladigan joyni yaratadigan createCanvas funktsiyasi mavjud. CreateCanvas funktsiyasining qavs ichidagi raqamlari tuvalning X o'qini (chapdan o'ngga) va Y o'qini (yuqoridan pastgacha) o'rnatadi. Odatiy raqamlar 400, 400, bu sizning tuvalingiz chapdan o'ngga 400 piksel va yuqoridan pastgacha 400 piksel (Siz ularni xohlaganingizga qarab o'zgartirishingiz mumkin). Tuvalning yuqori chap burchagi 0, 0 nuqtasidir. Shaklingizni kodlashda buni bilish juda muhim bo'ladi.

Draw () funktsiyasi pastadir sifatida ishlaydi, ya'ni u doimo yangilanib turadi, taxminan. Sekundiga 60 marta. Bu bizga chizmalarimizda animatsiya yaratishga imkon beradi. Draw () funktsiyasining ichida bizning rasmimizga rang qo'shadigan fon funktsiyasi joylashgan. Standart - bu kulrang shkaladagi 220. 0 = qora, 255 = oq va ularning orasidagi kulrang soyalar bo'ladi. Fon funktsiyasi RGB qiymatlarini ham olishi mumkin, bu bizga rang qo'shish imkonini beradi. Bu haqda keyingi bosqichda batafsilroq.

3 -qadam: shaklingizni P5.js -da kodlang

Shaklingizni kodlash uchun draw () funksiyasi ichidagi kod satrlarini qo'shishingiz kifoya.

Har bir shaklning tuvalda paydo bo'lishi uchun o'z vazifasi bor. P5.js-dagi barcha shakllar uchun ma'lumotnoma sahifasi:

Doira yasash uchun ellips funktsiyasidan foydalanamiz. Bu funksiya 3 ta argumentni oladi (qavs ichida joylashgan raqamlar). Birinchi raqam - tuvaldagi doira markazining X pozitsiyasi, ikkinchi raqam - tuvaldagi Y pozitsiyasi. Esda tutingki, yuqori chap burchak 0, 0 va tuval 400 dan 400 pikselgacha. Agar men aylananing tuvalning o'rtasida paydo bo'lishini xohlasam, uni X o'qida 200 va Y o'qida 200 ga qo'yaman. Tuvalga narsalarni qanday joylashtirishni bilish uchun siz ushbu raqamlar bilan tajriba o'tkazishingiz mumkin.

Uchinchi raqam aylananing o'lchamini belgilaydi. Bu misol uchun u diametri 100 pikselga o'rnatiladi. Ellips funktsiyasi to'rtinchi dalilni ham olishi mumkin, bu uchinchi dalilni X diametriga ta'sir qiladi va to'rtinchi dalil Y diametri bo'ladi. Bu mukammal yumaloq doiralar o'rniga tasvirlar yasash uchun ishlatilishi mumkin.

Shaklimizning rangini belgilash uchun biz to'ldirish funktsiyasidan foydalanamiz. Bu RGB qiymatlari bo'lgan 3 ta dalilni ishlatadi (R = qizil, G = yashil, B = ko'k). Har bir qiymat 0 dan 255 gacha bo'lishi mumkin. Masalan, qizil rang berish uchun biz 255, 0, 0 qo'yamiz, bularning hammasi yashil yoki ko'ksiz qizil bo'ladi. Bu raqamlarning har xil kombinatsiyasi turli ranglarni yaratadi.

Turli xil ranglar uchun RGB qiymatlarini ta'minlaydigan bir nechta veb -saytlar mavjud, masalan:

RGB qiymatini PlayDoh rangingizga mos kelishini aniqlagandan so'ng, to'ldirish funktsiyasini shakl funktsiyasining ustiga yozing.

Siz keyin veb -tahrirlovchisida ijro etish tugmasini bosishingiz mumkin va sizning shaklingiz ekranda ko'rinadi.

4 -qadam: tugmachani bosish bilan sizning shaklingiz paydo bo'ladi

Biz p5.js eskizini Makey Makey bilan interaktiv bo'lishini xohlaganimiz uchun, biz klaviaturadagi tugmachani bosganimizda biror narsa bo'lishi uchun ba'zi kodlarni kiritishimiz kerak. Bunday holda, biz faqat tugmani bosganimizda shakl paydo bo'lishini xohlaymiz. Buning uchun bizga shartli bayon kerak. Bu shuni anglatadiki, bizning kodimizdagi biror narsa faqat ma'lum bir shart bajarilganda sodir bo'ladi, bu holda tugma bosiladi.

Bu shartli gapni shartli qilish uchun, keyin qavsdan keyin so'zdan boshlaymiz. Qavslar ichida biz kutmoqchi bo'lgan shart bo'ladi. P5.js da keyIsPressed deb nomlangan o'zgarmaydigan mavjud (katta harflarni bu erda yozilganidek ishlatganingizga ishonch hosil qiling). keyIsPressed - bu mantiqiy o'zgaruvchi. Bu shuni anglatadiki, u haqiqiy yoki noto'g'ri qiymatga ega bo'lishi mumkin. Tugma bosilganda uning qiymati to'g'ri, bosilmasa uning qiymati noto'g'ri bo'ladi.

Nihoyat, biz jingalak qavslar to'plamini qo'shamiz {}. Jingalak qavslar ichida bizning shartimiz bajarilsa, biz bajarmoqchi bo'lgan kod bo'ladi. Shunday qilib, biz bu kodni jingalak qavslar orasiga qo'yish uchun qo'yamiz.

Endi biz eskizni ishga tushirganimizda, biz klaviaturadagi tugmachani bosmagunimizcha shaklni ko'rmaymiz.

MUHIM DIQQAT: Bizning kodimizga tugma bosishni qo'shganda, veb -muharriri biz matn tahrirlovchisiga kod yozish uchun tugmani bosayotganimizni yoki biz tugmachani bosish uchun kodlangan narsani bajarish uchun tugmani bosayotganimizni bilishi kerak. O'ynatish tugmachasini bosganingizda, sichqonchani tuval ustiga olib borib, tuval ustiga bosing. Bu muharrirning diqqatini eskizga olib keladi va tugmani bosish biz xohlagan tugmani bosish kodini ishga tushiradi

5 -qadam: Makey Makey -ni o'rnating

Makey Makey taxtasi, USB kabeli va ikkita alligator klipini oling. Alligatorning bitta qisqichini Yerga, ikkinchisini esa Kosmosga biriktiring (chunki biz kodimizda kalitni ko'rsatmaganmiz, biz bosgan har qanday tugma shaklning paydo bo'lishiga olib keladi).

Space tugmachasiga biriktirilgan alligator qisqichini oling va ikkinchi uchini Playdoh shakliga bosing.

USB kabelini noutbukga ulang.

6 -qadam: Playdoh shakliga teging

Makey Makeyda Yerga biriktirilgan alligator qisqichining metall uchini ushlab turing va Playdoh shakliga teging. Siz Playdoh shakliga tegganingizda, eskiz tuvalida kodlangan shakl paydo bo'lishi kerak.

Mana bu loyihaning p5.js eskiziga havola:

Agar shakl ko'rinmasa:

1. Playdoh -ga tegishdan oldin p5.js eskizining tuvalidagi sichqonchani bosganingizga ishonch hosil qiling.

2. Er simining metall qisqichini ushlab turganingizga ishonch hosil qiling.

7 -qadam: Har xil shakllar

Sariq uchburchak:

Moviy maydon: