Codificarea formelor simple Playdoh W / P5.js și Makey Makey: 7 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:42

Proiecte Makey Makey »

Acesta este un proiect de calcul fizic care vă permite să creați o formă cu Playdoh, codificați această formă folosind p5.js și să declanșați acea formă să apară pe ecranul computerului atingând forma Playdoh folosind un Makey Makey.

p5.js este un mediu de codare creativ, open source, bazat pe web, în Javascript. Aflați mai multe aici:

Nu aveți nevoie de experiență de codare pentru a face acest proiect. Aceasta ar putea fi utilizată ca o introducere în codarea bazată pe text (spre deosebire de limbile bazate pe blocuri, cum ar fi Scratch). Trebuie doar să scrieți 4 linii de cod pentru a finaliza acest proiect. Există mai multe moduri în care puteți schimba și extinde această idee de bază.

Provizii

Kit Makey Makey (cu 2 cleme de aligator)

Playdoh (orice culoare)

Laptop cu conexiune la internet

Pasul 1: creați o formă Playdoh

Creați o formă din Playdoh. Acesta ar putea fi un cerc, oval, pătrat, dreptunghi sau triunghi. Rețineți că va trebui să codificați această formă mai târziu, deci cu cât forma este mai simplă, cu atât va fi mai ușoară partea de codare. Cu toate acestea, p5.js este capabil să codeze multe forme diferite, chiar și personalizate, astfel încât să puteți decide nivelul de dificultate pe care doriți să îl încercați.

Pasul 2: Începeți în P5.js

Dacă nu ați folosit p5.js înainte, vă recomand să verificați pagina de început de pe site:

De asemenea, vă recomand să vizitați canalul YouTube Coding Train pentru tutoriale excelente despre utilizarea p5.js. Iată un link către un playlist care trece prin toate elementele de bază:

Deoarece p5.js este bazat pe web, puteți face toate codările pe web folosind p5 Web Editor. Nu aveți nevoie de un cont pentru a face acest proiect, dar dacă doriți să vă salvați munca, va trebui să vă înscrieți pentru un cont.

Editor web:

Editorul web p5.js are o zonă pentru a scrie codul din stânga și pânza care va afișa rezultatele codului în dreapta.

Fiecare schiță p5.js include o funcție setup () și o funcție draw (). Funcția setup () va rula o dată când schița pornește pentru prima dată. În funcția setup () este funcția createCanvas care creează un spațiu în care va fi desenată forma. Numerele din paranteze funcției createCanvas stabilesc axa X (de la stânga la dreapta) și axa Y (de sus în jos) a pânzei. Numerele implicite sunt 400, 400, ceea ce înseamnă că pânza dvs. este de 400 pixeli de la stânga la dreapta și 400 pixeli de sus în jos (le puteți schimba oricând pentru a se potrivi nevoilor dvs.). Rețineți că colțul din stânga sus al pânzei este punctul 0, 0. Acest lucru va fi important să știți când vă codificați forma.

Funcția draw () rulează ca o buclă, ceea ce înseamnă că se actualizează constant, aprox. De 60 de ori pe secundă. Acest lucru ne poate permite să creăm animație în schițele noastre. În interiorul funcției draw () se află funcția de fundal care adaugă o culoare pânzei noastre. Valoarea implicită este 220, care este o valoare în tonuri de gri. 0 = negru, 255 = alb, iar numărul dintre acestea va varia în nuanțe de gri. Funcția de fundal poate lua, de asemenea, valori RGB care ne permit să adăugăm culoare. Mai multe despre acest lucru în pasul următor.

Pasul 3: Codificați-vă forma în P5.js

Pentru a vă codifica forma, va trebui să adăugați doar la liniile de cod din interiorul funcției draw ().

Fiecare formă are propria sa funcție pentru ao face să apară pe pânză. Iată pagina de referință pentru toate formele din p5.js:

Pentru a face un cerc, vom folosi funcția de elipsă. Această funcție ia 3 argumente (numerele care intră în paranteze). Primul număr este poziția X a centrului cercului pe pânză și al doilea număr este poziția Y pe pânză. Amintiți-vă că colțul din stânga sus este 0, 0 și pânza este de 400 pe 400 de pixeli. Deci, dacă vreau ca cercul să apară în mijlocul pânzei, îl voi pune la 200 pe axa X și 200 pe axa Y. Puteți experimenta cu aceste numere pentru a avea o idee despre cum să așezați lucrurile pe pânză.

Al treilea număr stabilește mărimea cercului. Pentru acest exemplu, este setat la 100 de pixeli în diametru. Funcția de elipsă poate lua, de asemenea, un al patrulea argument care ar schimba al treilea argument pentru a afecta diametrul X, iar al patrulea argument ar fi diametrul Y. Acesta poate fi folosit pentru a crea forme ovale în loc de cercuri perfect rotunde.

Pentru a seta culoarea formei noastre, folosim funcția de umplere. Aceasta folosește 3 argumente care sunt valorile RGB (R = roșu, G = verde, B = albastru). Fiecare valoare poate fi un număr între 0 și 255. De exemplu, pentru a face roșu, am pune 255, 0, 0 care ar fi toate roșii fără verde sau albastru. Diferite combinații ale acestor numere vor crea culori diferite.

Există mai multe site-uri web care oferă valori RGB pentru multe culori diferite, cum ar fi acesta:

După ce ați găsit valoarea RGB care se potrivește cu culoarea dvs. de PlayDoh, scrieți funcția de umplere deasupra funcției de formă.

Apoi puteți face clic pe butonul de redare din editorul web și ar trebui să vedeți forma dvs. pe ecran.

Pasul 4: Faceți ca forma dvs. să apară cu o apăsare pe tastă

Întrucât dorim ca schița noastră p5.js să fie interactivă cu Makey Makey, trebuie să adăugăm un cod pentru ca ceva să se întâmple când apăsăm o tastă de pe tastatură. În acest caz, dorim ca forma să apară numai dacă apăsăm o tastă. Pentru a face acest lucru, avem nevoie de o declarație condiționată. Aceasta înseamnă că ceva din codul nostru se va întâmpla numai dacă este îndeplinită o anumită condiție, în acest caz, este apăsată o tastă.

Pentru a face condițional această afirmație condițională, începem cu cuvântul dacă este urmat de paranteze. În interiorul parantezelor va fi condiția pe care dorim să o îndeplinim. În p5.js, există o variabilă încorporată numită keyIsPressed (asigurați-vă că utilizați literele mari exact la fel ca cele scrise aici). keyIsPressed este o variabilă booleană. Aceasta înseamnă că poate avea o valoare adevărată sau falsă. Când tasta este apăsată, valoarea ei este adevărată și când nu este apăsată, valoarea ei este falsă.

În cele din urmă adăugăm un set de paranteze cretate {}. În interiorul parantezelor cretate va fi codul pe care dorim să-l executăm dacă condiția noastră este îndeplinită. Deci, vom pune doar codul nostru pentru a face forma între acele paranteze cretate.

Acum, când rulăm schița, nu vom vedea forma până nu vom apăsa o tastă de pe tastatură.

NOTĂ IMPORTANTĂ: Când adăugați apăsări de taste în codul nostru, editorul web trebuie să știe dacă apăsăm o tastă pentru a scrie cod în editorul de text sau dacă apăsăm tasta pentru a face ceea ce am codat o tastă pentru a face. Când faceți clic pe butonul de redare, mutați mouse-ul peste pânză și faceți clic pe pânză. Acest lucru va aduce focusul editorului pe schiță și apăsarea unei taste va declanșa apăsarea tastei cod pe care dorim să se întâmple

Pasul 5: Configurați Makey Makey

Scoateți placa Makey Makey, cablul USB și două cleme de aligator. Atașați un clip aligator pe Pământ și unul pe tasta Spațiu (deoarece nu am specificat nicio tastă în codul nostru, orice tastă pe care o apăsăm va declanșa apariția formei).

Luați clipul aligator care este atașat la tasta Spațiu și apăsați celălalt capăt în forma Playdoh.

Conectați cablul USB la laptop.

Pasul 6: atingeți forma Playdoh

Țineți capătul metalic al clemei de aligator care este atașat la Pământ pe Makey Makey și atingeți forma Playdoh. Când atingeți forma Playdoh, forma codificată ar trebui să apară pe pânza schiței.

Iată un link către schița p5.js pentru acest proiect:

Dacă forma nu apare:

1. Asigurați-vă că ați făcut clic cu mouse-ul pe pânza schiței p5.js înainte de a atinge Playdoh.

2. Asigurați-vă că țineți clema metalică a firului Pământ.

Pasul 7: diferite forme

Triunghi galben:

Piața Albastră: