Eenvoudige Playdoh-vormen coderen met P5.js & Makey Makey - Ajarnpa

2025 Auteur: John Day | [email protected]. Laatst gewijzigd: 2025-01-23 15:01

Makey Makey-projecten »

Dit is een fysiek computerproject waarmee je een vorm kunt maken met Playdoh, die vorm kunt coderen met p5.js en die vorm kunt activeren om op het computerscherm te verschijnen door de Playdoh-vorm aan te raken met een Makey Makey.

p5.js is een open source, webgebaseerde, creatieve codeeromgeving in Javascript. Lees hier meer: https://p5js.org/

Je hebt geen codeerervaring nodig om dit project te doen. Dit kan worden gebruikt als een inleiding tot op tekst gebaseerde codering (in tegenstelling tot op blok gebaseerde talen zoals Scratch). U hoeft slechts 4 regels code te schrijven om dit project te voltooien. Er zijn verschillende manieren waarop u dit basisidee kunt wijzigen en uitbreiden.

Benodigdheden

Makey Makey Kit (met 2 krokodillenklemmen)

Playdoh (elke kleur)

Laptop met internetverbinding

Stap 1: Maak een Playdoh-vorm

Maak een vorm van de Playdoh. Dit kan een cirkel, ovaal, vierkant, rechthoek of driehoek zijn. Houd er rekening mee dat u deze vorm later moet coderen, dus hoe eenvoudiger de vorm, hoe gemakkelijker het codeergedeelte zal zijn. p5.js kan echter veel verschillende vormen coderen, zelfs aangepaste, zodat u kunt beslissen over de moeilijkheidsgraad die u wilt proberen.

Stap 2: Aan de slag in P5.js

Als je p5.js nog niet eerder hebt gebruikt, raad ik je aan de pagina 'Aan de slag' op de website te bekijken:

Ik raad ook ten zeerste aan om het YouTube-kanaal van The Coding Train te bekijken voor uitstekende tutorials over het gebruik van p5.js. Hier is een link naar een afspeellijst die alle basisprincipes doorloopt:

Aangezien p5.js webgebaseerd is, kunt u al uw codering op internet doen met de p5 Web Editor. U hebt geen account nodig om dit project te doen, maar als u uw werk wilt opslaan, moet u zich aanmelden voor een account.

Webeditor:

De p5.js-webeditor heeft een gebied om de code aan de linkerkant te schrijven en het canvas dat de resultaten van de code aan de rechterkant zal weergeven.

Elke p5.js-schets bevat een setup()-functie en een draw()-functie. De functie setup() wordt één keer uitgevoerd wanneer de schets voor het eerst wordt gestart. In de setup() functie is de createCanvas functie die een ruimte creëert waar je vorm zal worden getekend. De getallen tussen haakjes van de functie createCanvas stellen de X-as (van links naar rechts) en de Y-as (van boven naar beneden) van het canvas in. De standaardnummers zijn 400, 400, wat betekent dat uw canvas 400 pixels van links naar rechts en 400 pixels van boven naar beneden is (u kunt deze altijd wijzigen om aan uw behoeften te voldoen). Houd er rekening mee dat de linkerbovenhoek van het canvas het punt 0, 0 is. Dit is belangrijk om te weten wanneer u uw vorm codeert.

De functie draw() wordt uitgevoerd als een lus, wat betekent dat deze constant wordt bijgewerkt, ongeveer. 60 keer per seconde. Hierdoor kunnen we animaties maken in onze schetsen. Binnen de functie draw() bevindt zich de achtergrondfunctie die een kleur aan ons canvas toevoegt. De standaardwaarde is 220, wat een grijswaardenwaarde is. 0 = zwart, 255 = wit en het getal daartussen zijn verschillende grijstinten. De achtergrondfunctie kan ook RGB-waarden aannemen waarmee we kleur kunnen toevoegen. Hierover meer in de volgende stap.

Stap 3: Codeer uw vorm in P5.js

Om uw vorm te coderen, hoeft u alleen maar regels code toe te voegen aan de functie draw().

Elke vorm heeft zijn eigen functie om deze op het canvas te laten verschijnen. Hier is de referentiepagina voor alle vormen in p5.js:

Om een cirkel te maken, gebruiken we de ellipsfunctie. Deze functie heeft 3 argumenten (de getallen die tussen haakjes staan). Het eerste cijfer is de X-positie van het middelpunt van de cirkel op het canvas en het tweede cijfer is de Y-positie op het canvas. Onthoud dat de linkerbovenhoek 0, 0 is en dat het canvas 400 bij 400 pixels is. Dus als ik wil dat de cirkel in het midden van het canvas verschijnt, zet ik hem op 200 op de X-as en 200 op de Y-as. Je kunt met deze cijfers experimenteren om een idee te krijgen hoe je dingen op het canvas plaatst.

Het derde cijfer bepaalt de grootte van de cirkel. Voor dit voorbeeld is de diameter ingesteld op 100 pixels. De ellipsfunctie kan ook een vierde argument aannemen dat het derde argument zou veranderen om de X-diameter te beïnvloeden en het vierde argument zou de Y-diameter zijn. Hiermee kunnen ovale vormen worden gemaakt in plaats van perfect ronde cirkels.

Om de kleur van onze vorm in te stellen, gebruiken we de vulfunctie. Dit gebruikt 3 argumenten die de RGB-waarden zijn (R = rood, G = groen, B = blauw). Elke waarde kan een getal tussen 0 en 255 zijn. Om bijvoorbeeld rood te maken, zouden we 255, 0, 0 plaatsen, wat allemaal rood zou zijn zonder groen of blauw. Verschillende combinaties van deze nummers zullen verschillende kleuren creëren.

Er zijn verschillende websites die RGB-waarden bieden voor veel verschillende kleuren, zoals deze:

Zodra u de RGB-waarde hebt gevonden die overeenkomt met uw kleur van PlayDoh, schrijft u de vulfunctie boven de vormfunctie.

U kunt dan op de afspeelknop in de webeditor klikken en u zou uw vorm op het scherm moeten zien verschijnen.

Stap 4: laat uw vorm verschijnen met een toetsdruk

Omdat we onze p5.js-schets interactief willen hebben met de Makey Makey, moeten we wat code toevoegen om iets te laten gebeuren wanneer we op een toets op het toetsenbord drukken. In dit geval willen we dat de vorm alleen verschijnt als we op een toets drukken. Hiervoor hebben we een voorwaardelijke verklaring nodig. Dit betekent dat iets in onze code alleen gebeurt als aan een bepaalde voorwaarde wordt voldaan, in dit geval wordt er een toets ingedrukt.

Om deze voorwaardelijke uitspraak conditioneel te maken, beginnen we met het woord if gevolgd door haakjes. Binnen de haakjes staat de voorwaarde waaraan we willen voldoen. In p5.js is er een ingebouwde variabele genaamd keyIsPressed (zorg ervoor dat u de hoofdletters precies hetzelfde gebruikt als hier geschreven). keyIsPressed is een booleaanse variabele. Dit betekent dat het een waarde kan hebben van waar of onwaar. Wanneer de toets wordt ingedrukt, is de waarde waar en wanneer deze niet wordt ingedrukt, is de waarde onwaar.

Als laatste voegen we een set accolades { } toe. Binnen de accolades staat de code die we willen uitvoeren als aan onze voorwaarde is voldaan. Dus we gaan gewoon onze code plaatsen om de vorm tussen die accolades te maken.

Wanneer we nu onze schets uitvoeren, zullen we de vorm pas zien als we op een toets op het toetsenbord drukken.

BELANGRIJKE OPMERKING: bij het toevoegen van toetsaanslagen aan onze code, moet de webeditor weten of we op een toets drukken om code te schrijven in de teksteditor of dat we op de toets drukken om te doen waarvoor we een toetsaanslag hebben gecodeerd. Wanneer u op de afspeelknop klikt, beweegt u de muis over het canvas en klikt u op het canvas. Dit zal de focus van de editor naar de schets brengen en het indrukken van een toets zal de toetsaanslagcode activeren die we willen laten gebeuren

Stap 5: Makey Makey instellen

Haal het Makey Makey-bord, de USB-kabel en twee krokodillenklemmen tevoorschijn. Bevestig een krokodillenklem aan de aarde en een aan de spatiebalk (aangezien we geen sleutel in onze code hebben gespecificeerd, zal elke toets die we indrukken ervoor zorgen dat de vorm verschijnt).

Pak de krokodillenklem die aan de spatiebalk is bevestigd en druk het andere uiteinde in de Playdoh-vorm.

Steek de USB-kabel in de laptop.

Stap 6: Raak de Playdoh-vorm aan

Houd het metalen uiteinde van de krokodillenklem vast die aan de aarde op de Makey Makey is bevestigd en raak de Playdoh-vorm aan. Wanneer u de Playdoh-vorm aanraakt, zou de gecodeerde vorm op het canvas van uw schets moeten verschijnen.

Hier is een link naar de p5.js-schets voor dit project:

Als de vorm niet verschijnt:

1. Zorg ervoor dat je met de muis op het canvas van de p5.js-schets hebt geklikt voordat je de Playdoh aanraakt.

2. Zorg ervoor dat u de metalen clip van de aardedraad vasthoudt.

Stap 7: Verschillende vormen

Gele Driehoek:

Blauw vierkant: