Kodning Simple Playdoh Shapes W/ P5.js & Makey Makey: 7 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:26

Makey Makey -projekter »

Dette er et fysisk databehandlingsprojekt, som giver dig mulighed for at oprette en form med Playdoh, kode denne form ved hjælp af p5.js og udløse denne form for at blive vist på computerskærmen ved at røre ved Playdoh -formen ved hjælp af en Makey Makey.

p5.js er et open source, webbaseret, kreativt kodningsmiljø i Javascript. Lær mere her:

Du behøver ikke nogen kodeoplevelse for at udføre dette projekt. Dette kunne bruges som en introduktion til tekstbaseret kodning (i modsætning til blokbaserede sprog som Scratch). Du behøver kun at skrive 4 linjer kode for at fuldføre dette projekt. Der er flere måder, du kan ændre og udvide på denne grundlæggende idé.

Forbrugsvarer

Makey Makey Kit (m/ 2 Alligator Clips)

Playdoh (enhver farve)

Laptop m/ internetforbindelse

Trin 1: Lav en Playdoh -form

Lav en form ud af Playdoh. Dette kan være en cirkel, oval, firkant, rektangel eller trekant. Vær opmærksom på, at du bliver nødt til at kode denne form senere, så jo enklere formen er, jo lettere bliver kodningsdelen. Imidlertid er p5.js i stand til at kode mange forskellige former, selv tilpassede, så du kan beslutte, hvilket sværhedsgrad du vil prøve.

Trin 2: Kom godt i gang i P5.js

Hvis du ikke har brugt p5.js før, anbefaler jeg at tjekke siden Kom godt i gang på webstedet:

Jeg anbefaler også stærkt at tjekke The Coding Train youtube kanal for fremragende vejledninger om brug af p5.js. Her er et link til en afspilningsliste, der går igennem alt det grundlæggende:

Da p5.js er webbaseret, kan du udføre al din kodning på internettet ved hjælp af p5 Web Editor. Du behøver ikke en konto for at udføre dette projekt, men hvis du gerne vil gemme dit arbejde, skal du tilmelde dig en konto.

Webredaktør:

Webredaktøren p5.js har et område til at skrive koden til venstre og lærredet, der viser resultaterne af koden til højre.

Hver p5.js -skitse indeholder en setup () -funktion og en draw () -funktion. Opsætningsfunktionen () kører en gang, når skitsen først starter. I setup () -funktionen er createCanvas -funktionen, som skaber et rum, hvor din form vil blive tegnet. Tallene i parenteserne i createCanvas -funktionen angiver X -aksen (venstre til højre) og Y -aksen (top til bund) på lærredet. Standardtalene er 400, 400, hvilket betyder, at dit lærred er 400 pixels fra venstre mod højre og 400 pixels fra top til bund (Du kan altid ændre disse, så de passer til dine behov). Vær opmærksom på, at det øverste venstre hjørne af lærredet er punktet 0, 0. Dette er vigtigt at vide, når du koder din form.

Draw () -funktionen kører som en loop, hvilket betyder, at den konstant opdateres, ca. 60 gange i sekundet. Dette kan give os mulighed for at skabe animation i vores skitser. Inde i funktionen draw () er baggrundsfunktionen, der tilføjer en farve til vores lærred. Standarden er 220, hvilket er en gråtoneværdi. 0 = sort, 255 = hvid og tal imellem vil være varierende gråtoner. Baggrundsfunktionen kan også tage RGB -værdier, som giver os mulighed for at tilføje farve. Mere om dette i det næste trin.

Trin 3: Kode din form i P5.js

For at kode din form behøver du kun at tilføje til kodelinjer inde i funktionen draw ().

Hver form har sin egen funktion for at få den til at vises på lærredet. Her er referencesiden for alle former i p5.js:

For at lave en cirkel bruger vi ellipsefunktionen. Denne funktion tager 3 argumenter (de tal, der går inden for parenteserne). Det første tal er X -positionen i midten af cirklen på lærredet, og det andet tal er Y -positionen på lærredet. Husk, at det øverste venstre hjørne er 0, 0 og lærredet er 400 x 400 pixels. Så hvis jeg vil have cirklen til at vises i midten af lærredet, vil jeg sætte den på 200 på X -aksen og 200 på Y -aksen. Du kan eksperimentere med disse tal for at få en fornemmelse af, hvordan du placerer ting på lærredet.

Det tredje tal angiver størrelsen på cirklen. I dette eksempel er det indstillet til 100 pixels i diameter. Ellipsefunktionen kan også tage et fjerde argument, som ville ændre det tredje argument til at påvirke X -diameteren, og det fjerde argument ville være Y -diameteren. Dette kan bruges til at lave ovale former i stedet for perfekt runde cirkler.

For at indstille farven på vores form bruger vi udfyldningsfunktionen. Dette bruger 3 argumenter, som er RGB -værdier (R = rød, G = grøn, B = blå). Hver værdi kan være et tal mellem 0 og 255. For eksempel for at gøre rødt, ville vi sætte 255, 0, 0, som ville være helt rødt uden grønt eller blåt. Forskellige kombinationer af disse tal skaber forskellige farver.

Der er flere websteder, der giver RGB -værdier for mange forskellige farver, som denne:

Når du har fundet RGB -værdien, der matcher din farve på PlayDoh, skal du skrive udfyldningsfunktionen over formfunktionen.

Du kan derefter klikke på afspilningsknappen i webeditoren, og du skal se din form vises på skærmen.

Trin 4: Få din figur til at se ud med et tastetryk

Da vi vil have vores p5.js -skitse til at være interaktiv med Makey Makey, skal vi tilføje noget kode for at få noget til at ske, når vi trykker på en tast på tastaturet. I dette tilfælde ønsker vi, at formen kun vises, hvis vi trykker på en tast. For at gøre dette har vi brug for en betinget erklæring. Det betyder, at noget i vores kode kun vil ske, hvis en bestemt betingelse er opfyldt, i dette tilfælde trykkes der på en tast.

For at gøre denne betingede erklæring betinget, starter vi med ordet, hvis det efterfølges af parenteser. Inde i parenteserne vil være den betingelse, vi ønsker at blive opfyldt. I p5.js er der en indbygget variabel kaldet keyIsPressed (sørg for at bruge store bogstaver nøjagtigt det samme som skrevet her). keyIsPressed er en boolsk variabel. Det betyder, at den kan have en værdi på enten sand eller falsk. Når der trykkes på tasten, er værdien sand, og når den ikke trykkes, er værdien falsk.

Endelig tilføjer vi et sæt krøllede parenteser {}. Inde i de krøllede parenteser vil være den kode, vi ønsker at udføre, hvis vores betingelse er opfyldt. Så vi vil bare sætte vores kode for at lave formen mellem de krøllede parenteser.

Når vi nu kører vores skitse, ser vi ikke formen, før vi trykker på en tast på tastaturet.

VIGTIG BEMÆRK: Når du tilføjer tastetryk i vores kode, skal webredaktøren vide, om vi trykker på en tast for at skrive kode i teksteditoren, eller vi trykker på tasten for at gøre det, vi kodede et tastetryk for at gøre. Når du klikker på afspilningsknappen, skal du flytte musen hen over lærredet og klikke på lærredet. Dette vil bringe redaktørens fokus til skitsen, og tryk på en tast vil udløse den tastetrykkode, vi ønsker, skal ske

Trin 5: Konfigurer Makey Makey

Tag Makey Makey -kortet, USB -kablet og to krokodilleklip ud. Vedhæft et alligatorklip til jorden og et til mellemrumstasten (da vi ikke angav en nøgle i vores kode, vil enhver tast, vi trykker på, udløse formen til at blive vist).

Tag alligatorklippet, der er fastgjort til mellemrumstasten, og tryk den anden ende ind i Playdoh -formen.

Sæt USB -kablet i den bærbare computer.

Trin 6: Tryk på Playdoh -formen

Hold metalenden af alligatorklemmen, der er fastgjort til jorden på Makey Makey, og berør Playdoh -formen. Når du rører ved Playdoh -figuren, skal den kodede form vises på lærredet på din skitse.

Her er et link til p5.js -skitsen til dette projekt:

Hvis formen ikke vises:

1. Sørg for, at du har klikket med musen på lærredet på p5.js -skitsen, før du rører ved Playdoh.

2. Sørg for, at du holder metalclipsen på jordledningen.

Trin 7: Forskellige former

Gul trekant:

Den blå firkant: