Campanello di carta con P5.js e Makey Makey: 9 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:01

Progetti Makey Makey »

Questo progetto crea uno schizzo in p5.js che può riprodurre un file audio premendo un tasto, quindi crea un semplice pulsante con una matita, carta e un Makey Makey per attivare il suono.

Sebbene questo progetto utilizzi un suono di campanello, i passaggi includono come caricare un file audio nel tuo schizzo p5.js, in modo che possa essere facilmente adattato per utilizzare qualsiasi tipo di suono.

Ulteriori informazioni su p5.js:

Se sei nuovo nell'uso di p5.js con Makey Makey, ti suggerisco di dare un'occhiata prima a questo progetto:

Forniture

Matita

Un quadratino di carta

Makey Makey kit (con 2 clip a coccodrillo)

Computer portatile con connessione Internet

Passaggio 1: download del file audio

Questo progetto richiede l'utilizzo di un file audio che dobbiamo caricare nel nostro sketch p5.js. Per fare ciò, dobbiamo prima scaricare il file audio.

Se non riesci a scaricare file sul tuo computer o desideri semplicemente saltare il download del file e caricarlo nel tuo schizzo, puoi andare a questo link per un modello p5.js con il suono già caricato e andare al passaggio 3. Tuttavia, se desideri lavorare con file audio in p5.js in futuro, questo passaggio e il prossimo ti mostreranno come farlo.

Ci sono molti posti per scaricare effetti sonori e file audio sul web, alcuni che richiedono un account, come freesound.org e altri che non richiedono un account, come soundbible.com. Tieni sempre presente i requisiti di licenza e/o attribuzione quando utilizzi un suono per il tuo progetto. Maggiori informazioni qui:

Il suono del campanello per questo progetto proviene da https://freesound.org/s/163730/ fornito da Tim Kahn.

Se desideri scaricare l'audio senza creare un account, ho convertito l'audio in un formato mp3 che può essere scaricato qui:

Passaggio 2: caricamento del file audio in P5.js

Una volta scaricato il suono del campanello, dobbiamo caricarlo nel nostro sketch p5.js in modo da potervi accedere.

Per fare ciò, segui questi passaggi:

- Fai clic sull'icona ' > ' sul lato sinistro dell'editor web, appena sotto il pulsante di riproduzione. Questo aprirà la barra laterale che mostra i file per il tuo schizzo.

- Fare clic sul piccolo triangolo rivolto verso il basso a destra di "Sketch Files". Verrà visualizzato un menu a discesa con le opzioni "aggiungi cartella" e "aggiungi file"

- Fare clic su "aggiungi file". Questo farà apparire una finestra per aggiungere un file. Puoi trascinare il file del campanello nella casella o fare clic nel punto in cui la casella dice "trascina i file qui per caricarli o fai clic per utilizzare il browser dei file". Ciò ti consentirà di navigare tra i file del tuo computer per individuare il file audio.

- Una volta trascinato o selezionato il file, lo vedrai caricare e il nome del file apparirà nella barra laterale.

Ora sarai in grado di accedere e utilizzare questo file audio nel tuo schizzo.

Passaggio 3: caricamento del file audio in P5.js Sketch

Il caricamento di un file audio in uno sketch p5.js richiede di creare un oggetto soundfile. Un oggetto ha le sue proprietà e funzioni integrate che possiamo usare.

Per creare un oggetto, dobbiamo prima creare una variabile per contenere l'oggetto. Questo ci permetterà di accedere all'oggetto e alle sue proprietà in tutto lo schizzo. Per creare una variabile, vai alla riga superiore dello schizzo e scrivi la parola let. Questa parola è usata per dichiarare una variabile in javascript. Quindi dai un nome alla variabile. Possiamo chiamare la variabile come vogliamo, ma è utile darle un nome che sia correlato a ciò che farà nel nostro codice. In questo caso, ha senso chiamarlo campanello.

lasciare campanello;

Poiché p5.js è basato sul web, dobbiamo assicurarci che il file audio sia stato caricato nello sketch prima che lo sketch inizi a essere eseguito, altrimenti potremmo non essere in grado di accedere alle proprietà dell'oggetto. Per fare ciò, dobbiamo aggiungere una funzione per caricare il file audio prima che inizi lo sketch. Questa funzione è chiamata precarico(). Lo scriviamo allo stesso modo delle funzioni setup() e draw().

All'interno delle parentesi graffe, assegneremo la nostra variabile all'oggetto sound utilizzando la funzione loadSound(). All'interno delle parentesi, scrivi il nome esatto del file audio tra virgolette:

funzione precarico() {

campanello = loadSound('campanello.mp3');

}

Passaggio 4: riprodurre file audio utilizzando la funzione KeyPressed()

Ora che il file audio è stato caricato nello sketch, puoi riprodurlo usando il metodo play(). I metodi sono essenzialmente funzioni specifiche di un oggetto.

Se hai usato la pressione dei tasti in p5.js prima, probabilmente hai usato un'istruzione condizionale con la variabile keyIsPressed all'interno della funzione di disegno. Tuttavia, quando si lavora con file audio, non vogliamo attivarlo all'interno della funzione di disegno. La funzione di disegno è un ciclo, quindi è in costante aggiornamento. Ciò significa che il file audio verrà riprodotto più e più volte finché viene premuto un tasto che non sarà piacevole da ascoltare.

Per evitare ciò, utilizzerai una funzione chiamata keyPressed(). Anche questo è scritto come la funzione setup() e draw(). Scrivi questo in fondo al codice sotto la funzione draw().

All'interno delle parentesi graffe è dove inserisci il metodo play() che attiverà il file audio una volta quando premi un tasto. Per utilizzare un metodo per un oggetto, scrivi il nome della variabile che contiene l'oggetto seguito da.play();

tasto funzionePremuto() {

campanello.play();

}

Ora, quando esegui il tuo schizzo, puoi premere un tasto e verrà riprodotto il suono del campanello.

NOTA IMPORTANTE: quando si aggiungono i tasti premuti nel nostro codice, l'editor web deve sapere se stiamo premendo un tasto per scrivere il codice nell'editor di testo o se stiamo premendo il tasto per fare la cosa per cui abbiamo codificato la pressione di un tasto. Quando fai clic sul pulsante di riproduzione, sposta il mouse sulla tela e fai clic sulla tela. Questo porterà il focus dell'editor sullo schizzo e premendo un tasto si attiverà il codice di pressione del tasto che vogliamo che accada

Passaggio 5: crea il pulsante di carta

Per attivare il suono con Makey Makey, utilizzeremo una normale matita e carta per creare un pulsante.

Disegna due semicerchi con uno spazio molto piccolo tra loro in modo che non si tocchino effettivamente ma abbastanza vicini da poter toccare entrambe le metà contemporaneamente con un dito. Ogni semicerchio dovrebbe anche avere una linea spessa che si estende a ciascuna estremità della carta. Qui è dove attaccherai le clip a coccodrillo del Makey Makey.

Assicurati di riempire entrambi i lati molto scuri in modo che la grafite della matita sia in grado di trattenere la corrente del Makey Makey.

Il design dei due semicerchi è di avere uno spazio così piccolo tra loro che è praticamente impossibile non toccare entrambi i lati contemporaneamente. Ciò consente di completare il circuito tra la chiave e la terra sul Makey Makey senza dover tenere il filo di terra.

Passaggio 6: imposta Makey Makey

Prendi la tavola Makey Makey, il cavo USB e due clip a coccodrillo. Attacca una clip a coccodrillo alla Terra e una alla barra spaziatrice (poiché non abbiamo specificato una chiave nel nostro codice, qualsiasi tasto che premiamo attiverà il suono).

Prendi la clip a coccodrillo attaccata alla barra spaziatrice e fissala su un lato del bottone di carta. Prendi la clip a coccodrillo che è attaccata alla Terra e agganciala all'altro lato del bottone di carta.

Collega il cavo USB al laptop.

Passaggio 7: premere il pulsante per attivare il file audio

A questo punto sei pronto per suonare il campanello. Inizia lo schizzo (ricorda di fare clic con il mouse sulla tela in modo che la pressione del tasto eseguirà la funzione keyPressed()) e quindi tocca i due semicerchi sulla carta contemporaneamente. Dovresti sentire il suono del file audio del campanello riprodotto.

Passaggio 8: Estensione: aggiungi un componente visivo allo schizzo

A questo punto, il nostro sketch include solo il codice per riprodurre il file audio, quindi non vedrai alcun cambiamento sullo schermo. Questo potrebbe essere tutto ciò che vuoi fare se stai cercando di creare un qualche tipo di progetto sonoro interattivo.

Tuttavia, con le capacità di codifica visiva di p5.js, le possibilità di aggiungere elementi grafici sono infinite. Puoi anche avere immagini che reagiscono ai tuoi file audio in numerosi modi, come apparire solo durante la riproduzione del file audio, reagire ai cambiamenti di volume e/o frequenza o persino creare una rappresentazione visiva del suono stesso.

Passaggio 9: Estensione: fai cambiare colore a un cerchio quando viene premuto il pulsante

Per mantenere questo progetto semplice, creeremo semplicemente un cerchio che cambia colore quando viene premuto il pulsante.

Nella funzione draw(), crea un cerchio usando la funzione ellisse(). Oltre a ciò, aggiungi la funzione fill() per impostare il colore del cerchio. Per questo schizzo, il colore originale sarà il bianco, che è il valore della scala di grigi di 255. Puoi impostare il colore su quello che desideri utilizzando i valori di colore RGB.

Tra la funzione fill() e la funzione ellipse(), creare un'istruzione condizionale utilizzando la variabile keyIsPressed all'interno delle parentesi. Tra le parentesi graffe dell'istruzione condizionale, inserisci un'altra funzione fill() impostata sul colore in cui desideri che il cerchio cambi quando premi il tasto. Per questo progetto, il colore cambierà in giallo che ha un valore RGB di 255, 255, 0.

if(keyisPressed) {

riempimento(255, 255, 0);

}

Premi il pulsante di riproduzione per eseguire lo schizzo. Il cerchio bianco dovrebbe ora apparire quando lo schizzo viene caricato (ricordarsi di fare clic con il mouse sulla tela). Quindi premi il pulsante di carta e dovresti sentire il campanello suonare e vedere il cerchio cambiare colore.

p5.js schizzo: