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

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:41

Makey Makey -projekt »

Detta projekt skapar en skiss i p5.js som kan spela upp en ljudfil med en knapptryckning och sedan göra en enkel knapp med en penna, papper och en Makey Makey för att utlösa ljudet.

Medan detta projekt använder ett dörrklockljud, inkluderar stegen hur man laddar en ljudfil i din p5.js -skiss, så att den enkelt kan anpassas för att använda vilken typ av ljud som helst.

Läs mer om p5.js:

Om du är ny på att använda p5.js med Makey Makey, föreslår jag att du först kollar in det här projektet:

Tillbehör

Penna

En liten fyrkant med papper

Makey Makey -kit (med 2 krokodilklämmor)

Bärbar dator med internetuppkoppling

Steg 1: Ladda ner ljudfilen

Detta projekt kräver att du använder en ljudfil som vi behöver ladda upp till vår p5.js -skiss. För att göra detta måste vi först ladda ner ljudfilen.

Om du inte kan ladda ner filer till din dator eller bara vill hoppa över att ladda ner filen och ladda upp den till din skiss kan du gå till den här länken för en p5.js -mall med ljudet redan överfört och gå till steg 3. Men, om du vill arbeta med ljudfiler i p5.js i framtiden visar detta steg och nästa hur du gör detta.

Det finns många ställen att ladda ner ljudeffekter och ljudfiler på webben, vissa kräver ett konto, till exempel freesound.org och några som inte kräver ett konto, som soundbible.com. Var alltid uppmärksam på eventuella licens- och/eller tillskrivningskrav när du använder ett ljud för ditt projekt. Mer om det här:

Dörrklockan för detta projekt kom från https://freesound.org/s/163730/ från Tim Kahn.

Om du vill ladda ner ljudet utan att skapa ett konto har jag konverterat ljudet till ett mp3 -format som kan laddas ner här:

Steg 2: Ladda upp ljudfil till P5.js

När vi har laddat ner vårt dörrklockljud måste vi ladda upp det i vår p5.js -skiss så att vi kan komma åt det.

Gör så här:

- Klicka på ">" -ikonen till vänster i webbredigeraren, strax under uppspelningsknappen. Detta öppnar sidofältet som visar filerna för din skiss.

- Klicka på den lilla nedåtvända triangeln till höger om "Sketch Files". Detta kommer att visa en rullgardinsmeny med alternativen för "lägg till mapp" och "lägg till fil"

- Klicka på "lägg till fil". Detta öppnar ett fönster för att lägga till en fil. Du kan dra dörrklockfilen till rutan eller klicka där rutan säger "dra filer hit för att ladda upp eller klicka för att använda filwebbläsare". Detta låter dig navigera genom dina datorfiler för att hitta ljudfilen.

- När du har dragit eller valt filen kommer du att se den överföras och filens namn visas i sidofältet.

Nu kommer du att kunna komma åt och använda denna ljudfil i din skiss.

Steg 3: Ladda in ljudfil till P5.js -skiss

Om vi läser in en ljudfil till en p5.js -skiss måste vi göra ett ljudfilobjekt. Ett objekt har sina egna egenskaper och funktioner inbyggda i det som vi kan använda.

För att skapa ett objekt måste vi först göra en variabel för att hålla objektet. Detta gör att vi kan komma åt objektet och dess egenskaper under hela skissen. För att göra en variabel, gå till skissens översta rad och skriv ordet låt. Detta ord används för att deklarera en variabel i javascript. Ge sedan variabeln ett namn. Vi kan kalla variabeln vad vi vill, men det är bra att ge den ett namn som är relaterat till vad den kommer att göra i vår kod. I det här fallet är det vettigt att kalla det dörrklocka.

låt dörrklocka;

Eftersom p5.js är webbaserat måste vi se till att ljudfilen har laddats in i skissen innan skissen börjar köras, annars kan vi inte komma åt objektets egenskaper. För att göra detta måste vi lägga till en funktion för att ladda ljudfilen innan skissen börjar. Denna funktion kallas preload (). Vi skriver detta på samma sätt som funktionen setup () och draw ().

Inuti de lockiga parenteserna tilldelar vi vår variabel ljudobjektet med hjälp av funktionen loadSound (). Inne i parentesen skriver du det exakta namnet på ljudfilen i citattecken:

funktion förspänning () {

dörrklocka = loadSound ('dörrklocka.mp3');

}

Steg 4: Spela ljudfil med funktionen KeyPressed ()

Nu när ljudfilen laddas in i skissen kan du spela upp den med metoden play (). Metoder är i huvudsak funktioner som är specifika för ett objekt.

Om du har använt knapptryckningar i p5.js tidigare har du förmodligen använt ett villkorligt uttalande med variabeln keyIsPressed inuti dragfunktionen. Men när vi arbetar med ljudfiler vill vi inte utlösa det inuti dragfunktionen. Draw -funktionen är en loop så den uppdateras ständigt. Det betyder att ljudfilen kommer att spelas om och om igen så länge en tangent trycks ned vilket inte är trevligt att lyssna på.

För att undvika detta kommer du att använda en funktion som kallas keyPressed (). Detta skrivs också på samma sätt som funktionen setup () och draw (). Skriv detta längst ner i koden under funktionen draw ().

Inuti de lockiga parenteserna sätter du play () -metoden som utlöser ljudfilen en gång när du trycker på en knapp. Om du vill använda en metod för ett objekt skriver du variabelnamnet som innehåller objektet följt av.play ();

function keyPressed () {

dörrklocka.spel ();

}

Nu när du kör din skiss kan du trycka på en tangent så hörs dörrklockan.

VIKTIG ANMÄRKNING: När du lägger till knapptryckningar i vår kod måste webbredigeraren veta om vi trycker på en knapp för att skriva kod i textredigeraren eller om vi trycker på knappen för att göra det vi kodade ett tangenttryck för att göra. När du klickar på uppspelningsknappen flyttar du musen över duken och klickar på duken. Detta kommer att föra redaktörens fokus till skissen och att trycka på en knapp kommer att utlösa den tangenttryckningskod vi vill att ska hända

Steg 5: Gör pappersknappen

För att utlösa ljudet med Makey Makey använder vi en vanlig penna och papper för att göra en knapp.

Rita två halvcirklar med ett mycket litet mellanrum mellan dem så att de faktiskt inte berörs utan är tillräckligt nära så att vi kan röra båda halvorna samtidigt med ett finger. Varje halvcirkel bör också ha en tjock linje som sträcker sig till varje ände av papperet. Det är här du kommer att fästa krokodilklämmorna från Makey Makey.

Se till att du fyller i båda sidorna väldigt mörkt så att grafiten från pennan kan hålla strömmen från Makey Makey.

Utformningen av de två halvcirklarna är att ha ett så litet gap mellan dem att det i princip är omöjligt att inte röra båda sidor samtidigt. Detta gör att du kan slutföra kretsen mellan nyckeln och jorden på Makey Makey utan att behöva hålla i jordledningen.

Steg 6: Konfigurera Makey Makey

Ta ut Makey Makey -kortet, USB -kabeln och två krokodilklämmor. Fäst ett alligatorklipp till jorden och ett till mellanslagstangenten (eftersom vi inte angav en nyckel i vår kod, kommer en tangent vi trycker på att utlösa ljudet).

Ta alligatorklippet som är fäst på mellanslagstangenten och fäst det på ena sidan av pappersknappen. Ta alligatorklippet som är fäst på jorden och fäst det på andra sidan av pappersknappen.

Anslut USB -kabeln till den bärbara datorn.

Steg 7: Tryck på knappen för att aktivera ljudfilen

Vid denna tidpunkt är du redo att ringa på din dörrklocka. Starta skissen (kom ihåg att klicka med musen på duken så att knapptryckningen utför funktionen keyPressed ()) och rör sedan de två halvcirklarna på papperet samtidigt. Du bör höra ljudet från dörrklockans ljudfil spelas.

Steg 8: Tillägg: Lägg till en visuell komponent i skissen

Vid denna tidpunkt innehåller vår skiss endast kod för att spela ljudfilen, så du kommer inte att se något förändras på skärmen. Detta kan vara allt du vill göra om du försöker skapa någon typ av interaktivt ljudprojekt.

Men med de visuella kodningsfunktionerna för p5.js är möjligheterna att lägga till grafik oändliga. Du kan till och med ha bilder som reagerar på dina ljudfiler på många olika sätt, till exempel att de bara visas när ljudfilen spelas, reagerar på förändringar i volym och/eller frekvens eller till och med gör en visuell representation av själva ljudet.

Steg 9: Förlängning: Gör en cirkel Ändra färg när knappen trycks in

För att hålla detta projekt enkelt ska vi bara göra en cirkel som ändrar färg när knappen trycks in.

I funktionen draw () skapar du en cirkel med ellipsen () -funktionen. Över det lägger du till fyllningsfunktionen () för att ställa in färg på cirkeln. För denna skiss kommer originalfärgen att vara vit, vilket är gråskalevärdet på 255. Du kan ställa in färgen till vilken du vill med RGB -färgvärden.

Mellan funktionen fill () och ellipse () skapar du ett villkorligt uttalande med hjälp av variabeln keyIsPressed inom parenteserna. Mellan de lockiga parenteserna i villkorsuttrycket sätter du en annan fyllningsfunktion () i den färg du vill att cirkeln ska ändra till när du trycker på knappen. För detta projekt ändras färgen till gul som har ett RGB -värde på 255, 255, 0.

if (keyIsPressed) {

fyllning (255, 255, 0);

}

Tryck på uppspelningsknappen för att köra skissen. Den vita cirkeln ska nu visas när skissen laddas (Kom ihåg att klicka med musen på duken). Tryck sedan på pappersknappen så hör du dörrklockan ringa och se hur cirkeln ändrar färg.

p5.js -skiss: