Paperinen ovikello W/ P5.js ja Makey Makey: 9 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:00

Makey Makey -projektit »

Tämä projekti luo luonnoksen p5.js -tiedostoon, joka voi toistaa äänitiedoston näppäimen painalluksella ja tekee sitten yksinkertaisen painikkeen kynällä, paperilla ja Makey Makey -laitteella äänen käynnistämiseksi.

Vaikka tämä projekti käyttää ovikellon ääntä, vaiheisiin kuuluu äänitiedoston lataaminen p5.js -luonnokseen, joten se voidaan helposti mukauttaa käyttämään mitä tahansa ääntä.

Lisätietoja p5.js: stä:

Jos olet uusi käyttämään p5.js-sovellusta Makey Makeyn kanssa, suosittelen tutustumaan tähän projektiin ensin:

Tarvikkeet

Lyijykynä

Pieni neliö paperia

Makey Makey Kit (kahdella alligaattoripidikkeellä)

Kannettava tietokone internetyhteydellä

Vaihe 1: Äänitiedoston lataaminen

Tämä projekti edellyttää äänitiedoston käyttöä, joka meidän on ladattava p5.js -luonnokseen. Tätä varten meidän on ensin ladattava äänitiedosto.

Jos et pysty lataamaan tiedostoja tietokoneellesi tai haluat vain ohittaa tiedoston lataamisen ja luonnoksen lataamisen, voit siirtyä tästä linkistä ja ladata p5.js -mallin, jossa on jo ladattu ääni, ja siirtyä vaiheeseen 3. Jos haluat käsitellä p5.js -tiedoston äänitiedostoja tulevaisuudessa, tässä ja seuraavassa vaiheessa näytetään, miten tämä tehdään.

Äänitehosteiden ja äänitiedostojen lataamiseen verkosta on monia paikkoja, joista osa vaatii tilin, kuten freesound.org ja jotkut, jotka eivät vaadi tiliä, kuten soundbible.com. Muista aina lisensointi- ja/tai tekijänoikeusvaatimukset, kun käytät ääntä projektillesi. Lisää aiheesta täällä:

Tämän projektin ovikellon ääni tuli osoitteesta https://freesound.org/s/163730/, jonka toimitti Tim Kahn.

Jos haluat ladata äänen ilman tiliä, olen muuttanut äänen mp3 -muotoon, joka voidaan ladata täältä:

Vaihe 2: Äänitiedoston lataaminen P5.js -tiedostoon

Kun olemme ladanneet ovikellomme, meidän on ladattava se p5.js -luonnokseseemme, jotta voimme käyttää sitä.

Voit tehdä tämän seuraavasti:

- Napsauta '>' -kuvaketta web -editorin vasemmalla puolella, aivan toistopainikkeen alapuolella. Tämä avaa sivupalkin, joka näyttää luonnoksen tiedostot.

- Napsauta pientä alaspäin suuntautuvaa kolmioa Sketch Filesin oikealla puolella. Tämä tuo esiin avattavan valikon, jossa on vaihtoehdot lisätä kansio ja lisätä tiedosto.

- Napsauta Lisää tiedosto. Tämä avaa ikkunan tiedoston lisäämiseksi. Voit vetää ovikellotiedoston laatikkoon tai napsauttaa ruutua, jossa lukee”vedä tiedostot tähän ladataksesi tai napsauta käyttääksesi selainta”. Tämän avulla voit selata tietokoneesi tiedostoja löytääksesi äänitiedoston.

- Kun olet vetänyt tai valinnut tiedoston, näet sen lataamisen ja tiedoston nimi näkyy sivupalkissa.

Nyt voit käyttää ja käyttää tätä äänitiedostoa luonnoksessasi.

Vaihe 3: Äänitiedoston lataaminen P5.js -luonnokseen

Äänitiedoston lataaminen p5.js -luonnokseen edellyttää, että teemme äänitiedosto -objektin. Objektilla on omat ominaisuutensa ja toiminnot, joita voimme käyttää.

Jotta voimme tehdä objektin, meidän on ensin tehtävä muuttuja objektin pitämiseksi. Näin voimme käyttää objektia ja sen ominaisuuksia koko luonnoksen ajan. Jos haluat tehdä muuttujan, siirry luonnoksen ylimmälle riville ja kirjoita sana let. Tätä sanaa käytetään ilmoittamaan muuttuja javascriptissä. Anna sitten muuttujalle nimi. Voimme kutsua muuttujaa haluamallamme tavalla, mutta on hyödyllistä antaa sille nimi, joka liittyy siihen, mitä se tekee koodissamme. Tässä tapauksessa on järkevää kutsua sitä ovikelloksi.

anna ovikellon;

Koska p5.js on verkkopohjainen, meidän on varmistettava, että äänitiedosto on ladattu luonnokseen ennen luonnoksen alkamista, muuten emme ehkä voi käyttää objektin ominaisuuksia. Tätä varten meidän on lisättävä toiminto äänitiedoston lataamiseksi ennen luonnoksen alkamista. Tätä toimintoa kutsutaan esilataukseksi (). Kirjoitamme tämän samalla tavalla kuin setup () ja draw () -toiminto.

Kiharaisten hakasulkeiden sisällä määritämme muuttujan ääniobjektiin käyttämällä loadSound () -toimintoa. Kirjoita sulkujen sisälle äänitiedoston tarkka nimi lainausmerkkien sisään:

function preload () {

ovikello = loadSound ('ovikello.mp3');

}

Vaihe 4: Toista äänitiedosto käyttämällä näppäintä ()

Nyt kun äänitiedosto on ladattu luonnokseen, voit toistaa sen play () -menetelmällä. Menetelmät ovat olennaisesti objektiin liittyviä toimintoja.

Jos olet aiemmin käyttänyt näppäinten painalluksia p5.js -tiedostossa, olet todennäköisesti käyttänyt ehdollista lausetta, jossa on muuttuja keyIsPressed piirtotoiminnon sisällä. Äänitiedostoja käsiteltäessä emme kuitenkaan halua käynnistää sitä piirtotoiminnon sisällä. Piirtotoiminto on silmukka, joten sitä päivitetään jatkuvasti. Tämä tarkoittaa, että äänitiedostoa toistetaan yhä uudelleen, kunhan näppäintä painetaan alas, mikä ei ole miellyttävää kuunneltavaa.

Tämän välttämiseksi käytät toimintoa nimeltä keyPressed (). Tämä kirjoitetaan myös samalla tavalla kuin setup () ja draw () -toiminto. Kirjoita tämä koodin alareunaan draw () -toiminnon alle.

Kiharaisten sulkeiden sisään asetetaan play () -menetelmä, joka laukaisee äänitiedoston kerran, kun painat näppäintä. Jos haluat käyttää metodia objektille, kirjoita muuttujan nimi, joka pitää objektin, ja sen jälkeen.play ();

toimintonäppäinPainettu () {

ovikello.play ();

}

Nyt kun suoritat luonnoksen, voit painaa näppäintä ja ovikellon ääni kuuluu.

TÄRKEÄ HUOMAUTUS: Kun lisäät näppäimiä koodiin, web -editorin on tiedettävä, painammeko näppäintä kirjoittaaksesi koodia tekstieditorissa vai painammeko näppäintä tehdäksemme sen, mitä koodasimme. Kun napsautat toistopainiketta, siirrä hiiri kankaan päälle ja napsauta kangasta. Tämä tuo editorin painopisteen luonnokseen ja näppäimen painaminen laukaisee haluamasi näppäinkoodin

Vaihe 5: Tee paperipainike

Äänen laukaisemiseksi Makey Makeyn avulla käytämme tavallista lyijykynää ja paperia painikkeen tekemiseen.

Piirrä kaksi puoliympyrää, joiden väliin jää hyvin pieni rako, jotta ne eivät kosketa toisiaan, mutta ovat niin lähellä, että voimme koskettaa molempia puoliskoja samanaikaisesti yhdellä sormella. Jokaisessa puoliympyrässä tulee olla myös paksu viiva, joka ulottuu paperin kumpaankin päähän. Tähän kiinnität Makey Makeyn alligaattoripidikkeet.

Varmista, että täytät molemmat puolet hyvin tummaksi, jotta kynän grafiitti kykenee pitämään Makey Makeyn virran.

Kahden puoliympyrän suunnittelussa on oltava niin pieni rako, että on periaatteessa mahdotonta olla koskettamatta molempia puolia samanaikaisesti. Näin voit suorittaa virtapiirin Makey Makeyn avaimen ja maan välillä ilman, että sinun tarvitsee pitää kiinni maadoitusjohdosta.

Vaihe 6: Määritä Makey Makey

Ota esiin Makey Makey -kortti, USB -kaapeli ja kaksi alligaattoripidikettä. Kiinnitä yksi alligaattoripidike maapalloon ja toinen avaruusnäppäimeen (koska emme määrittäneet avainta koodissamme, mikä tahansa painamamme näppäin laukaisee äänen).

Ota välilyöntinäppäimeen kiinnitetty alligaattoripidike ja leikkaa se paperipainikkeen toiselle puolelle. Ota altaan kiinnike, joka on kiinnitetty maahan, ja kiinnitä se paperipainikkeen toiselle puolelle.

Liitä USB -kaapeli kannettavaan tietokoneeseen.

Vaihe 7: Käynnistä äänitiedosto painamalla painiketta

Tässä vaiheessa olet valmis soittamaan ovikellosi. Aloita luonnos (muista napsauttaa hiirtä kankaalla, jotta näppäimen painallus suorittaa näppäinpainalluksen () -toiminnon) ja kosketa sitten paperin kahta puoliympyrää samanaikaisesti. Sinun pitäisi kuulla ovikellon äänitiedoston toiston ääni.

Vaihe 8: Laajennus: Lisää visuaalinen komponentti luonnokseen

Tässä vaiheessa luonnoksemme sisältää vain koodin äänitiedoston toistamiseksi, joten et näe mitään muutoksia näytöllä. Tämä voi olla kaikki mitä haluat tehdä, jos yrität luoda jonkinlaista interaktiivista ääniprojektia.

Kuitenkin p5.js: n visuaalisen koodausominaisuuden ansiosta grafiikan lisäämismahdollisuudet ovat rajattomat. Voit jopa saada visuaalisia kuvia, jotka reagoivat äänitiedostoihisi monin tavoin, kuten näkyvät vain äänitiedoston toiston aikana, reagoivat äänenvoimakkuuden ja/tai taajuuden muutoksiin tai jopa esittävät visuaalisen esityksen itse äänestä.

Vaihe 9: Laajennus: Vaihda ympyrä vaihtamalla väriä, kun painiketta painetaan

Jotta tämä projekti olisi yksinkertainen, aiomme vain tehdä ympyrän, joka muuttaa väriä, kun painiketta painetaan.

Luo piirto () -funktiossa ympyrä ellipsi () -funktiolla. Lisää ympyrän väri lisäämällä fill () -toiminto. Tässä luonnoksessa alkuperäinen väri on valkoinen, joka on harmaasävyarvo 255. Voit asettaa värin haluamaksesi käyttämällä RGB -väriarvoja.

Luo ehdollinen lauseke fill () - ja ellipsi () -funktion väliin käyttämällä sulkeissa olevaa keyIsPressed -muuttujaa. Aseta ehdollisen lausekkeen kiharaiden haarukoiden väliin toinen fill () -toiminto, jonka väri on ympyrän muutettava, kun näppäintä painetaan. Tässä projektissa väri muuttuu keltaiseksi, jonka RGB -arvo on 255, 255, 0.

if (keyIsPressed) {

täyttö (255, 255, 0);

}

Suorita luonnos painamalla toistopainiketta. Valkoisen ympyrän pitäisi nyt näkyä luonnoksen latautuessa (muista napsauttaa kankaalla hiirtä). Paina sitten paperipainiketta ja kuulet ovikellon soivan ja ympyrän muuttuvan värin.

p5.js -luonnos: