Vienkāršu Playdoh formu kodēšana W/ P5.js & Makey Makey: 7 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:52

Makey Makey projekti »

Šis ir fiziskās skaitļošanas projekts, kas ļauj izveidot formu ar Playdoh, kodu, kas veidojas, izmantojot p5.js, un aktivizēt šīs formas parādīšanos datora ekrānā, pieskaroties Playdoh formai, izmantojot Makey Makey.

p5.js ir atvērtā pirmkoda, tīmekļa vietne, radoša kodēšanas vide Javascript. Uzziniet vairāk šeit:

Lai veiktu šo projektu, jums nav nepieciešama kodēšanas pieredze. To varētu izmantot kā ievadu teksta kodēšanā (pretstatā bloku valodām, piemēram, Scratch). Lai pabeigtu šo projektu, jums jāraksta tikai 4 koda rindas. Šo pamatideju var mainīt un paplašināt vairākos veidos.

Piegādes

Makey Makey Kit (ar 2 aligatoru klipiem)

Playdoh (jebkura krāsa)

Klēpjdators ar interneta pieslēgumu

1. darbība: izveidojiet Playdoh formu

Izveidojiet formu no Playdoh. Tas var būt aplis, ovāls, kvadrāts, taisnstūris vai trīsstūris. Ņemiet vērā, ka vēlāk šī forma būs jākodē, tāpēc, jo vienkāršāka forma, jo vieglāk būs kodēšanas daļa. Tomēr p5.js spēj kodēt daudzas dažādas formas, pat pielāgotas, lai jūs varētu izlemt, kādu grūtības pakāpi vēlaties izmēģināt.

2. darbība. Sāciet darbu programmā P5.js

Ja iepriekš neesat izmantojis p5.js, iesaku apskatīt darba sākšanas lapu vietnē:

Es arī ļoti iesaku apskatīt YouTube kanālu The Coding Train, lai iegūtu lieliskas apmācības par p5.js lietošanu. Šeit ir saite uz atskaņošanas sarakstu, kurā apskatīti visi pamati:

Tā kā p5.js ir tīmeklī, jūs varat veikt visu savu kodēšanu tīmeklī, izmantojot p5 tīmekļa redaktoru. Lai veiktu šo projektu, jums nav nepieciešams konts, bet, ja vēlaties saglabāt savu darbu, jums būs jāreģistrējas kontam.

Tīmekļa redaktors:

Tīmekļa redaktoram p5.js kreisajā pusē ir apgabals, kurā rakstīt kodu, un audekls, kas parādīs koda rezultātus labajā pusē.

Katrā p5.js skicē ir uzstādīšanas () un zīmēšanas () funkcija. Funkcija setup () darbosies vienreiz, kad skice pirmo reizi sākas. Funkcijā setup () ir funkcija createCanvas, kas izveido atstarpi, kur tiks uzzīmēta jūsu forma. Funkcijas createCanvas iekavās esošie skaitļi nosaka audekla X asi (no kreisās uz labo) un Y asi (no augšas uz leju). Noklusējuma skaitļi ir 400, 400, kas nozīmē, ka jūsu audekls ir 400 pikseļi no kreisās uz labo un 400 pikseļi no augšas uz leju (jūs vienmēr varat tos mainīt atbilstoši savām vajadzībām). Ņemiet vērā, ka audekla augšējais kreisais stūris ir punkts 0, 0. Tas būs svarīgi zināt, kodējot savu formu.

Draw () funkcija darbojas kā cilpa, kas nozīmē, ka tā tiek pastāvīgi atjaunināta, apm. 60 reizes sekundē. Tas var ļaut mums izveidot animāciju mūsu skicēs. Funkcijas draw () iekšpusē ir fona funkcija, kas mūsu audeklam pievieno krāsu. Noklusējuma vērtība ir 220, kas ir pelēktoņu vērtība. 0 = melns, 255 = balts un skaitlis starp tiem būs dažādi pelēki toņi. Fona funkcija var izmantot arī RGB vērtības, kas ļauj mums pievienot krāsu. Vairāk par to nākamajā solī.

3. darbība: kodējiet savu formu P5.js

Lai kodētu savu formu, koda rindiņām būs jāpievieno tikai funkcijas draw () iekšpusē.

Katrai formai ir sava funkcija, lai tā parādītos uz audekla. Šeit ir atsauces lapa visām p5.js formām:

Lai izveidotu apli, mēs izmantosim elipses funkciju. Šai funkcijai ir trīs argumenti (skaitļi, kas atrodas iekavās). Pirmais skaitlis ir apļa centra X pozīcija uz audekla, bet otrais skaitlis ir Y pozīcija uz audekla. Atcerieties, ka augšējais kreisais stūris ir 0, 0 un audekls ir 400 x 400 pikseļi. Tātad, ja es vēlos, lai aplis parādās audekla vidū, es to novietoju uz 200 uz X ass un 200 uz Y ass. Varat eksperimentēt ar šiem skaitļiem, lai saprastu, kā novietot lietas uz audekla.

Trešais skaitlis nosaka apļa lielumu. Šajā piemērā tas ir iestatīts uz 100 pikseļu diametru. Elipses funkcija var izmantot arī ceturto argumentu, kas mainītu trešo argumentu, ietekmējot X diametru, un ceturtais arguments būtu Y diametrs. To var izmantot, lai izveidotu ovālas formas, nevis perfekti apaļus apļus.

Lai iestatītu mūsu formas krāsu, mēs izmantojam aizpildīšanas funkciju. Tas izmanto 3 argumentus, kas ir RGB vērtības (R = sarkans, G = zaļš, B = zils). Katra vērtība var būt skaitlis no 0 līdz 255. Piemēram, lai padarītu sarkanu, mēs liktu 255, 0, 0, kas būtu sarkans bez zaļa vai zila. Dažādas šo skaitļu kombinācijas radīs dažādas krāsas.

Ir vairākas vietnes, kas nodrošina RGB vērtības daudzām dažādām krāsām, piemēram, šo:

Kad esat atradis RGB vērtību, kas atbilst jūsu PlayDoh krāsai, uzrakstiet aizpildīšanas funkciju virs formas funkcijas.

Pēc tam tīmekļa redaktorā varat noklikšķināt uz atskaņošanas pogas, un ekrānā vajadzētu redzēt jūsu formu.

4. darbība. Izveidojiet savu formu, nospiežot taustiņu

Tā kā mēs vēlamies, lai mūsu p5.js skice būtu interaktīva ar Makey Makey, mums jāpievieno kods, lai kaut kas notiktu, nospiežot tastatūras taustiņu. Šajā gadījumā mēs vēlamies, lai forma parādās tikai tad, ja nospiežam taustiņu. Lai to izdarītu, mums ir nepieciešams nosacīts paziņojums. Tas nozīmē, ka kaut kas mūsu kodā notiks tikai tad, ja ir izpildīts noteikts nosacījums, šajā gadījumā tiek nospiesta taustiņa.

Lai padarītu nosacītu šo nosacīto paziņojumu, mēs sākam ar vārdu, ja tam seko iekavas. Iekavās būs nosacījums, kuru mēs vēlamies izpildīt. Programmā p5.js ir iebūvēts mainīgais ar nosaukumu keyIsPressed (pārliecinieties, ka lielos burtus lietojat tieši tādus, kā rakstīts šeit). keyIsPressed ir Būla mainīgais. Tas nozīmē, ka tā vērtība var būt patiesa vai nepatiesa. Nospiežot taustiņu, tā vērtība ir patiesa, un, ja tā netiek nospiesta, tā vērtība ir nepatiesa.

Visbeidzot pievienojam cirtainu iekavu komplektu {}. Cirtainās iekavās būs kods, kuru vēlamies izpildīt, ja mūsu nosacījums ir izpildīts. Tāpēc mēs vienkārši ievietojam savu kodu, lai padarītu formu starp šīm cirtainām iekavām.

Tagad, kad mēs izpildām savu skici, mēs neredzēsim formu, kamēr nenospiedīsim tastatūras taustiņu.

SVARĪGA PIEZĪME. Pievienojot taustiņu nospiešanu mūsu kodam, tīmekļa redaktoram ir jāzina, vai mēs nospiežam taustiņu, lai teksta redaktorā ierakstītu kodu, vai arī mēs nospiežam taustiņu, lai veiktu to, ko mēs esam kodējuši, lai to izdarītu. Noklikšķinot uz atskaņošanas pogas, pārvietojiet peli virs audekla un noklikšķiniet uz audekla. Tas novirzīs redaktora uzmanību uz skici, un, nospiežot taustiņu, tiks aktivizēts taustiņu nospiešanas kods, kuru mēs vēlamies

5. darbība: iestatiet Makey Makey

Izņemiet Makey Makey dēli, USB kabeli un divus aligatora klipus. Pievienojiet vienu aligatora skavu Zemei un vienu - Space taustiņam (tā kā kodā neesam norādījuši atslēgu, jebkura nospiesta taustiņa aktivizēs formu).

Paņemiet aligatora skavu, kas pievienots taustiņam Space, un nospiediet otru galu Playdoh formā.

Pievienojiet USB kabeli klēpjdatoram.

6. darbība. Pieskarieties Playdoh Shape

Turiet aligatora skavas metāla galu, kas ir piestiprināts pie Zemes uz Makey Makey, un pieskarieties Playdoh formai. Pieskaroties Playdoh formai, kodētajai formai vajadzētu parādīties uz jūsu skices audekla.

Šeit ir saite uz šī projekta skici p5.js:

Ja forma neparādās:

1. Pirms pieskaršanās Playdoh, pārliecinieties, vai esat noklikšķinājis peli uz p5.js skices audekla.

2. Pārliecinieties, vai turat zemējuma stieples metāla skavu.

7. solis: dažādas formas

Dzeltenais trīsstūris:

Zilais kvadrāts: