Kódovanie jednoduchých tvarov Playdoh W/ P5.js a Makey Makey: 7 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:56

Makey Makey Projects »

Jedná sa o fyzický výpočtový projekt, ktorý vám umožňuje vytvoriť tvar pomocou programu Playdoh, kódovať tento tvar pomocou súboru p5.js a spustiť tento tvar tak, aby sa zobrazoval na obrazovke počítača, dotknutím sa tvaru Playdoh pomocou Makey Makey.

p5.js je open source, webové, kreatívne kódovacie prostredie v jazyku Javascript. Viac informácií nájdete tu:

Na vykonanie tohto projektu nepotrebujete žiadne skúsenosti s kódovaním. Toto by sa dalo použiť ako úvod do textového kódovania (na rozdiel od blokových jazykov, ako je Scratch). Na dokončenie tohto projektu stačí napísať 4 riadky kódu. Existuje niekoľko spôsobov, ako môžete zmeniť a rozšíriť túto základnú myšlienku.

Zásoby

Makey Makey Kit (s 2 krokosvorkami)

Playdoh (akejkoľvek farby)

Notebook s pripojením na internet

Krok 1: Vytvorte tvar Playdoh

Vytvorte si tvar z Playdoh. Môže to byť kruh, ovál, štvorec, obdĺžnik alebo trojuholník. Uvedomte si, že tento tvar budete musieť neskôr kódovať, takže čím je tvar jednoduchší, tým bude kódovacia časť jednoduchšia. Server p5.js však dokáže kódovať mnoho rôznych tvarov, dokonca aj vlastných, takže sa môžete rozhodnúť, akú úroveň obtiažnosti chcete vyskúšať.

Krok 2: Začnite v jazyku P5.js

Ak ste ešte nepoužili súbor p5.js, odporúčam vám pozrieť sa na stránku Začíname na webe:

Odporúčam tiež pozrieť sa na youtube kanál The Coding Train, kde nájdete skvelé návody na používanie súboru p5.js. Tu je odkaz na zoznam skladieb, ktorý prechádza všetkými základmi:

Pretože p5.js je webový, všetky vaše kódovanie môžete vykonávať na webe pomocou webového editora p5. Na uskutočnenie tohto projektu nepotrebujete účet, ale ak si chcete uložiť svoju prácu, budete si musieť účet vytvoriť.

Webový editor:

Webový editor p5.js má oblasť na napísanie kódu vľavo a plátno, ktoré vpravo zobrazuje výsledky kódu.

Každá skica p5.js obsahuje funkciu setup () a draw (). Funkcia setup () sa spustí raz pri prvom spustení náčrtu. Vo funkcii setup () je funkcia createCanvas, ktorá vytvára priestor, kde sa nakreslí váš tvar. Čísla v zátvorkách funkcie createCanvas nastavujú os X (zľava doprava) a os Y (zhora nadol) plátna. Predvolené čísla sú 400, 400, čo znamená, že plátno má 400 pixelov zľava doprava a 400 pixelov zhora nadol (Tieto hodnoty môžete kedykoľvek zmeniť tak, aby vyhovovali vašim potrebám). Uvedomte si, že ľavý horný roh plátna je bod 0, 0. To bude dôležité vedieť pri kódovaní svojho tvaru.

Funkcia draw () beží ako slučka, čo znamená, že sa neustále aktualizuje, cca. 60 krát za sekundu. To nám umožňuje vytvárať animácie v našich náčrtoch. Vnútri funkcie draw () je funkcia pozadia, ktorá pridáva farbu na naše plátno. Predvolená hodnota je 220, čo je hodnota v odtieňoch sivej. 0 = čierna, 255 = biela a číslo medzi nimi budú rôzne odtiene šedej. Funkcia pozadia môže mať aj hodnoty RGB, ktoré nám umožňujú pridať farbu. Viac o tom v nasledujúcom kroku.

Krok 3: Kódujte svoj tvar v jazyku P5.js

Na kódovanie vášho tvaru budete potrebovať iba pridanie do riadkov kódu vo funkcii draw ().

Každý tvar má svoju vlastnú funkciu, aby sa objavil na plátne. Tu je referenčná stránka pre všetky tvary v p5.js:

Na vytvorenie kruhu použijeme funkciu elipsa. Táto funkcia má 3 argumenty (čísla uvedené v zátvorkách). Prvé číslo je pozícia X stredu kruhu na plátne a druhé číslo je poloha Y na plátne. Nezabudnite, že ľavý horný roh je 0, 0 a plátno má rozmery 400 x 400 pixelov. Ak teda chcem, aby sa kruh zobrazil v strede plátna, dám ho na 200 na os X a 200 na os Y. Môžete experimentovať s týmito číslami, aby ste získali predstavu o tom, ako umiestniť veci na plátno.

Tretie číslo určuje veľkosť kruhu. V tomto prípade je priemer nastavený na 100 pixelov. Funkcia elipsy môže tiež mať štvrtý argument, ktorý by zmenil tretí argument na priemer X a štvrtý argument by bol priemer Y. Z toho možno namiesto dokonale okrúhlych kruhov vytvárať oválne tvary.

Na nastavenie farby nášho tvaru používame funkciu výplne. Toto používa 3 argumenty, ktorými sú hodnoty RGB (R = červená, G = zelená, B = modrá). Každá hodnota môže byť číslo od 0 do 255. Ak napríklad chceme urobiť červenú, zadáme 255, 0, 0, čo by bolo celé červené bez zelenej alebo modrej farby. Rôzne kombinácie týchto čísel vytvoria rôzne farby.

Existuje niekoľko webových stránok, ktoré poskytujú hodnoty RGB pre mnoho rôznych farieb, ako je táto:

Akonáhle nájdete hodnotu RGB, ktorá zodpovedá vašej farbe PlayDoh, napíšte funkciu výplne nad funkciu tvaru.

Potom môžete vo webovom editore kliknúť na tlačidlo Prehrať a na obrazovke by ste mali vidieť svoj tvar.

Krok 4: Nechajte svoj tvar vyzerať stlačením klávesu

Pretože chceme, aby bol náš náčrt p5.js interaktívny s Makey Makey, musíme pridať nejaký kód, aby sa niečo stalo, keď stlačíme kláves na klávesnici. V tomto prípade chceme, aby sa tvar zobrazil iba vtedy, ak stlačíme kláves. Na to potrebujeme podmienečné vyhlásenie. To znamená, že niečo v našom kóde sa stane iba vtedy, ak je splnená určitá podmienka, v tomto prípade je stlačené tlačidlo.

Aby sme podmienili toto podmienené tvrdenie, začneme slovom, ak za ním nasledujú zátvorky. V zátvorkách bude podmienka, ktorú chceme splniť. V p5.js je vstavaná premenná s názvom keyIsPressed (uistite sa, že používate veľké písmená úplne rovnaké ako tu). keyIsPressed je logická premenná. To znamená, že môže mať hodnotu buď true alebo false. Keď je kláves stlačený, jeho hodnota je pravdivá a keď nie je stlačený, jeho hodnota je falošná.

Nakoniec pridáme sadu zložených zátvoriek {}. Vnútri zložených zátvoriek bude kód, ktorý chceme vykonať, ak je splnená naša podmienka. Chystáme sa vložiť náš kód, aby vytvoril tvar medzi týmito zloženými zátvorkami.

Keď spustíme náčrt, neuvidíme tvar, kým nestlačíme kláves na klávesnici.

DÔLEŽITÁ POZNÁMKA: Pri pridávaní stlačení klávesov do nášho kódu musí webový editor vedieť, či stlačením klávesu píšeme kód v textovom editore alebo stlačíme kláves, aby sme vykonali to, čo sme kódovali stlačením klávesu. Keď kliknete na tlačidlo Prehrať, presuňte myš nad plátno a kliknite na plátno. Tým sa zameria editor na náčrt a stlačením klávesu sa spustí kód stlačenia klávesu, ktorý chceme, aby sa stal

Krok 5: Nastavte Makey Makey

Vyberte dosku Makey Makey, kábel USB a dve aligátorové spony. Pripojte jeden aligátorový klip na Zem a jeden na medzerník (pretože v našom kóde sme nezadali žiadny kľúč, akýkoľvek kláves, ktorý stlačíme, spustí zobrazenie tvaru).

Vezmite klip aligátora, ktorý je pripevnený k medzerníku, a druhý koniec zatlačte do tvaru Playdoh.

Pripojte kábel USB k prenosnému počítaču.

Krok 6: Dotknite sa tvaru Playdoh

Uchopte kovový koniec svorky aligátora, ktorý je pripevnený k Zemi, na Makey Makey a dotknite sa tvaru Playdoh. Keď sa dotknete tvaru Playdoh, kódovaný tvar by sa mal objaviť na plátne vašej skice.

Tu je odkaz na skicu p5.js k tomuto projektu:

Ak sa tvar nezobrazí:

1. Uistite sa, že ste klikli myšou na plátno náčrtu p5.js a až potom sa dotknete položky Playdoh.

2. Uistite sa, že držíte kovovú svorku uzemňovacieho vodiča.

Krok 7: Rôzne tvary

Žltý trojuholník:

Modré námestie: