Paprastų „Playdoh“formų kodavimas „W/ P5.js“ir „Makey Makey“: 7 žingsniai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:45

„Makey Makey“projektai »

Tai fizinio skaičiavimo projektas, leidžiantis sukurti formą naudojant „Playdoh“, koduojant tą formą naudojant p5.js ir suaktyvinant, kad figūra būtų rodoma kompiuterio ekrane, palietus „Playdoh“formą naudojant „Makey Makey“.

p5.js yra atviro kodo, žiniatinklio, kūrybinė kodavimo aplinka „Javascript“. Daugiau informacijos rasite čia:

Norėdami atlikti šį projektą, jums nereikia jokios kodavimo patirties. Tai galėtų būti naudojama kaip įvadas į tekstinį kodavimą (priešingai nei blokinės kalbos, pvz., „Scratch“). Norėdami užbaigti šį projektą, turite parašyti tik 4 kodo eilutes. Yra keletas būdų, kaip galite pakeisti ir išplėsti šią pagrindinę idėją.

Prekės

„Makey Makey Kit“(su 2 aligatoriaus spaustukais)

„Playdoh“(bet kokia spalva)

Nešiojamasis kompiuteris su interneto ryšiu

1 žingsnis: sukurkite „Playdoh“formą

Padarykite formą iš „Playdoh“. Tai gali būti apskritimas, ovalas, kvadratas, stačiakampis arba trikampis. Atminkite, kad vėliau šią formą reikės koduoti, todėl kuo paprastesnė forma, tuo lengviau bus kodavimo dalis. Tačiau „p5.js“gali koduoti daugybę skirtingų formų, net ir pasirinktinių, todėl galite nuspręsti, kokio sunkumo lygį norite išbandyti.

2 veiksmas: pradėkite naudotis „P5.js“

Jei anksčiau nenaudojote „p5.js“, rekomenduoju apsilankyti svetainės pradžios puslapyje:

Taip pat labai rekomenduoju peržiūrėti „The Coding Train“„YouTube“kanalą, kuriame rasite puikių pamokų apie p5.js naudojimą. Čia yra nuoroda į grojaraštį, kuriame pateikiami visi pagrindai:

Kadangi „p5.js“yra pagrįstas žiniatinkliu, visą kodavimą galite atlikti žiniatinklyje naudodami „p5 Web Editor“. Šiam projektui atlikti jums nereikia paskyros, tačiau jei norite išsaugoti savo darbą, turėsite užsiregistruoti.

Žiniatinklio redaktorius:

„P5.js“žiniatinklio redaktoriuje yra sritis kodui rašyti kairėje ir drobė, kurioje bus rodomi kodo rezultatai dešinėje.

Kiekvienas p5.js eskizas apima setup () funkciją ir draw () funkciją. Sąrankos () funkcija bus paleista vieną kartą, kai eskizas prasidės pirmą kartą. Funkcijoje setup () yra funkcija createCanvas, kuri sukuria erdvę, kurioje bus nupiešta jūsų figūra. Funkcijos createCanvas skliausteliuose esantys skaičiai nustato drobės X ašį (iš kairės į dešinę) ir Y ašį (iš viršaus į apačią). Numatytieji skaičiai yra 400, 400, o tai reiškia, kad jūsų drobė yra 400 pikselių iš kairės į dešinę ir 400 pikselių iš viršaus į apačią (visada galite juos pakeisti pagal savo poreikius). Atminkite, kad viršutinis kairysis drobės kampas yra taškas 0, 0. Tai bus svarbu žinoti, kai koduojate savo formą.

Draw () funkcija veikia kaip kilpa, o tai reiškia, kad ji nuolat atnaujinama, maždaug. 60 kartų per sekundę. Tai leidžia mums sukurti animaciją mūsų eskizuose. Funkcijos draw () viduje yra fono funkcija, kuri prideda spalvą prie mūsų drobės. Numatytasis yra 220, kuris yra pilkos spalvos reikšmė. 0 = juoda, 255 = balta ir skaičius tarp jų bus skirtingi pilkos spalvos atspalviai. Fono funkcija taip pat gali turėti RGB reikšmes, kurios leidžia mums pridėti spalvų. Daugiau apie tai kitame žingsnyje.

3 veiksmas: koduokite savo formą P5.js

Norėdami koduoti savo formą, turėsite pridėti tik prie kodo eilučių, esančių funkcijos draw () viduje.

Kiekviena figūra turi savo funkciją, kad ji būtų rodoma ant drobės. Čia yra visų p5.js formų informacinis puslapis:

Norėdami sukurti apskritimą, naudosime elipsės funkciją. Ši funkcija turi 3 argumentus (skaičius, esančius skliausteliuose). Pirmasis skaičius yra apskritimo centro X padėtis ant drobės, o antrasis skaičius - Y padėtis ant drobės. Atminkite, kad viršutinis kairysis kampas yra 0, 0, o drobė yra 400 x 400 pikselių. Taigi, jei noriu, kad apskritimas atsirastų drobės viduryje, X ašyje padedu 200, o Y ašyje - 200. Galite eksperimentuoti su šiais skaičiais, kad suprastumėte, kaip sudėti daiktus ant drobės.

Trečiasis skaičius nustato apskritimo dydį. Šiame pavyzdyje nustatytas 100 pikselių skersmuo. Elipsės funkcija taip pat gali imtis ketvirto argumento, kuris pakeistų trečiąjį argumentą į X skersmenį, o ketvirtasis argumentas būtų Y skersmuo. Tai gali būti naudojama ovalių formų formavimui, o ne tobulai apvaliems apskritimams.

Norėdami nustatyti savo formos spalvą, naudojame užpildymo funkciją. Tam naudojami 3 argumentai, kurie yra RGB reikšmės (R = raudona, G = žalia, B = mėlyna). Kiekviena reikšmė gali būti skaičius nuo 0 iki 255. Pavyzdžiui, norėdami padaryti raudoną, įdėsime 255, 0, 0, kurie būtų raudoni, be žalios ar mėlynos spalvos. Skirtingi šių skaičių deriniai sukurs skirtingas spalvas.

Yra keletas svetainių, kuriose pateikiamos RGB vertės daugeliui skirtingų spalvų, pavyzdžiui, ši:

Suradę RGB reikšmę, atitinkančią jūsų „PlayDoh“spalvą, užrašykite užpildymo funkciją virš formos funkcijos.

Tada žiniatinklio redaktoriuje galite spustelėti paleidimo mygtuką ir ekrane turėtų pasirodyti jūsų forma.

4 žingsnis: Paspauskite mygtuką, kad jūsų figūra pasirodytų

Kadangi norime, kad mūsų p5.js eskizas būtų interaktyvus su „Makey Makey“, turime pridėti kodą, kad kažkas nutiktų, kai paspausime klaviatūros klavišą. Tokiu atveju norime, kad forma atsirastų tik paspaudus klavišą. Norėdami tai padaryti, mums reikia sąlyginio pareiškimo. Tai reiškia, kad kažkas iš mūsų kodo įvyks tik tuo atveju, jei bus įvykdyta tam tikra sąlyga, šiuo atveju paspaudus klavišą.

Norėdami padaryti sąlyginį šį sąlyginį teiginį, pradedame nuo žodžio, jei po jo yra skliausteliai. Skliaustelių viduje bus sąlyga, kurią norime įvykdyti. „P5.js“yra įmontuotas kintamasis, vadinamas „keyIsPressed“(įsitikinkite, kad didžiąsias raides naudojate lygiai taip pat, kaip čia parašyta). „keyIsPressed“yra loginis kintamasis. Tai reiškia, kad jo vertė gali būti teisinga arba klaidinga. Paspaudus klavišą, jo vertė yra teisinga, o nepaspaudus - klaidinga.

Galiausiai pridedame garbanotų skliaustų rinkinį {}. Garbanotų skliaustų viduje bus kodas, kurį norime įvykdyti, jei bus įvykdyta mūsų sąlyga. Taigi mes tiesiog įdėsime savo kodą, kad forma būtų tarp tų garbanotų skliaustų.

Dabar, kai vykdysime eskizą, formos nematysime, kol nepaspausime klaviatūros klavišo.

SVARBI PASTABA: Pridėdami klavišų paspaudimus prie mūsų kodo, žiniatinklio redaktorius turi žinoti, ar paspaudžiame klavišą, norėdami rašyti kodą teksto rengyklėje, ar paspaudžiame klavišą, kad atliktume tai, ką užkodavome. Spustelėję atkūrimo mygtuką, užveskite pelės žymeklį ant drobės ir spustelėkite ant drobės. Taip eskizas bus sutelktas į redaktorių, o paspaudus klavišą bus suaktyvintas norimas įvykdyti klavišo paspaudimo kodas

5 veiksmas: nustatykite „Makey Makey“

Išimkite „Makey Makey“plokštę, USB kabelį ir du aligatoriaus spaustukus. Pritvirtinkite vieną aligatoriaus spaustuką prie Žemės ir vieną prie klavišo „Space“(kadangi savo kode nenurodėme rakto, bet koks paspaudžiamas klavišas suaktyvins formą).

Paimkite aligatoriaus spaustuką, pritvirtintą prie tarpo klavišo, ir paspauskite kitą galą į „Playdoh“formą.

Prijunkite USB kabelį prie nešiojamojo kompiuterio.

6 veiksmas: palieskite „Playdoh“formą

Laikykite metalinį aligatoriaus spaustuko galą, pritvirtintą prie Žemės „Makey Makey“, ir palieskite „Playdoh“formą. Kai paliesite „Playdoh“formą, koduota forma turėtų būti rodoma jūsų eskizo drobėje.

Čia yra nuoroda į šio projekto eskizą p5.js:

Jei forma neatsiranda:

1. Prieš paliesdami „Playdoh“, įsitikinkite, kad spustelėjote pelę ant p5.js eskizo drobės.

2. Įsitikinkite, kad laikote metalinį įžeminimo laido spaustuką.

7 žingsnis: skirtingos formos

Geltonas trikampis:

Mėlyna aikštė: