Koding Simple Playdoh Shapes W/ P5.js & Makey Makey: 7 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:21

Makey Makey -prosjekter »

Dette er et fysisk databehandlingsprosjekt som lar deg lage en figur med Playdoh, kode den formen ved hjelp av p5.js og utløse at figuren vises på dataskjermen ved å berøre Playdoh -figuren ved hjelp av en Makey Makey.

p5.js er et åpen kildekode, nettbasert, kreativt kodemiljø i Javascript. Lær mer her:

Du trenger ingen kodingserfaring for å gjøre dette prosjektet. Dette kan brukes som en introduksjon til tekstbasert koding (i motsetning til blokkbaserte språk som Scratch). Du trenger bare å skrive 4 linjer med kode for å fullføre dette prosjektet. Det er flere måter du kan endre og utvide denne grunnleggende ideen.

Rekvisita

Makey Makey Kit (m/ 2 Alligator Clips)

Playdoh (hvilken som helst farge)

Bærbar datamaskin m/ internettilkobling

Trinn 1: Lag en Playdoh -form

Lag en figur av Playdoh. Dette kan være en sirkel, oval, firkant, rektangel eller trekant. Vær oppmerksom på at du må kode denne formen senere, så jo enklere formen er, desto lettere blir kodingsdelen. Imidlertid er p5.js i stand til å kode mange forskjellige former, selv egendefinerte, slik at du kan bestemme vanskelighetsgraden du vil prøve.

Trinn 2: Kom i gang i P5.js

Hvis du ikke har brukt p5.js før, anbefaler jeg å sjekke start-siden på nettstedet:

Jeg anbefaler også på det sterkeste å sjekke The Coding Train youtube kanal for utmerkede opplæringsprogrammer om bruk av p5.js. Her er en lenke til en spilleliste som går gjennom alt det grunnleggende:

Siden p5.js er nettbasert, kan du gjøre all kodingen din på nettet ved hjelp av p5 Web Editor. Du trenger ikke en konto for å gjøre dette prosjektet, men hvis du vil lagre arbeidet ditt, må du registrere deg for en konto.

Nettredaktør:

Webredaktøren p5.js har et område for å skrive koden til venstre og lerretet som viser resultatene av koden til høyre.

Hver p5.js -skisse inneholder en setup () -funksjon og en draw () -funksjon. Setup () -funksjonen kjøres en gang når skissen først starter. I oppsettet () -funksjonen er createCanvas -funksjonen som skaper et mellomrom der formen din vil bli tegnet. Tallene i parentesene til createCanvas -funksjonen angir X -aksen (venstre til høyre) og Y -aksen (topp til bunn) på lerretet. Standardtallene er 400, 400, noe som betyr at lerretet ditt er 400 piksler fra venstre til høyre og 400 piksler fra topp til bunn (du kan alltid endre disse etter dine behov). Vær oppmerksom på at det øvre venstre hjørnet av lerretet er punktet 0, 0. Dette vil være viktig å vite når du koder formen din.

Draw () -funksjonen kjøres som en sløyfe, noe som betyr at den oppdateres kontinuerlig, ca. 60 ganger i sekundet. Dette kan tillate oss å lage animasjon i våre skisser. Inne i draw () -funksjonen er bakgrunnsfunksjonen som gir en farge til lerretet vårt. Standarden er 220 som er en gråskalaverdi. 0 = svart, 255 = hvit og tallet mellom vil være varierende gråtoner. Bakgrunnsfunksjonen kan også ta RGB -verdier som lar oss legge til farge. Mer om dette i neste trinn.

Trinn 3: Kode formen din i P5.js

For å kode formen din trenger du bare å legge til kodelinjer inne i draw () -funksjonen.

Hver form har sin egen funksjon for å få den til å vises på lerretet. Her er referansesiden for alle former i p5.js:

For å lage en sirkel bruker vi ellipsefunksjonen. Denne funksjonen tar 3 argumenter (tallene som går innenfor parentesen). Det første tallet er X -posisjonen til midten av sirkelen på lerretet og det andre tallet er Y -posisjonen på lerretet. Husk at øvre venstre hjørne er 0, 0 og lerretet er 400 x 400 piksler. Så hvis jeg vil at sirkelen skal vises midt på lerretet, vil jeg sette den på 200 på X -aksen og 200 på Y -aksen. Du kan eksperimentere med disse tallene for å få en følelse av hvordan du plasserer ting på lerretet.

Det tredje tallet angir størrelsen på sirkelen. For dette eksemplet er det satt til 100 piksler i diameter. Ellipsefunksjonen kan også ta et fjerde argument som ville endre det tredje argumentet til å påvirke X -diameteren og det fjerde argumentet ville være Y -diameteren. Dette kan brukes til å lage ovale former i stedet for perfekt runde sirkler.

For å angi fargen på formen vår, bruker vi fyllfunksjonen. Dette bruker 3 argumenter som er RGB -verdiene (R = rød, G = grønn, B = blå). Hver verdi kan være et tall mellom 0 og 255. For eksempel, for å gjøre rødt, ville vi sette 255, 0, 0 som ville være helt rødt uten grønt eller blått. Ulike kombinasjoner av disse tallene vil skape forskjellige farger.

Det er flere nettsteder som gir RGB -verdier for mange forskjellige farger, som denne:

Når du har funnet RGB -verdien som matcher fargen på PlayDoh, skriver du fyllingsfunksjonen over formfunksjonen.

Du kan deretter klikke på avspillingsknappen i webredigereren, og du bør se formen din vises på skjermen.

Trinn 4: Få formen til å vises med et tastetrykk

Siden vi ønsker at vår p5.js -skisse skal være interaktiv med Makey Makey, må vi legge til noen kode for å få noe til å skje når vi trykker på en tast på tastaturet. I dette tilfellet vil vi at formen bare skal vises hvis vi trykker på en tast. For å gjøre dette trenger vi en betinget uttalelse. Dette betyr at noe i koden vår bare vil skje hvis en bestemt betingelse er oppfylt, i dette tilfellet trykkes en tast.

For å gjøre denne betingede uttalelsen betinget, starter vi med ordet hvis det blir fulgt av parenteser. Innsiden av parentesene vil være betingelsen vi ønsker å bli oppfylt. I p5.js er det en innebygd variabel kalt keyIsPressed (sørg for at du bruker store bokstaver nøyaktig det samme som skrevet her). keyIsPressed er en boolsk variabel. Dette betyr at den kan ha en verdi på enten sant eller usant. Når tasten trykkes, er verdien sann, og når den ikke trykkes, er verdien feil.

Til slutt legger vi til et sett med krøllete parenteser {}. Inne i de krøllete parentesene vil være koden vi ønsker å utføre hvis vår betingelse er oppfylt. Så vi skal bare sette koden vår for å lage formen mellom de krøllete parentesene.

Når vi kjører skissen nå, ser vi ikke formen før vi trykker på en tast på tastaturet.

VIKTIG MERKNAD: Når du legger til tastetrykk i koden vår, må nettredaktøren vite om vi trykker på en tast for å skrive kode i tekstredigereren, eller vi trykker på tasten for å gjøre det vi kodet et tastetrykk for å gjøre. Når du klikker på play -knappen, flytter du musen over lerretet og klikker på lerretet. Dette vil bringe fokuset på redaktøren til skissen og trykke på en tast vil utløse tastetrykkskoden vi ønsker skal skje

Trinn 5: Sett opp Makey Makey

Få ut Makey Makey -brettet, USB -kabelen og to krokodiller. Fest ett alligatorklipp til jorden og ett til mellomromstasten (siden vi ikke spesifiserte en nøkkel i koden vår, vil en hvilken som helst tast vi trykker på, utløse at formen vises).

Ta krokodilleklippet som er festet til mellomromstasten, og trykk den andre enden inn i Playdoh -formen.

Koble USB -kabelen til den bærbare datamaskinen.

Trinn 6: Trykk på Playdoh -formen

Hold metallenden av krokodillen som er festet til jorden på Makey Makey og berør Playdoh -formen. Når du berører Playdoh -formen, skal den kodede formen vises på lerretet på skissen din.

Her er en lenke til p5.js -skissen for dette prosjektet:

Hvis formen ikke vises:

1. Kontroller at du har klikket med musen på lerretet på p5.js -skissen før du berører Playdoh.

2. Sørg for at du holder i metallklemmen på jordledningen.

Trinn 7: Ulike former

Gul trekant:

Den blå firkant: