Coding Simple Playdoh Shapes W / P5.js & Makey Makey: 7 Hakbang

2025 May -akda: John Day | [email protected]. Huling binago: 2025-01-23 15:12

Mga Proyekto ng Makey Makey »

Ito ay isang pisikal na proyekto sa computing na nagbibigay-daan sa iyo upang lumikha ng isang hugis na may Playdoh, code na hugis gamit ang p5.js at i-trigger ang hugis na lumitaw sa screen ng computer sa pamamagitan ng pagpindot sa hugis ng Playdoh gamit ang isang Makey Makey.

Ang p5.js ay isang bukas na mapagkukunan, batay sa web, malikhaing coding na kapaligiran sa Javascript. Dagdagan ang nalalaman dito:

Hindi mo kailangan ng anumang karanasan sa pag-coding upang magawa ang proyektong ito. Maaari itong magamit bilang isang pagpapakilala sa pag-coding batay sa teksto (taliwas sa pag-block ng mga wika batay sa Scratch). Kailangan mo lamang magsulat ng 4 na linya ng code upang makumpleto ang proyektong ito. Mayroong maraming mga paraan na maaari mong baguhin at palawakin sa pangunahing ideya.

Mga gamit

Makey Makey Kit (w / 2 Alligator Clips)

Playdoh (Anumang Kulay)

Laptop w / Koneksyon sa internet

Hakbang 1: Gumawa ng isang Playdoh Shape

Gumawa ng isang hugis sa Playdoh. Maaari itong isang bilog, hugis-itlog, parisukat, parihaba o tatsulok. Magkaroon ng kamalayan na kakailanganin mong i-code ang hugis na ito sa paglaon, kaya't mas simple ang hugis, mas madali ang bahagi ng pag-cod. Gayunpaman, ang p5.js ay nakapag-code ng maraming iba't ibang mga hugis, kahit na mga pasadyang, upang makapasya ka sa antas ng kahirapan na nais mong subukan.

Hakbang 2: Magsimula sa P5.js

Kung hindi mo pa nagamit ang p5.js dati, inirerekumenda kong suriin ang panimulang pahina sa website:

Masidhing inirerekumenda ko rin ang pag-check sa The Coding Train youtube channel para sa mahusay na mga tutorial tungkol sa paggamit ng p5.js. Narito ang isang link sa isang playlist na dumaan sa lahat ng mga pangunahing kaalaman:

Dahil ang p5.js ay batay sa web, magagawa mo ang lahat ng iyong pag-coding sa web gamit ang p5 Web Editor. Hindi mo kailangan ng isang account upang magawa ang proyektong ito, ngunit kung nais mong i-save ang iyong trabaho, kakailanganin mong mag-sign up para sa isang account.

Web Editor:

Ang p5.js web editor ay may isang lugar upang isulat ang code sa kaliwa at ang canvas na magpapakita ng mga resulta ng code sa kanan.

Ang bawat p5.js sketch ay may kasamang isang pag-andar () na pag-andar at isang pagguhit na () paggana. Ang pag-andar ng setup () ay tatakbo nang isang beses kapag unang nagsimula ang sketch. Sa pag-setup () na pag-andar ay ang function na createCanvas na lumilikha ng isang puwang kung saan iginuhit ang iyong hugis. Ang mga numero sa panaklong ng pag-andar ng createCanvas ay itinakda ang X axis (kaliwa hanggang kanan) at ang Y axis (itaas hanggang sa ibaba) ng canvas. Ang mga default na numero ay 400, 400 na nangangahulugang ang iyong canvas ay 400 mga pixel mula kaliwa hanggang kanan at 400 mga pixel mula sa itaas hanggang sa ibaba (Maaari mong palaging baguhin ang mga ito upang umangkop sa iyong mga pangangailangan). Magkaroon ng kamalayan na ang itaas na kaliwang sulok ng canvas ay ang punto 0, 0. Mahalaga itong malaman kapag nai-code mo ang iyong hugis.

Ang paggana ng () paggana ay tumatakbo bilang isang loop na nangangahulugang ito ay patuloy na pag-update, tinatayang. 60 beses bawat segundo. Maaari nitong payagan kaming lumikha ng animasyon sa aming mga sketch. Sa loob ng paggana () na paggana ay ang pagpapaandar sa background na nagdaragdag ng isang kulay sa aming canvas. Ang default ay 220 na kung saan ay isang halaga ng greyscale. 0 = itim, 255 = puti at numero sa pagitan ay magkakaibang mga kulay ng kulay-abo. Ang pag-andar sa background ay maaari ding kumuha ng mga halagang RGB na magbibigay-daan sa amin upang magdagdag ng kulay. Higit pa dito sa susunod na hakbang.

Hakbang 3: I-code ang Iyong Hugis sa P5.js

Upang mai-code ang iyong hugis, kakailanganin mo lamang idagdag sa mga linya ng code sa loob ng pagguhit ng () pagguhit.

Ang bawat hugis ay may sariling pag-andar upang ipakita ito sa canvas. Narito ang pahina ng sanggunian para sa lahat ng mga hugis sa p5.js:

Upang makagawa ng isang bilog, gagamitin namin ang pagpapaandar ng ellipse. Ang pagpapaandar na ito ay kumukuha ng 3 mga argumento (ang mga numero na pumapasok sa loob ng panaklong). Ang unang numero ay ang X na posisyon ng gitna ng bilog sa canvas at ang pangalawang numero ay ang posisyon na Y sa canvas. Tandaan na ang kanang sulok sa kaliwang bahagi ay 0, 0 at ang canvas ay 400 ng 400 pixel. Kaya kung nais kong lumitaw ang bilog sa gitna ng canvas ilalagay ko ito sa 200 sa X axis at 200 sa Y axis. Maaari kang mag-eksperimento sa mga numerong ito upang makakuha ng isang pakiramdam para sa kung paano ilagay ang mga bagay sa canvas.

Itinatakda ng pangatlong numero ang laki ng bilog. Para sa halimbawang ito, itinakda ito sa 100 pixel ang diameter. Ang pagpapaandar ng ellipse ay maaari ding kumuha ng ikaapat na argumento na magbabago sa pangatlong argumento upang maapektuhan ang diameter ng X at ang ikaapat na argumento ay ang diameter ng Y. Maaari itong magamit upang makagawa ng mga hugis-itlog na mga hugis sa halip na perpektong mga bilog na bilog.

Upang maitakda ang kulay ng aming hugis, ginagamit namin ang function ng punan. Gumagamit ito ng 3 mga argumento na ang mga halagang RGB (R = pula, G = berde, B = asul). Ang bawat halaga ay maaaring isang numero sa pagitan ng 0 at 255. Halimbawa, upang gawing pula, ilalagay namin ang 255, 0, 0 na magiging pula lahat na walang berde o asul. Ang iba't ibang mga kumbinasyon ng mga numerong ito ay lilikha ng iba't ibang mga kulay.

Maraming mga website na nagbibigay ng mga halagang RGB para sa maraming magkakaibang mga kulay, tulad ng isang ito:

Kapag nahanap mo na ang halagang RGB upang tumugma sa iyong kulay ng PlayDoh, isulat ang punan na pagpapaandar sa itaas ng pagpapaandar ng hugis.

Maaari mong i-click ang play button sa web editor at dapat mong makita ang iyong hugis na lilitaw sa screen.

Hakbang 4: Gawin ang Iyong Hugis na Lumitaw Sa Isang Key Press

Dahil nais naming magkaroon ng aming p5.js sketch na maging interactive sa Makey Makey, kailangan naming magdagdag ng ilang code upang maganap ang isang bagay kapag pinindot namin ang isang susi sa keyboard. Sa kasong ito, nais naming lumitaw lamang ang hugis kung pinindot namin ang isang susi. Upang magawa ito kailangan natin ng isang kondisyong pahayag. Nangangahulugan ito na ang isang bagay sa aming code ay magaganap lamang kung ang isang tiyak na kundisyon ay natutugunan, sa kasong ito, pinindot ang isang susi.

Upang makagawa ng isang kondisyong kondisyunal na pahayag na ito, nagsisimula kami sa salitang kung susundan ng panaklong. Sa loob ng panaklong ay ang kundisyong nais naming matugunan. Sa p5.js, mayroong isang built in variable na tinatawag na keyIsPressed (tiyaking gagamitin mo ang mga malalaking titik na eksaktong kapareho ng nakasulat dito). Ang keyIsPressed ay isang variable ng boolean. Nangangahulugan ito na maaari itong magkaroon ng isang halaga ng alinman sa totoo o mali. Kapag pinindot ang susi, ang halaga ay totoo at kapag hindi ito pinindot, ang halaga ay mali.

Sa wakas nagdagdag kami ng isang hanay ng mga kulot na bracket {}. Sa loob ng mga kulot na bracket ay ang code na nais naming ipatupad kung ang aming kondisyon ay natutugunan. Kaya ilalagay lamang namin ang aming code upang magawa ang hugis sa pagitan ng mga kulot na braket na iyon.

Ngayon kapag pinatakbo namin ang aming sketch, hindi namin makikita ang hugis hanggang sa pindutin namin ang isang key sa keyboard.

MAHALAGA NA TANDAAN: Kapag nagdaragdag ng mga pangunahing pagpindot sa aming code, kailangang malaman ng web editor kung pinindot namin ang isang susi upang magsulat ng code sa text editor o pinipindot namin ang susi upang gawin ang bagay na na-code namin ng isang key na dapat gawin. Kapag na-click mo ang pindutan ng pag-play, ilipat ang mouse sa ibabaw ng canvas at mag-click sa canvas. Dadalhin nito ang pokus ng editor sa sketch at ang pagpindot sa isang key ay magpapalitaw sa key press code na nais naming mangyari

Hakbang 5: I-set up ang Makey Makey

Lumabas sa board ng Makey Makey, USB cable at dalawang mga clip ng buaya. Maglakip ng isang clip ng buaya sa Earth at isa sa Space key (dahil hindi namin tinukoy ang isang key sa aming code, ang anumang key na pinindot namin ay magpapalitaw sa hugis upang lumitaw).

Kunin ang clip ng buaya na nakakabit sa Space key at pindutin ang kabilang dulo sa hugis ng Playdoh.

I-plug ang USB cable sa laptop.

Hakbang 6: Pindutin ang Playdoh Shape

Hawakan ang metal na dulo ng clip ng buaya na nakakabit sa Daigdig sa Makey Makey at hawakan ang hugis ng Playdoh. Kapag hinawakan mo ang hugis ng Playdoh, dapat lumitaw ang naka-code na hugis sa canvas ng iyong sketch.

Narito ang isang link sa p5.js sketch para sa proyektong ito:

Kung ang hugis ay hindi lilitaw:

1. Tiyaking na-click mo ang mouse sa canvas ng sketch ng p5.js bago hawakan ang Playdoh.

2. Tiyaking hawak mo ang metal clip ng Earth wire.

Hakbang 7: Iba't ibang mga Hugis

Yellow Triangle:

Blue Square: