Papieren deurbel met P5.js & Makey Makey - Ajarnpa

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:16

Makey Makey-projecten »

Dit project maakt een schets in p5.js die een audiobestand kan afspelen met een toetsdruk en vervolgens een eenvoudige knop maakt met een potlood, papier en een Makey Makey om het geluid te activeren.

Hoewel dit project een deurbelgeluid gebruikt, bevatten de stappen hoe je een audiobestand in je p5.js-schets laadt, zodat het gemakkelijk kan worden aangepast om elk type geluid te gebruiken.

Meer informatie over p5.js:

Als je nieuw bent bij het gebruik van p5.js met Makey Makey, raad ik aan eerst dit project te bekijken:

Benodigdheden

Potlood

Een klein vierkantje papier

Makey Makey kit (met 2 krokodillenklemmen)

Laptop met internetverbinding

Stap 1: Het audiobestand downloaden

Dit project vereist het gebruik van een audiobestand dat we moeten uploaden naar onze p5.js-schets. Om dit te doen, moeten we eerst het audiobestand downloaden.

Als u geen bestanden naar uw computer kunt downloaden of als u het downloaden van het bestand wilt overslaan en naar uw schets wilt uploaden, kunt u naar deze link gaan voor een p5.js-sjabloon met het geluid dat al is geüpload en naar stap 3 gaan. als u in de toekomst met audiobestanden in p5.js wilt werken, zal deze stap en de volgende u laten zien hoe u dit moet doen.

Er zijn veel plaatsen om geluidseffecten en audiobestanden op internet te downloaden, voor sommige is een account vereist, zoals freesound.org en voor sommige is geen account vereist, zoals soundbible.com. Houd altijd rekening met eventuele licentie- en/of attributievereisten wanneer u een geluid voor uw project gebruikt. Meer daarover hier:

Het geluid van de deurbel voor dit project kwam van https://freesound.org/s/163730/ geleverd door Tim Kahn.

Als je het geluid wilt downloaden zonder een account aan te maken, heb ik het geluid geconverteerd naar een mp3-formaat dat je hier kunt downloaden:

Stap 2: Audiobestand uploaden naar P5.js

Nadat we ons deurbelgeluid hebben gedownload, moeten we het uploaden naar onze p5.js-schets zodat we er toegang toe hebben.

Volg hiervoor deze stappen:

- Klik op het pictogram ' > ' aan de linkerkant van de webeditor, net onder de afspeelknop. Dit opent de zijbalk met de bestanden voor je schets.

- Klik op het naar beneden gerichte driehoekje rechts van 'Sketch Files'. Er verschijnt een vervolgkeuzemenu met de opties 'map toevoegen' en 'bestand toevoegen'

- Klik op 'bestand toevoegen'. Dit zal een venster openen om een bestand toe te voegen. Je kunt het deurbelbestand naar de box slepen of klikken op de plek waar in het vak staat 'sleep bestanden hierheen om te uploaden of klik om de bestandsbrowser te gebruiken'. Hiermee kunt u door uw computerbestanden navigeren om het audiobestand te vinden.

- Nadat u het bestand hebt gesleept of geselecteerd, ziet u het uploaden en verschijnt de naam van het bestand in de zijbalk.

Nu kunt u dit audiobestand openen en gebruiken in uw schets.

Stap 3: Audiobestand in P5.js Sketch laden

Om een audiobestand in een p5.js-schets te laden, moeten we een geluidsbestandsobject maken. Een object heeft zijn eigen eigenschappen en functies ingebouwd die we kunnen gebruiken.

Om een object te maken, moeten we eerst een variabele maken om het object vast te houden. Dit geeft ons toegang tot het object en zijn eigenschappen in de hele schets. Om een variabele te maken, gaat u naar de bovenste regel van de schets en schrijft u het woord let. Dit woord wordt gebruikt om een variabele in javascript te declareren. Geef de variabele dan een naam. We kunnen de variabele noemen wat we willen, maar het is handig om het een naam te geven die gerelateerd is aan wat het in onze code zal doen. In dit geval is het logisch om het een deurbel te noemen.

laat deurbel;

Aangezien p5.js webgebaseerd is, moeten we ervoor zorgen dat het audiobestand in de schets is geladen voordat de schets begint te lopen, anders hebben we mogelijk geen toegang tot de eigenschappen van het object. Om dit te doen, moeten we een functie toevoegen om het audiobestand te laden voordat de schets begint. Deze functie wordt preload() genoemd. We schrijven dit op dezelfde manier als de setup() en draw() functie.

Binnen de accolades zullen we onze variabele aan het geluidsobject toewijzen met behulp van de functie loadSound(). Schrijf tussen de haakjes de exacte naam van het audiobestand tussen aanhalingstekens:

functie preload() {

deurbel = loadSound('doorbell.mp3');

}

Stap 4: Speel audiobestand af met de functie KeyPressed()

Nu het audiobestand in de sketch is geladen, kun je het afspelen met de methode play(). Methoden zijn in wezen functies die specifiek zijn voor een object.

Als je eerder toetsaanslagen in p5.js hebt gebruikt, heb je waarschijnlijk een voorwaardelijke instructie gebruikt met de variabele keyIsPressed in de draw-functie. Wanneer we echter met audiobestanden werken, willen we deze niet activeren in de tekenfunctie. De tekenfunctie is een lus en wordt dus voortdurend bijgewerkt. Dit betekent dat het audiobestand steeds opnieuw wordt afgespeeld zolang een toets wordt ingedrukt die niet prettig is om naar te luisteren.

Om dit te voorkomen, ga je een functie gebruiken genaamd keyPressed(). Dit is ook hetzelfde geschreven als de setup() en draw() functie. Schrijf dit onderaan de code onder de functie draw().

Binnen de accolades plaatst u de methode play() die het audiobestand één keer activeert wanneer u op een toets drukt. Om een methode voor een object te gebruiken, schrijft u de variabelenaam die het object bevat, gevolgd door.play();

functietoets ingedrukt() {

deurbel.afspelen();

}

Wanneer u nu uw schets uitvoert, kunt u op een toets drukken en het geluid van de deurbel wordt afgespeeld.

BELANGRIJKE OPMERKING: bij het toevoegen van toetsaanslagen aan onze code, moet de webeditor weten of we op een toets drukken om code te schrijven in de teksteditor of dat we op de toets drukken om te doen waarvoor we een toetsaanslag hebben gecodeerd. Wanneer u op de afspeelknop klikt, beweegt u de muis over het canvas en klikt u op het canvas. Dit zal de focus van de editor naar de schets brengen en het indrukken van een toets zal de toetsaanslagcode activeren die we willen laten gebeuren

Stap 5: Maak de papieren knop

Om het geluid met de Makey Makey te activeren, zullen we een gewoon potlood en papier gebruiken om een knop te maken.

Teken twee halve cirkels met een heel kleine opening ertussen zodat ze elkaar niet echt raken, maar dichtbij genoeg zodat we beide helften tegelijkertijd met één vinger kunnen aanraken. Elke halve cirkel moet ook een dikke lijn hebben die zich uitstrekt tot elk uiteinde van het papier. Hier bevestig je de krokodillenklemmen van de Makey Makey.

Zorg ervoor dat je beide zijden heel donker invult, zodat het grafiet van het potlood de stroom van de Makey Makey kan vasthouden.

Het ontwerp van de twee halve cirkels is om zo'n kleine opening tussen hen te hebben dat het in principe onmogelijk is om beide zijden niet tegelijkertijd aan te raken. Hiermee kunt u het circuit tussen de sleutel en aarde op de Makey Makey voltooien zonder de aardingsdraad vast te houden.

Stap 6: Makey Makey instellen

Haal het Makey Makey-bord, de USB-kabel en twee krokodillenklemmen tevoorschijn. Bevestig een krokodillenklem aan de aarde en een aan de spatiebalk (aangezien we geen sleutel in onze code hebben gespecificeerd, zal elke toets die we indrukken het geluid activeren).

Pak de krokodillenklem die aan de Space-toets is bevestigd en klem deze aan een kant van de papieren knop. Pak de krokodillenklem die aan de aarde is bevestigd en klem deze aan de andere kant van de papieren knoop.

Steek de USB-kabel in de laptop.

Stap 7: Druk op de knop om het audiobestand te activeren

Op dit punt bent u klaar om aan te bellen. Start de schets (vergeet niet om met de muis op het canvas te klikken zodat de toetsdruk de functie keyPressed() uitvoert) en raak vervolgens de twee halve cirkels op het papier tegelijkertijd aan. U zou het geluid van het audiobestand van de deurbel moeten horen.

Stap 8: Uitbreiding: een visuele component aan de schets toevoegen

Op dit moment bevat onze schets alleen code om het audiobestand af te spelen, dus je zult niets op het scherm zien veranderen. Dit is misschien alles wat u wilt doen als u een soort interactief geluidsproject probeert te maken.

Met de visuele coderingsmogelijkheden van p5.js zijn de mogelijkheden om afbeeldingen toe te voegen echter eindeloos. U kunt zelfs beelden hebben die op verschillende manieren op uw audiobestanden reageren, zoals alleen verschijnen wanneer het audiobestand wordt afgespeeld, reageren op de veranderingen in volume en/of frequentie of zelfs een visuele weergave van het geluid zelf maken.

Stap 9: Extensie: maak een cirkel van kleur veranderen wanneer op de knop wordt gedrukt

Om dit project eenvoudig te houden, gaan we gewoon een cirkel maken die van kleur verandert wanneer de knop wordt ingedrukt.

Maak in de functie draw() een cirkel met de functie ellipse(). Voeg daarboven de functie fill() toe om de kleur van de cirkel in te stellen. Voor deze schets is de originele kleur wit, wat de grijswaardenwaarde van 255 is. U kunt de kleur instellen op elke gewenste kleur met behulp van RGB-kleurwaarden.

Maak tussen de functies fill() en ellipse() een voorwaardelijke instructie met de variabele keyIsPressed tussen haakjes. Plaats tussen de accolades van de voorwaardelijke instructie een andere fill()-functie die is ingesteld op de kleur waarin u de cirkel wilt laten veranderen wanneer u op de toets drukt. Voor dit project verandert de kleur in geel met een RGB-waarde van 255, 255, 0.

if(keyIsPressed) {

vullen (255, 255, 0);

}

Druk op de afspeelknop om de schets uit te voeren. De witte cirkel zou nu moeten verschijnen wanneer de schets wordt geladen (Vergeet niet om met de muis op het canvas te klikken). Druk dan op de papieren knop en je zou de deurbel moeten horen gaan en de cirkel van kleur zien veranderen.

p5.js schets: