Kódování jednoduchých tvarů Playdoh W/ P5.js a Makey Makey: 7 kroků

2025 Autor: John Day | [email protected]. Naposledy změněno: 2025-01-23 14:38

Makey Makey Projects »

Jedná se o fyzický výpočetní projekt, který vám umožní vytvořit tvar pomocí Playdoh, kódovat tento tvar pomocí p5.js a spustit tento tvar tak, aby se zobrazoval na obrazovce počítače dotykem na tvar Playdoh pomocí Makey Makey.

p5.js je open source, webové, kreativní kódovací prostředí v Javascriptu. Více informací naleznete zde:

K provedení tohoto projektu nepotřebujete žádné zkušenosti s kódováním. To by mohlo být použito jako úvod do textového kódování (na rozdíl od blokových jazyků, jako je Scratch). K dokončení tohoto projektu stačí napsat 4 řádky kódu. Tuto základní myšlenku můžete změnit a rozšířit několika způsoby.

Zásoby

Makey Makey Kit (w/ 2 Alligator Clips)

Playdoh (libovolná barva)

Notebook s připojením k internetu

Krok 1: Vytvořte tvar Playdoh

Vytvořte si tvar z Playdoh. Může to být kruh, ovál, čtverec, obdélník nebo trojúhelník. Uvědomte si, že tento tvar budete muset později kódovat, takže čím jednodušší tvar, tím snazší bude kódovací část. Soubor p5.js je však schopen kódovat mnoho různých tvarů, dokonce i vlastních, takže se můžete rozhodnout, jakou úroveň obtížnosti chcete vyzkoušet.

Krok 2: Začněte v P5.js

Pokud jste p5.js dosud nepoužívali, doporučuji se podívat na stránku Začínáme na webu:

Také velmi doporučuji podívat se na youtube kanál The Coding Train, kde najdete skvělé návody na používání p5.js. Zde je odkaz na seznam skladeb, který prochází všemi základy:

Vzhledem k tomu, že soubor p5.js je webový, můžete všechna svá kódování provádět na webu pomocí webového editoru p5. K provedení tohoto projektu nepotřebujete účet, ale pokud si chcete práci uložit, budete si muset účet zaregistrovat.

Webový editor:

Webový editor p5.js má oblast pro napsání kódu vlevo a plátno, které zobrazí výsledky kódu vpravo.

Každá skica p5.js obsahuje funkci setup () a draw (). Funkce setup () se spustí jednou při prvním spuštění skici. Ve funkci setup () je funkce createCanvas, která vytváří prostor, kde bude nakreslen váš tvar. Čísla v závorkách funkce createCanvas nastavují osu X (zleva doprava) a osu Y (shora dolů) plátna. Výchozí čísla jsou 400, 400, což znamená, že vaše plátno má 400 pixelů zleva doprava a 400 pixelů shora dolů (Vždy je můžete změnit tak, aby vyhovovaly vašim potřebám). Uvědomte si, že levý horní roh plátna je bod 0, 0. To bude důležité vědět, když kódujete svůj tvar.

Funkce draw () běží jako smyčka, což znamená, že se neustále aktualizuje, cca. 60krát za sekundu. To nám umožňuje vytvářet animace v našich skicách. Uvnitř funkce draw () je funkce na pozadí, která dodává našemu plátnu barvu. Výchozí hodnota je 220, což je hodnota ve stupních šedi. 0 = černá, 255 = bílá a číslo mezi nimi bude mít různé odstíny šedé. Funkce na pozadí může také nabývat hodnot RGB, které nám umožňují přidat barvu. Více o tom v dalším kroku.

Krok 3: Kódujte svůj tvar v P5.js

Chcete -li kódovat svůj tvar, budete muset přidat pouze do řádků kódu uvnitř funkce draw ().

Každý tvar má svou vlastní funkci, aby se objevil na plátně. Zde je referenční stránka pro všechny tvary v souboru p5.js:

K vytvoření kruhu použijeme funkci elipsa. Tato funkce má 3 argumenty (čísla, která jsou uvedena v závorkách). První číslo je poloha X středu kruhu na plátně a druhé číslo je poloha Y na plátně. Pamatujte, že levý horní roh je 0, 0 a plátno má rozměry 400 x 400 pixelů. Pokud tedy chci, aby se kruh zobrazil uprostřed plátna, uvedu jej na 200 na ose X a 200 na ose Y. S těmito čísly můžete experimentovat, abyste získali představu o tom, jak umístit věci na plátno.

Třetí číslo určuje velikost kruhu. V tomto případě je nastaven na průměr 100 pixelů. Funkce elipsy může také mít čtvrtý argument, který by změnil třetí argument na průměr X a čtvrtý argument by byl průměr Y. Toho lze využít k vytvoření oválných tvarů místo dokonale kulatých kruhů.

K nastavení barvy našeho tvaru používáme funkci výplně. To používá 3 argumenty, které jsou hodnotami RGB (R = červená, G = zelená, B = modrá). Každá hodnota může být číslo mezi 0 a 255. Například, abychom udělali červenou, dali bychom 255, 0, 0, což by bylo celé červené bez zelené nebo modré. Různé kombinace těchto čísel vytvoří různé barvy.

Existuje několik webových stránek, které poskytují hodnoty RGB pro mnoho různých barev, jako je tato:

Jakmile najdete hodnotu RGB, která odpovídá vaší barvě PlayDoh, napište funkci fill nad funkci shape.

Poté můžete ve webovém editoru kliknout na tlačítko Přehrát a na obrazovce byste měli vidět svůj tvar.

Krok 4: Nechte svůj tvar vypadat stisknutím klávesy

Protože chceme, aby naše skica p5.js byla interaktivní s Makey Makey, musíme přidat nějaký kód, aby se něco stalo, když stiskneme klávesu na klávesnici. V tomto případě chceme, aby se tvar zobrazil pouze tehdy, když stiskneme klávesu. K tomu potřebujeme podmíněné prohlášení. To znamená, že se něco v našem kódu stane, pouze pokud je splněna určitá podmínka, v tomto případě je stisknuta klávesa.

Abychom toto podmíněné tvrzení podmínili, začneme slovem, pokud za ním následují závorky. Uvnitř závorek bude podmínka, kterou chceme splnit. V p5.js je vestavěná proměnná s názvem keyIsPressed (ujistěte se, že používáte velká písmena přesně stejná, jako je napsáno zde). keyIsPressed je logická proměnná. To znamená, že může mít hodnotu true nebo false. Když je klávesa stisknuta, její hodnota je true a když není stisknuta, její hodnota je false.

Nakonec přidáme sadu složených závorek {}. Uvnitř složených závorek bude kód, který chceme spustit, pokud je splněna naše podmínka. Takže jen vložíme náš kód, abychom vytvořili tvar mezi těmi složenými závorkami.

Když teď spustíme naši skicu, neuvidíme tvar, dokud nestiskneme klávesu na klávesnici.

DŮLEŽITÁ POZNÁMKA: Při přidávání stisknutí kláves do našeho kódu musí webový editor vědět, zda stiskneme klávesu pro napsání kódu v textovém editoru, nebo stiskneme klávesu, abychom udělali to, co jsme kódovali stisknutím klávesy. Když kliknete na tlačítko Přehrát, přesuňte myš nad plátno a klikněte na plátno. To přinese zaměření editoru na skicu a stisknutí klávesy spustí kód stisknutí klávesy, který chceme provést

Krok 5: Nastavte Makey Makey

Vyjměte desku Makey Makey, kabel USB a dvě aligátorové spony. Připojte jeden aligátorový klip na Zemi a jeden na mezerník (protože jsme v našem kódu nezadali klíč, jakákoli klávesa, kterou stiskneme, spustí zobrazení tvaru).

Vezměte klip aligátora, který je připevněn ke klávesě Space, a druhý konec zatlačte do tvaru Playdoh.

Připojte kabel USB k notebooku.

Krok 6: Stiskněte tvar Playdoh

Uchopte kovový konec aligátorové spony připevněné k Zemi na Makey Makey a dotkněte se tvaru Playdoh. Když se dotknete tvaru Playdoh, měl by se zakódovaný tvar objevit na plátně vaší skici.

Zde je odkaz na skicu p5.js pro tento projekt:

Pokud se tvar nezobrazí:

1. Než se dotknete Playdoh, ujistěte se, že jste klikli myší na plátno skici p5.js.

2. Ujistěte se, že držíte kovovou svorku zemnicího drátu.

Krok 7: Různé tvary

Žlutý trojúhelník:

Modré náměstí: