Lihtsate Playdoh -vormide kodeerimine W/ P5.js ja Makey Makey: 7 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:46

Makey Makey projektid »

See on füüsilise andmetöötluse projekt, mis võimaldab teil luua kuju Playdoh'iga, koodi, mis kujundab p5.js abil, ja käivitada selle kuju arvutiekraanil, puudutades Makeyd Makey abil Playdoh'i kuju.

p5.js on avatud lähtekoodiga veebipõhine loominguline kodeerimiskeskkond Javascriptis. Lisateavet leiate siit:

Selle projekti tegemiseks ei vaja te kodeerimiskogemust. Seda võiks kasutada tekstipõhise kodeerimise sissejuhatuseks (erinevalt plokkpõhistest keeltest nagu Scratch). Selle projekti lõpuleviimiseks peate kirjutama ainult 4 rida koodi. Selle põhiidee muutmiseks ja laiendamiseks on mitu võimalust.

Tarvikud

Makey Makey Kit (2 alligaatoriklambriga)

Playdoh (mis tahes värvi)

Sülearvuti internetiühendusega

Samm: tehke Playdoh kuju

Tehke Playdohist kuju. See võib olla ring, ovaal, ruut, ristkülik või kolmnurk. Pidage meeles, et peate selle kuju hiljem kodeerima, nii et mida lihtsam kuju, seda lihtsam on kodeeriv osa. Kuid p5.js suudab kodeerida paljusid erinevaid kujundeid, isegi kohandatud, nii et saate otsustada, millist raskusastet soovite proovida.

Samm 2: Alustage rakenduses P5.js

Kui te pole varem p5.js-d kasutanud, soovitan vaadata veebisaidi alustamislehte:

Samuti soovitan tungivalt vaadata YouTube'i kanalit The Coding Train, kust leiate suurepäraseid õpetusi p5.js kasutamise kohta. Siin on link esitusloendile, mis läbib kõik põhitõed:

Kuna p5.js on veebipõhine, saate kogu kodeerimise teha veebis p5 veebiredaktori abil. Te ei vaja selle projekti tegemiseks kontot, kuid kui soovite oma tööd salvestada, peate konto registreerima.

Veebiredaktor:

Veebiredaktoril p5.js on vasakule kood kirjutamiseks ala ja lõuend, mis kuvab paremal koodi tulemused.

Iga p5.js visand sisaldab setup () funktsiooni ja draw () funktsiooni. Funktsioon setup () töötab eskiisi esmakordsel käivitamisel üks kord. Funktsioonis setup () on funktsioon createCanvas, mis loob ruumi, kuhu teie kuju joonistatakse. Funktsiooni createCanvas sulgudes olevad numbrid määravad lõuendi X -telje (vasakult paremale) ja Y -telje (ülevalt alla). Vaikimisi on numbrid 400, 400, mis tähendab, et teie lõuend on 400 pikslit vasakult paremale ja 400 pikslit ülevalt alla (saate neid alati oma vajaduste järgi muuta). Pidage meeles, et lõuendi vasak ülemine nurk on punkt 0, 0. See on oluline teada, kui vormite oma kuju.

Funktsioon draw () töötab tsüklina, mis tähendab, et seda uuendatakse pidevalt, u. 60 korda sekundis. See võimaldab meil oma visandites animatsiooni luua. Funktsiooni draw () sees on taustafunktsioon, mis lisab meie lõuendile värvi. Vaikimisi on 220, mis on halltoonide väärtus. 0 = must, 255 = valge ja number nende vahel on erinevad halli varjundid. Taustafunktsioon võib võtta ka RGB väärtusi, mis võimaldavad meil värvi lisada. Lisateavet selle kohta järgmises etapis.

3. samm: kodeerige oma kuju P5.js -is

Oma kuju kodeerimiseks peate lisama ainult joonistusfunktsiooni draw () sees olevatele koodiridadele.

Igal kujundil on oma funktsioon lõuendil ilmumiseks. Siin on kõigi p5.js kujundite viiteleht:

Ringjoone tegemiseks kasutame ellipsifunktsiooni. See funktsioon võtab 3 argumenti (sulgudes olevad numbrid). Esimene number on lõuendil oleva ringi keskpunkti X -positsioon ja teine number Y -positsioon lõuendil. Pidage meeles, et vasak ülemine nurk on 0, 0 ja lõuend on 400 x 400 pikslit. Nii et kui ma tahan, et ring ilmuks lõuendi keskele, panen selle X -teljele 200 ja Y -teljele 200. Nende numbritega saate katsetada, et mõista, kuidas asju lõuendile paigutada.

Kolmas number määrab ringi suuruse. Selle näite jaoks on seatud läbimõõduga 100 pikslit. Ellipsifunktsioon võib võtta ka neljanda argumendi, mis muudaks kolmanda argumendi, et see mõjutaks X läbimõõtu, ja neljas argument oleks Y läbimõõt. Seda saab kasutada ovaalsete kujundite tegemiseks ideaalselt ümarate ringide asemel.

Meie kuju värvi määramiseks kasutame täitmisfunktsiooni. See kasutab kolme argumenti, mis on RGB väärtused (R = punane, G = roheline, B = sinine). Iga väärtus võib olla arv vahemikus 0 kuni 255. Näiteks punase saamiseks paneksime 255, 0, 0, mis oleks punane, ilma rohelise või siniseta. Nende numbrite erinevad kombinatsioonid loovad erinevaid värve.

On mitmeid veebisaite, mis pakuvad RGB väärtusi paljude erinevate värvide jaoks, näiteks see:

Kui olete leidnud RGB väärtuse, mis sobib teie PlayDoh värviga, kirjutage täitmisfunktsioon kuju funktsiooni kohale.

Seejärel saate klõpsata veebiredaktoris esitusnupul ja peaksite nägema oma kuju ekraanil.

4. samm: muutke oma kuju klahvivajutusega nähtavaks

Kuna me tahame, et meie p5.js visand oleks Makey Makeyga interaktiivne, peame klaviatuuri klahvi vajutades lisama koodi, et midagi juhtuks. Sel juhul tahame, et kuju ilmuks ainult siis, kui vajutame klahvi. Selleks vajame tingimuslauset. See tähendab, et midagi meie koodis juhtub ainult siis, kui teatud tingimus on täidetud, sel juhul vajutatakse klahvi.

Selle tingimuslause tingimuslikuks muutmiseks alustame sõnaga, kui sellele järgnevad sulud. Sulgude sees on tingimus, mida soovime täita. P5.js -s on sisseehitatud muutuja nimega keyIsPressed (veenduge, et kasutate suurtähti täpselt samamoodi nagu siin kirjutatud). keyIsPressed on loogiline muutuja. See tähendab, et selle väärtus võib olla tõene või vale. Kui klahvi vajutatakse, on selle väärtus tõene ja kui seda ei vajutata, on väärtus vale.

Lõpuks lisame lokkisulgude komplekti {}. Lokkisulgude sees on kood, mida soovime täita, kui meie tingimus on täidetud. Nii et me lihtsalt paneme oma koodi, et muuta kuju nende lokkisulgude vahele.

Nüüd, kui me oma visandit käivitame, ei näe me kuju enne, kui vajutame klaviatuuri klahvi.

TÄHTIS MÄRKUS. Klahvivajutuste lisamisel meie koodi peab veebitoimetaja teadma, kas me vajutame tekstiredaktoris koodi kirjutamiseks klahvi või vajutame klahvi, et teha seda, mida me kodeerisime. Kui klõpsate esitusnupul, liigutage hiir lõuendi kohal ja klõpsake lõuendil. See viib visandile fookuse ja klahvi vajutamine käivitab klahvivajutuskoodi, mida soovime

Samm: seadistage Makey Makey

Võtke välja Makey Makey plaat, USB -kaabel ja kaks alligaatoriklambrit. Kinnitage üks alligaatoriklamber Maa külge ja üks tühikuklahvi külge (kuna me ei määranud oma koodis võtit, käivitab iga vajutatud klahv kuju ilmumise).

Võtke alligaatoriklamber, mis on kinnitatud tühikuklahvi külge, ja vajutage teine ots Playdoh -kujuliseks.

Ühendage USB -kaabel sülearvutiga.

6. samm: puudutage Playdoh Shape'i

Hoidke alligaatoriklambri metallotsast, mis on Makey Makey peal Maa külge kinnitatud, ja puudutage Playdoh -kuju. Playdohi kuju puudutades peaks kodeeritud kuju ilmuma teie visandi lõuendile.

Siin on link selle projekti visandile p5.js:

Kui kuju ei ilmu:

1. Enne Playdoh puudutamist veenduge, et olete hiirega klõpsanud eskiisi p5.js lõuendil.

2. Veenduge, et hoiate maandusjuhtme metallklambrit.

Samm: erinevad kujud

Kollane kolmnurk:

Sinine ruut: