Энгийн Playdoh хэлбэрийг кодлох W/ P5.js & Makey Makey: 7 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:01

Макей Макей төслүүд »

Энэ бол Playdoh ашиглан хэлбэр үүсгэх, p5.js ашиглан код үүсгэх, компьютерийн дэлгэц дээр Makey Makey ашиглан Playdoh хэлбэрт хүрэх замаар дүрс үүсгэх боломжийг олгодог физик тооцооллын төсөл юм.

p5.js бол Javascript дахь нээлттэй эх сурвалж, вэб дээр суурилсан, бүтээлч кодлох орчин юм. Илүү ихийг эндээс үзнэ үү:

Энэ төслийг хэрэгжүүлэхийн тулд танд код бичих туршлага шаардлагагүй болно. Үүнийг текст дээр суурилсан кодчиллын танилцуулга болгон ашиглаж болно (Scratch гэх мэт хэл дээр үндэслэсэн хэлийг блоклохоос ялгаатай). Энэ төслийг дуусгахын тулд та зөвхөн 4 мөр код бичих хэрэгтэй. Энэхүү үндсэн санааг өөрчлөх, өргөжүүлэх хэд хэдэн арга бий.

Хангамж

Makey Makey Kit (2 матрын клиптэй)

Playdoh (ямар ч өнгө)

Интернет холболттой зөөврийн компьютер

Алхам 1: Playdoh хэлбэрийг хий

Playdoh -ийн дүрсийг хий. Энэ нь тойрог, зууван, дөрвөлжин, тэгш өнцөгт эсвэл гурвалжин байж болно. Та энэ хэлбэрийг дараа нь кодлох хэрэгтэй болно гэдгийг анхаараарай, тиймээс хэлбэр нь энгийн байх тусам кодлох хэсэг нь хялбар болно. Гэсэн хэдий ч p5.js нь янз бүрийн хэлбэрийг кодлодог, тэр ч байтугай өөрчлөн тохируулсан байдаг тул та хичээхийг хүсч буй бэрхшээлийн түвшингээ шийдэх боломжтой.

Алхам 2: P5.js дээр эхэлнэ үү

Хэрэв та өмнө нь p5.js-ийг ашиглаагүй байсан бол https://p5js.org/get-started/ вэбсайтаас эхлэх хуудсыг үзэхийг зөвлөж байна.

P5.js. -ийг ашиглах талаар маш сайн заавар авахын тулд би Coding Train youtube сувгийг үзэхийг зөвлөж байна. Энд бүх үндсэн ойлголтуудыг дамжуулдаг тоглуулах жагсаалтын линк байна:

P5.js вэб дээр суурилсан тул p5 вэб засварлагчийг ашиглан вэб дээрх бүх кодчилолоо хийх боломжтой. Энэ төслийг хийхийн тулд танд данс хэрэггүй, гэхдээ хэрэв та ажлаа хадгалахыг хүсвэл данс бүртгүүлэх шаардлагатай болно.

Вэб засварлагч:

P5.js вэб засварлагч нь кодоо зүүн талд бичих боломжтой бөгөөд баруун талд кодын үр дүнг харуулах зотон зурагтай.

P5.js ноорог бүр нь setup () функц ба draw () функцийг агуулдаг. Ноорог анх эхлэхэд setup () функц нэг удаа ажиллах болно. Setup () функц дээр таны дүрсийг зурах орон зайг үүсгэдэг createCanvas функц байдаг. CreateCanvas функцийн хаалтанд байгаа тоо нь зурагны X тэнхлэг (зүүнээс баруун тийш) ба Y тэнхлэгийг (дээрээс доош) тохируулна. Анхдагч тоонууд нь 400, 400 бөгөөд энэ нь таны зураг зүүнээс баруун тийш 400 пиксел, дээрээс доош 400 пиксел байна гэсэн үг юм. Зотын зүүн дээд буланд 0, 0 цэг байгааг анхаарна уу. Энэ нь таны дүрсийг кодлохдоо мэдэх нь чухал юм.

Draw () функц нь давталт хэлбэрээр ажилладаг бөгөөд энэ нь байнга шинэчлэгддэг гэсэн үг юм. Секундэд 60 удаа. Энэ нь бидний ноорог дээр анимац үүсгэх боломжийг олгодог. Draw () функц дотор бидний зураг дээр өнгө нэмдэг дэвсгэр функц байдаг. Анхдагч утга нь 220 бөгөөд энэ нь саарал өнгөтэй байна. 0 = хар, 255 = цагаан ба тэдгээрийн хоорондох саарал өнгөнүүд өөр өөр байх болно. Мөн дэвсгэр функц нь өнгө нэмэх боломжийг олгодог RGB утгыг авах боломжтой. Дараагийн алхам дээр энэ талаар дэлгэрэнгүй мэдээлэл өгөх болно.

Алхам 3: Өөрийн хэлбэрийг P5.js дээр кодчилно уу

Хэлбэрээ кодлохын тулд draw () функцын доторх кодын мөрөнд нэмэх шаардлагатай болно.

Зураг бүрийг зураг дээр харуулах өөрийн гэсэн үүрэгтэй. P5.js дээрх бүх хэлбэрийн лавлах хуудас энд байна:

Тойрог хийхийн тулд бид эллипсийн функцийг ашиглах болно. Энэ функц нь 3 аргументийг авдаг (хаалтанд орсон тоонууд). Эхний тоо нь зураг дээрх тойргийн төвийн X байрлал, хоёр дахь тоо нь зураг дээрх Y байрлал юм. Зүүн дээд булан нь 0, 0, зураг нь 400 х 400 пиксел гэдгийг санаарай. Хэрэв би тойрог зурагны дунд гарч ирэхийг хүсч байвал X тэнхлэг дээр 200, Y тэнхлэг дээр 200 гэж байрлуулна. Та эдгээр тоон дээр туршилт хийж, зураг дээрх зүйлийг хэрхэн байрлуулахаа олж мэдээрэй.

Гурав дахь дугаар нь тойргийн хэмжээг тогтоодог. Энэ жишээнд 100 пикселийн диаметртэйгээр тохируулсан болно. Эллипс функц нь X диаметрт нөлөөлөх гурав дахь аргументийг өөрчлөх дөрөв дэх аргументийг авч болох бөгөөд дөрөв дэх аргумент нь Y диаметр болно. Үүнийг төгс дугуй тойрог биш зууван хэлбэртэй болгоход ашиглаж болно.

Бидний хэлбэрийн өнгийг тохируулахын тулд бид дүүргэх функцийг ашигладаг. Энэ нь RGB утгууд болох 3 аргументийг ашигладаг (R = улаан, G = ногоон, B = цэнхэр). Утга бүр 0 -ээс 255 хүртэлх тоо байж болно. Жишээлбэл, улаан болгохын тулд бид 255, 0, 0 -ийг тавих бөгөөд энэ нь ногоон эсвэл цэнхэргүй улаан өнгөтэй байх болно. Эдгээр тоонуудын өөр өөр хослол нь өөр өөр өнгө үүсгэх болно.

Олон янзын өнгөний хувьд RGB утгыг өгдөг хэд хэдэн вэбсайт байдаг:

RGB -ийн утгыг PlayDoh -ийн өнгөт тохируулан олсны дараа дүүргэх функцийг дүрс функцийн дээр бичнэ үү.

Та дараа нь вэб засварлагч дээр тоглуулах товчийг дарж, таны дүрс дэлгэц дээр гарч ирэх болно.

Алхам 4: Товчлуур дарахад хэлбэрээ харагдуулна

Бид p5.js ноорогоо Makey Makey -тэй интерактив байдлаар хийхийг хүсч байгаа тул гар дээрх товчлуурыг дарахад ямар нэгэн зүйл тохиолдохын тулд код оруулах шаардлагатай. Энэ тохиолдолд бид хэлбэрийг зөвхөн товчлуур дарахад л харагдахыг хүсч байна. Үүнийг хийхийн тулд бидэнд нөхцөлт мэдэгдэл хэрэгтэй болно. Энэ нь тодорхой нөхцөл хангагдсан тохиолдолд л бидний кодонд ямар нэгэн зүйл тохиолдох болно гэсэн үг бөгөөд энэ тохиолдолд түлхүүр дарагдсан байна.

Энэхүү нөхцөлт мэдэгдэлийг нөхцөлт болгохын тулд бид хаалтанд орвол үгээр эхэлнэ. Хаалтан дотор бидний биелүүлэхийг хүссэн нөхцөл байх болно. P5.js дээр keyIsPressed нэртэй хувьсагч байдаг (том үсгийг энд бичсэнтэй яг ижил ашиглаж байгаа эсэхийг шалгаарай). keyIsPressed бол логик хувьсагч юм. Энэ нь үнэн эсвэл худал гэсэн утгатай байж болно гэсэн үг юм. Түлхүүр дарагдсан үед утга нь үнэн, дарагдаагүй бол утга нь худал болно.

Эцэст нь бид буржгар хаалт {} -ыг нэмнэ. Буржгар хаалт дотор бидний нөхцөл хангагдсан тохиолдолд хийхийг хүссэн код байх болно. Тиймээс бид эдгээр буржгар хаалтуудын хоорондох хэлбэрийг гаргахын тулд кодоо оруулах гэж байна.

Одоо бид ноорогоо ажиллуулахдаа гар дээрх товчлуурыг дарах хүртэл хэлбэрийг харахгүй болно.

ЧУХАЛ ТАЙЛБАР: Манай кодонд товчлуур дарах үед вэб редактор бид текст засварлагч дээр код бичих товчлуур дарж байгаа эсвэл түлхүүр дарж кодчилсон зүйлээ хийх гэж байгаа эсэхийг мэдэх шаардлагатай. Тоглуулах товчлуур дээр дарахад хулганыг зураг дээр дараад зураг дээр дарна уу. Энэ нь редакторын анхаарлыг ноорог дээр авчрах бөгөөд товчлуур дарахад бидний хийхийг хүсч буй товчлуур дарагдах болно

Алхам 5: Makey Makey -ийг тохируулна уу

Makey Makey самбар, USB кабель, хоёр матрын хавчаараас гар. Нэг матрын хавчаарыг Дэлхийд, нөгөө нь Сансрын товчлуурт хавсаргана уу (бид кодондоо түлхүүр зааж өгөөгүй тул бидний дарсан ямар ч товчлуур хэлбэрийг харуулдаг).

Space товчлуур дээр хавсаргасан матрын хавчаарыг аваад нөгөө үзүүрийг Playdoh хэлбэрт оруулна уу.

USB кабелийг зөөврийн компьютерт холбоно уу.

Алхам 6: Playdoh хэлбэрт хүрнэ үү

Макей Макей дээр дэлхийд наалдсан матрын хавчаарын металл үзүүрийг барьж, Playdoh хэлбэрт хүрнэ үү. Playdoh хэлбэрт хүрэхэд кодлогдсон дүрс нь таны ноорог дээр гарч ирэх ёстой.

Энэ төслийн p5.js ноорогны линк энд байна:

Хэрэв хэлбэр нь харагдахгүй бол:

1. Playdoh -т хүрэхээсээ өмнө p5.js ноорог зураг дээр хулганаа дарсан эсэхээ шалгаарай.

2. Дэлхий утасны төмөр хавчаарыг барьж байгаа эсэхээ шалгаарай.

Алхам 7: Янз бүрийн хэлбэрүүд

Шар гурвалжин:

Цэнхэр талбай: