Paper Doorbell W/ P5.js & Makey Makey: 9 trinn

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

Makey Makey -prosjekter »

Dette prosjektet lager en skisse i p5.js som kan spille av en lydfil ved hjelp av et tastetrykk og deretter lage en enkel knapp med blyant, papir og en Makey Makey for å utløse lyden.

Selv om dette prosjektet bruker en dørklokkelyd, inkluderer trinnene hvordan du laster inn en lydfil i p5.js -skissen din, slik at den enkelt kan tilpasses for å bruke alle typer lyd.

Lær mer om p5.js:

Hvis du er ny på å bruke p5.js med Makey Makey, foreslår jeg at du sjekker ut dette prosjektet først:

Rekvisita

Blyant

En liten firkant med papir

Makey Makey -sett (m/ 2 krokodilleklipp)

Bærbar datamaskin m/ internettforbindelse

Trinn 1: Last ned lydfilen

Dette prosjektet krever bruk av en lydfil som vi må laste opp til vår p5.js -skisse. For å gjøre dette må vi først laste ned lydfilen.

Hvis du ikke klarer å laste ned filer til datamaskinen din eller bare ønsker å hoppe over nedlasting av filen og laste den opp til skissen din, kan du gå til denne lenken for en p5.js -mal med lyden allerede lastet opp og gå til trinn 3. Imidlertid, Hvis du ønsker å jobbe med lydfiler i p5.js i fremtiden, vil dette trinnet og det neste vise deg hvordan du gjør dette.

Det er mange steder å laste ned lydeffekter og lydfiler på nettet, noen som krever en konto, for eksempel freesound.org og noen som ikke krever en konto, for eksempel soundbible.com. Vær alltid oppmerksom på eventuelle lisensiering og/eller attribusjonskrav når du bruker en lyd til prosjektet ditt. Mer om det her:

Dørklokkelyden for dette prosjektet kom fra https://freesound.org/s/163730/ levert av Tim Kahn.

Hvis du ønsker å laste ned lyden uten å opprette en konto, har jeg konvertert lyden til et mp3 -format som kan lastes ned her:

Trinn 2: Last opp lydfil til P5.js

Når vi har lastet ned dørklokkelyden vår, må vi laste den opp på vår p5.js -skisse slik at vi kan få tilgang til den.

Følg disse trinnene for å gjøre dette:

- Klikk på '>' ikonet på venstre side av webredigereren, like under spillknappen. Dette åpner sidefeltet som viser filene for skissen din.

- Klikk på den lille nedadvendte trekanten til høyre for 'Sketch Files'. Dette vil åpne en rullegardinmeny med alternativene "Legg til mappe" og "Legg til fil"

- Klikk på "legg til fil". Dette vil åpne et vindu for å legge til en fil. Du kan dra dørklokkefilen inn i boksen eller klikke der det står "dra filer hit for å laste opp eller klikke for å bruke filleseren". Dette lar deg navigere gjennom datamaskinens filer for å finne lydfilen.

- Når du har trukket eller valgt filen, vil du se den laste opp og navnet på filen vil vises i sidelinjen.

Nå vil du kunne få tilgang til og bruke denne lydfilen i skissen din.

Trinn 3: Laste inn lydfil i P5.js -skisse

Når vi laster inn en lydfil til en p5.js -skisse, må vi lage et lydfilobjekt. Et objekt har sine egne egenskaper og funksjoner innebygd i det som vi kan bruke.

For å lage et objekt må vi først lage en variabel for å holde objektet. Dette vil gi oss tilgang til objektet og dets egenskaper gjennom hele skissen. For å lage en variabel, gå til den øverste linjen i skissen og skriv ordet let. Dette ordet brukes til å deklarere en variabel i javascript. Gi deretter variabelen et navn. Vi kan kalle variabelen hva vi vil, men det er nyttig å gi den et navn som er relatert til hva den vil gjøre i koden vår. I dette tilfellet er det fornuftig å kalle det dørklokke.

la dørklokke;

Siden p5.js er nettbasert, må vi sørge for at lydfilen er lastet inn i skissen før skissen begynner å kjøre, ellers kan vi ikke få tilgang til egenskapene til objektet. For å gjøre dette må vi legge til en funksjon for å laste inn lydfilen før skissen starter. Denne funksjonen kalles preload (). Vi skriver dette på samme måte som oppsettet () og tegningen ().

Inne i de krøllete parentesene vil vi tilordne variabelen vår til lydobjektet ved å bruke loadSound () -funksjonen. Innenfor parentesene skriver du det eksakte navnet på lydfilen inne i anførselstegn:

funksjon forhåndsinnlasting () {

dørklokke = loadSound ('doorbell.mp3');

}

Trinn 4: Spill av lydfil med funksjonen KeyPressed ()

Nå som lydfilen er lastet inn i skissen, kan du spille den ved hjelp av play () -metoden. Metoder er i hovedsak funksjoner som er spesifikke for et objekt.

Hvis du har brukt tastetrykk i p5.js før, har du sannsynligvis brukt en betinget setning med variabelen keyIsPressed inne i trekkfunksjonen. Når vi jobber med lydfiler, ønsker vi imidlertid ikke å utløse den inne i trekkfunksjonen. Tegnfunksjonen er en løkke, så den oppdateres kontinuerlig. Dette betyr at lydfilen vil spilles av igjen og igjen så lenge en tast trykkes ned som ikke vil være hyggelig å lytte til.

For å unngå dette, kommer du til å bruke en funksjon kalt keyPressed (). Dette er også skrevet på samme måte som oppsettet () og tegningen (). Skriv dette nederst i koden under draw () -funksjonen.

Inne i de krøllete parentesene er der du setter play () -metoden som vil utløse lydfilen en gang når du trykker på en tast. Hvis du vil bruke en metode for et objekt, skriver du variabelnavnet som inneholder objektet etterfulgt av.play ();

function keyPressed () {

dørklokke.spill ();

}

Når du kjører skissen nå, kan du trykke på en tast og døren vil spille.

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: Lag papirknappen

For å utløse lyden med Makey Makey, bruker vi en vanlig blyant og papir for å lage en knapp.

Tegn to halvsirkler med et veldig lite mellomrom mellom dem, slik at de faktisk ikke berører, men er nær nok til at vi kan berøre begge halvdelene samtidig med en finger. Hver halvsirkel skal også ha en tykk linje som strekker seg til hver ende av papiret. Det er her du vil feste krokodilleklippene fra Makey Makey.

Sørg for at du fyller ut begge sider veldig mørkt, slik at grafitten fra blyanten kan holde strømmen fra Makey Makey.

Utformingen av de to halvsirklene er å ha et så lite gap mellom dem at det i utgangspunktet er umulig å ikke berøre begge sider samtidig. Dette lar deg fullføre kretsen mellom nøkkelen og jorden på Makey Makey uten å måtte holde jordledningen.

Trinn 6: 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 lyden).

Ta krokodilleklippet som er festet til mellomromstasten, og fest det til den ene siden av papirknappen. Ta krokodilleklippet som er festet til jorden, og fest det til den andre siden av papirknappen.

Koble USB -kabelen til den bærbare datamaskinen.

Trinn 7: Trykk på knappen for å aktivere lydfilen

På dette tidspunktet er du klar til å ringe på døren din. Start skissen (husk å klikke musen på lerretet slik at tastetrykket vil utføre keyPressed () -funksjonen) og berør deretter de to halve sirklene på papiret samtidig. Du bør høre lyden av lydfilen på dørklokken.

Trinn 8: Utvidelse: Legg til en visuell komponent i skissen

På dette tidspunktet inneholder skissen vår bare kode for å spille av lydfilen, så du vil ikke se noe endres på skjermen. Dette kan være alt du vil gjøre hvis du prøver å lage en type interaktivt lydprosjekt.

Imidlertid, med de visuelle kodingsfunksjonene til p5.js, er mulighetene for å legge til grafikk uendelige. Du kan til og med ha bilder som reagerer på lydfilene dine på mange forskjellige måter, for eksempel å bare vises når lydfilen spilles, reagere på endringer i volum og/eller frekvens eller til og med lage en visuell fremstilling av selve lyden.

Trinn 9: Utvidelse: Lag en sirkel Endre farge når knappen trykkes

For å holde dette prosjektet enkelt, skal vi bare lage en sirkel som endrer farge når du trykker på knappen.

I draw () -funksjonen, opprett en sirkel ved hjelp av ellipse () -funksjonen. Over det, legg til fill () -funksjonen for å angi fargen på sirkelen. For denne skissen vil den opprinnelige fargen være hvit, som er gråskalaverdien på 255. Du kan sette fargen til hvilken som helst du vil bruke RGB -fargeverdier.

Mellom funksjonen fill () og ellipse (), opprett en betinget setning ved å bruke keyIsPressed -variabelen innenfor parentesene. Mellom de krøllete parentesene i den betingede setningen, setter du en annen fyllingsfunksjon () til fargen du vil at sirkelen skal endre til når du trykker på tasten. For dette prosjektet vil fargen endres til gul som har en RGB -verdi på 255, 255, 0.

if (keyIsPressed) {

fyll (255, 255, 0);

}

Trykk på play -knappen for å kjøre skissen. Den hvite sirkelen skal nå vises når skissen lastes inn (Husk å klikke musen på lerretet). Trykk deretter på papirknappen og du skal høre på ringeklokken og se sirkelen skifte farge.

p5.js skisse: