Kodimi i Formave të Thjeshta Playdoh W/ P5.js & Makey Makey: 7 Hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:12

Projektet Makey Makey »

Ky është një projekt llogaritës fizik i cili ju lejon të krijoni një formë me Playdoh, kodoni atë formë duke përdorur p5.js dhe shkaktoni që ajo formë të shfaqet në ekranin e kompjuterit duke prekur formën Playdoh duke përdorur një Makey Makey.

p5.js është një mjedis kodimi krijues me burim të hapur, të bazuar në ueb, në Javascript. Mësoni më shumë këtu:

Ju nuk keni nevojë për ndonjë përvojë kodimi për të bërë këtë projekt. Kjo mund të përdoret si një hyrje në kodimin e bazuar në tekst (në krahasim me gjuhët e bllokuara si Scratch). Ju duhet vetëm të shkruani 4 rreshta kod për të përfunduar këtë projekt. Ka disa mënyra se si mund ta ndryshoni dhe zgjeroni këtë ide themelore.

Furnizimet

Kompleti Makey Makey (pa 2 kapëse aligatori)

Playdoh (çdo ngjyrë)

Laptop me lidhje interneti

Hapi 1: Bëni një formë Playdoh

Bëni një formë nga Playdoh. Ky mund të jetë një rreth, ovale, katror, drejtkëndësh ose trekëndësh. Jini të vetëdijshëm se do t'ju duhet të kodoni këtë formë më vonë, kështu që sa më e thjeshtë të jetë forma, aq më e lehtë do të jetë pjesa e kodimit. Sidoqoftë, p5.js është në gjendje të kodojë shumë forma të ndryshme, madje edhe ato me porosi, kështu që ju mund të vendosni për nivelin e vështirësisë që dëshironi të provoni.

Hapi 2: Filloni në P5.js

Nëse nuk e keni përdorur p5.js më parë, ju rekomandoj të shikoni faqen e fillimit në faqen e internetit:

Unë gjithashtu rekomandoj shumë të shikoni kanalin youtube The Coding Train për mësime të shkëlqyera në lidhje me përdorimin e p5.js. Këtu keni një lidhje me një listë dëgjimi që kalon në të gjitha bazat:

Meqenëse p5.js është i bazuar në ueb, ju mund të bëni të gjithë kodimin tuaj në internet duke përdorur p5 Web Editor. Ju nuk keni nevojë për një llogari për të bërë këtë projekt, por nëse dëshironi të kurseni punën tuaj, do t'ju duhet të regjistroheni për një llogari.

Redaktuesi i Uebit:

Redaktuesi i uebit p5.js ka një zonë për të shkruar kodin në të majtë dhe kanavacën e cila do të shfaqë rezultatet e kodit në të djathtë.

Çdo skicë p5.js përfshin një funksion setup () dhe një funksion draw (). Funksioni setup () do të ekzekutohet një herë kur të fillojë skica. Në funksionin setup () është funksioni createCanvas i cili krijon një hapësirë ku do të vizatohet forma juaj. Numrat në kllapa të funksionit createCanvas vendosin boshtin X (nga e majta në të djathtë) dhe boshti Y (nga lart poshtë) të kanavacës. Numrat e paracaktuar janë 400, 400 që do të thotë se kanavacë juaj është 400 piksele nga e majta në të djathtë dhe 400 piksele nga lart poshtë (Ju gjithmonë mund t'i ndryshoni ato për t'iu përshtatur nevojave tuaja). Kini parasysh se këndi i sipërm i majtë i kanavacës është pika 0, 0. Kjo do të jetë e rëndësishme të dini kur kodoni formën tuaj.

Funksioni draw () funksionon si një lak që do të thotë se azhurnohet vazhdimisht, përafërsisht. 60 herë në sekondë. Kjo mund të na lejojë të krijojmë animacion në skicat tona. Brenda funksionit draw () është funksioni background i cili i shton një ngjyrë kanavacës sonë. Parazgjedhja është 220 e cila është një vlerë e ngjyrës gri. 0 = e zezë, 255 = e bardhë dhe numri në mes do të ketë nuanca të ndryshme të gri. Funksioni i sfondit gjithashtu mund të marrë vlera RGB të cilat na lejojnë të shtojmë ngjyrë. Më shumë për këtë në hapin tjetër.

Hapi 3: Kodoni formën tuaj në P5.js

Për të koduar formën tuaj, do t'ju duhet vetëm të shtoni rreshta të kodit brenda funksionit të tërheqjes ().

Çdo formë ka funksionin e vet për ta bërë atë të shfaqet në kanavacë. Këtu është faqja e referencës për të gjitha format në p5.js:

Për të bërë një rreth, ne do të përdorim funksionin e elipsit. Ky funksion merr 3 argumente (numrat që hyjnë brenda kllapave). Numri i parë është pozicioni X i qendrës së rrethit në kanavacë dhe numri i dytë është pozicioni Y në kanavacë. Mos harroni se këndi i sipërm i majtë është 0, 0 dhe kanavacë është 400 me 400 piksele. Pra, nëse dua që rrethi të shfaqet në mes të kanavacës do ta vendos në 200 në boshtin X dhe 200 në boshtin Y. Ju mund të eksperimentoni me këta numra për të kuptuar se si t'i vendosni gjërat në kanavacë.

Numri i tretë përcakton madhësinë e rrethit. Për këtë shembull, ai është vendosur në 100 piksele në diametër. Funksioni i elipsit gjithashtu mund të marrë një argument të katërt i cili do të ndryshonte argumentin e tretë për të ndikuar në diametrin X dhe argumenti i katërt do të ishte diametri Y. Kjo mund të përdoret për të bërë forma ovale në vend të qarqeve të rrumbullakëta.

Për të vendosur ngjyrën e formës sonë, ne përdorim funksionin e mbushjes. Kjo përdor 3 argumente të cilat janë vlerat RGB (R = e kuqe, G = jeshile, B = blu). Çdo vlerë mund të jetë një numër midis 0 dhe 255. Për shembull, për të bërë të kuqe, do të vendosnim 255, 0, 0 të cilat do të ishin të gjitha të kuqe pa jeshile ose blu. Kombinime të ndryshme të këtyre numrave do të krijojnë ngjyra të ndryshme.

Ka disa faqe në internet që ofrojnë vlera RGB për shumë ngjyra të ndryshme, si kjo:

Pasi të keni gjetur vlerën RGB që përputhet me ngjyrën tuaj të PlayDoh, shkruani funksionin e mbushjes mbi funksionin e formës.

Pastaj mund të klikoni butonin e luajtjes në redaktuesin e uebit dhe duhet të shihni që forma juaj të shfaqet në ekran.

Hapi 4: Bëni që Forma juaj të Shfaqet me një Shtypës Kyç

Meqenëse ne duam që skica jonë p5.js të jetë interaktive me Makey Makey, duhet të shtojmë një kod për të bërë që diçka të ndodhë kur shtypim një tast në tastierë. Në këtë rast, ne duam që forma të shfaqet vetëm nëse shtypim një çelës. Për ta bërë këtë ne kemi nevojë për një deklaratë të kushtëzuar. Kjo do të thotë që diçka në kodin tonë do të ndodhë vetëm nëse plotësohet një kusht i caktuar, në këtë rast, shtypet një çelës.

Për ta bërë të kushtëzuar këtë pohim të kushtëzuar, fillojmë me fjalën nëse ndiqet nga kllapa. Brenda kllapave do të jetë kushti që duam të përmbushet. Në p5.js, ekziston një ndryshore e integruar e quajtur keyIsPressed (sigurohuni që përdorni shkronja të mëdha saktësisht të njëjta me ato të shkruara këtu). keyIsPressed është një variabël boolean. Kjo do të thotë se mund të ketë një vlerë të vërtetë ose të rreme. Kur shtypet çelësi, vlera e tij është e vërtetë dhe kur nuk shtypet, vlera e tij është false.

Së fundi ne shtojmë një grup kllapash kaçurrelë {}. Brenda kllapave kaçurrelë do të jetë kodi që duam të ekzekutojmë nëse kushti ynë plotësohet. Pra, ne thjesht do të vendosim kodin tonë për të bërë formën midis atyre kllapave kaçurrelë.

Tani kur drejtojmë skicën tonë, nuk do ta shohim formën derisa të shtypim një tast në tastierë.

SH NOTNIM I RORTNDSISHM: Kur shtoni shtypje të butonave në kodin tonë, redaktuesi i uebit duhet të dijë nëse po shtypim një çelës për të shkruar kodin në redaktuesin e tekstit ose po shtypim butonin për të bërë atë që kemi koduar një shtypje kyçe për të bërë. Kur klikoni butonin e luajtjes, lëvizni miun mbi kanavacë dhe klikoni mbi kanavacë. Kjo do të sjellë fokusin e redaktuesit në skicë dhe shtypja e një çelësi do të shkaktojë kodin kryesor të shtypit që duam të ndodhë

Hapi 5: Vendosni Makey Makey

Dilni nga tabela Makey Makey, kabllo USB dhe dy kapëse aligatori. Bashkangjitni një kapëse aligatori në Tokë dhe një në tastin Hapësirë (meqenëse ne nuk specifikuam një çelës në kodin tonë, çdo çelës që shtypim do të shkaktojë shfaqjen e formës).

Merrni kapësen e aligatorit që është ngjitur në tastin Space dhe shtypni skajin tjetër në formën Playdoh.

Lidheni kabllon USB në laptop.

Hapi 6: Prekni Formën Playdoh

Mbajeni skajin metalik të kapëses së aligatorit që është ngjitur në Tokë në Makey Makey dhe prekni formën Playdoh. Kur prekni formën Playdoh, forma e koduar duhet të shfaqet në kanavacën e skicës tuaj.

Këtu është një lidhje me skicën p5.js për këtë projekt:

Nëse forma nuk shfaqet:

1. Sigurohuni që keni klikuar miun në kanavacën e skicës p5.js para se të prekni Playdoh.

2. Sigurohuni që jeni duke mbajtur kapësen metalike të telit të Tokës.

Hapi 7: Forma të ndryshme

Trekëndëshi i Verdhë:

Sheshi Blu: