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

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

Makey Makey -projekter »

Dette projekt opretter en skitse i p5.js, som kan afspille en lydfil ved hjælp af et tastetryk og derefter lave en simpel knap med en blyant, papir og en Makey Makey for at udløse lyden.

Selvom dette projekt bruger en dørklokke -lyd, omfatter trinene, hvordan du indlæser en lydfil i din p5.js -skitse, så den let kan tilpasses til at bruge enhver form for lyd.

Få mere at vide om p5.js:

Hvis du er ny til at bruge p5.js med Makey Makey, foreslår jeg at tjekke dette projekt først:

Forbrugsvarer

Blyant

En lille firkant papir

Makey Makey kit (m/ 2 krokodilleklip)

Laptop m/ internetforbindelse

Trin 1: Download af lydfilen

Dette projekt kræver brug af en lydfil, som vi skal uploade til vores p5.js -skitse. For at gøre dette skal vi først downloade lydfilen.

Hvis du ikke kan downloade filer til din computer eller bare ønsker at springe over download af filen og uploade den til din skitse, kan du gå til dette link for at få en p5.js -skabelon med lyden allerede uploadet og gå til trin 3. Men, Hvis du ønsker at arbejde med lydfiler i p5.js i fremtiden, viser dette trin og det næste dig, hvordan du gør dette.

Der er mange steder at downloade lydeffekter og lydfiler på internettet, nogle kræver en konto, f.eks. Freesound.org og nogle, der ikke kræver en konto, f.eks. Soundbible.com. Vær altid opmærksom på eventuelle licens- og/eller tilskrivningskrav, når du bruger en lyd til dit projekt. Mere om det her:

Dørklokken til dette projekt kom fra https://freesound.org/s/163730/ leveret af Tim Kahn.

Hvis du ønsker at downloade lyden uden at oprette en konto, har jeg konverteret lyden til et mp3 -format, der kan downloades her:

Trin 2: Upload af lydfil til P5.js

Når vi har downloadet vores dørklokke -lyd, skal vi uploade den til vores p5.js -skitse, så vi kan få adgang til den.

Følg disse trin for at gøre dette:

- Klik på '>' ikonet i venstre side af webeditoren, lige under afspilningsknappen. Dette åbner sidebjælken, der viser filerne til din skitse.

- Klik på den lille trekant nedad til højre for 'Sketch Files'. Dette åbner en rullemenu med mulighederne for 'tilføj mappe' og 'tilføj fil'

- Klik på 'tilføj fil'. Dette åbner et vindue for at tilføje en fil. Du kan trække dørklokkefilen ind i boksen eller klikke, hvor der står "træk filer her for at uploade eller klikke for at bruge filbrowser". Dette lader dig navigere gennem dine computerfiler for at finde lydfilen.

- Når du har trukket eller valgt filen, vil du se den uploades, og filens navn vises i sidelinjen.

Nu vil du kunne få adgang til og bruge denne lydfil i din skitse.

Trin 3: Indlæsning af lydfil i P5.js -skitse

Indlæsning af en lydfil i en p5.js -skitse kræver, at vi laver et lydfilobjekt. Et objekt har sine egne egenskaber og funktioner indbygget i det, som vi kan bruge.

For at lave et objekt skal vi først lave en variabel for at holde objektet. Dette giver os mulighed for at få adgang til objektet og dets egenskaber under hele skitsen. For at lave en variabel skal du gå til den øverste linje i skitsen og skrive ordet lad. Dette ord bruges til at erklære en variabel i javascript. Giv derefter variablen et navn. Vi kan kalde variablen alt, hvad vi vil, men det er nyttigt at give den et navn, der er relateret til, hvad den vil gøre i vores kode. I dette tilfælde er det fornuftigt at kalde det dørklokke.

lad dørklokke;

Da p5.js er webbaseret, skal vi sikre os, at lydfilen er indlæst i skitsen, før skitsen begynder at køre, ellers har vi muligvis ikke adgang til objektets egenskaber. For at gøre dette skal vi tilføje en funktion til at indlæse lydfilen, før skitsen starter. Denne funktion kaldes preload (). Vi skriver dette på samme måde som funktionen setup () og draw ().

Inde i de krøllede parenteser tildeler vi vores variabel lydobjektet ved hjælp af funktionen loadSound (). Inden i parentesen skriver du det nøjagtige navn på lydfilen inde i anførselstegn:

funktion forudindlæsning () {

doorbell = loadSound ('doorbell.mp3');

}

Trin 4: Afspil lydfil med funktionen KeyPressed ()

Nu hvor lydfilen er indlæst i skitsen, kan du afspille den ved hjælp af metoden play (). Metoder er i det væsentlige funktioner, der er specifikke for et objekt.

Hvis du tidligere har brugt tastetryk i p5.js, har du sandsynligvis brugt en betinget sætning med variablen keyIsPressed inde i draw -funktionen. Når vi arbejder med lydfiler, ønsker vi imidlertid ikke at udløse det inde i tegnefunktionen. Tegnefunktionen er en loop, så den opdateres konstant. Det betyder, at lydfilen afspilles igen og igen, så længe der trykkes på en tast, som ikke vil være behagelig at lytte til.

For at undgå dette skal du bruge en funktion kaldet keyPressed (). Dette er også skrevet på samme måde som funktionen setup () og draw (). Skriv dette i bunden af koden under funktionen draw ().

Inde i de krøllede parenteser er det, hvor du sætter play () -metoden, der udløser lydfilen en gang, når du trykker på en tast. Hvis du vil bruge en metode til et objekt, skal du skrive variabelnavnet, der indeholder objektet efterfulgt af.play ();

function keyPressed () {

doorbell.play ();

}

Når du nu kører din skitse, kan du trykke på en tast, og lyden fra dørklokken afspilles.

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

For at udløse lyden med Makey Makey bruger vi en almindelig blyant og papir til at lave en knap.

Tegn to halve cirkler med et meget lille mellemrum mellem dem, så de faktisk ikke rører, men tæt nok på, så vi kan røre begge halvdele på samme tid med en finger. Hver halvcirkel skal også have en tyk streg, der strækker sig til hver ende af papiret. Det er her, du vil vedhæfte alligatorklippene fra Makey Makey.

Sørg for at udfylde begge sider meget mørkt, så grafitten fra blyanten er i stand til at holde strømmen fra Makey Makey.

Designet af de to halve cirkler er at have et så lille hul mellem dem, at det stort set er umuligt ikke at røre begge sider på samme tid. Dette giver dig mulighed for at fuldføre kredsløbet mellem nøglen og jorden på Makey Makey uden at skulle holde jordledningen.

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

Tag alligatorklippet, der er fastgjort til mellemrumstasten, og klip det til den ene side af papirknappen. Tag alligatorklippet, der er fastgjort til jorden, og klip det til den anden side af papirknappen.

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

Trin 7: Tryk på knappen for at udløse lydfilen

På dette tidspunkt er du klar til at ringe på din dørklokke. Start skitsen (husk at klikke med musen på lærredet, så tastetrykket udfører funktionen keyPressed ()), og tryk derefter på de to halve cirkler på papiret på samme tid. Du skal høre lyden af dørklokkens lydfil afspilles.

Trin 8: Udvidelse: Tilføj en visuel komponent til skitsen

På dette tidspunkt indeholder vores skitse kun kode til afspilning af lydfilen, så du ikke kan se noget ændre sig på skærmen. Dette kan være alt, hvad du vil gøre, hvis du prøver at oprette en form for interaktivt lydprojekt.

Men med de visuelle kodningsmuligheder for p5.js er mulighederne for at tilføje grafik uendelige. Du kan endda have billeder, der reagerer på dine lydfiler på mange forskellige måder, f.eks. Kun når de vises, når lydfilen afspilles, reagerer på ændringer i lydstyrke og/eller frekvens eller endda gør en visuel fremstilling af selve lyden.

Trin 9: Forlængelse: Lav en cirkel Skift farve, når der trykkes på knappen

For at holde dette projekt enkelt, skal vi bare lave en cirkel, der skifter farve, når der trykkes på knappen.

Opret en cirkel i funktionen draw () ved hjælp af ellipse () -funktionen. Ovenfor skal du tilføje funktionen fill () for at indstille farven på cirklen. Til denne skitse vil den originale farve være hvid, hvilket er gråtoneværdien på 255. Du kan indstille farven til enhver, du ønsker, ved hjælp af RGB -farveværdier.

Mellem funktionen fill () og ellipse () skal du oprette en betinget sætning ved hjælp af variablen keyIsPressed inden for parenteserne. Mellem de krøllede parenteser i betingelseserklæringen skal du sætte et andet fyld () -funktionssæt til den farve, du vil have cirklen til at ændre, når du trykker på tasten. For dette projekt ændres farven til gul, som har en RGB -værdi på 255, 255, 0.

hvis (keyIsPressed) {

fyld (255, 255, 0);

}

Tryk på afspilningsknappen for at køre skitsen. Den hvide cirkel skal nu vises, når skitsen indlæses (Husk at klikke med musen på lærredet). Tryk derefter på papirknappen, og du skal høre dørklokken ringe og se cirklen ændre farve.

p5.js -skitse: