Come scrivere un'animazione di robot sensibile alla voce in p5.js

voice-sensitive-robot

JavaScript è la lingua di Internet. Lavorare nello sviluppo front-end senza di esso è impossibile. Per i principianti, specialmente i bambini, può essere difficile abituarsi alla sintassi della lingua.

Per completare i principianti, anche l'installazione e l'esecuzione di un server locale nel browser può essere un ostacolo. E se ci fosse un modo per creare qualcosa di interessante con JavaScript, senza installare nulla? Inserisci p5.js, una libreria di codifica progettata pensando alla creatività.

Ecco come creare una testa di robot animato reattiva utilizzando alcuni semplici principi di codifica.

Il colore finito cambia la testa del robot reattivo in p5.js

Cos'è p5.js?

La libreria p5.js è stata creata dall'artista di Los Angeles Lauren MacCarthy. È progettato per fornire una piattaforma simile a Processing , per l'espressione creativa e l'arte. Gli strumenti chiari sono accompagnati da tutorial ben spiegati e documenti di riferimento per renderlo perfetto per i principianti.

P5.js può essere d'aiuto sia che tu stia realizzando animazioni, musica, giochi semplici o persino la connessione a hardware esterno .

L'editor p5.js

Per iniziare, apri la finestra del browser e vai all'editor web p5.js. Prima di iniziare, ci sono due passaggi opzionali.

1. È necessario aver effettuato l'accesso a p5.js per salvare gli schizzi, quindi è consigliabile creare un account. La registrazione è gratuita e puoi utilizzare il tuo account Google o GitHub per accedere, se lo desideri.

2. Fare clic sulla rotella delle rotelle delle impostazioni nell'angolo in alto a destra. Qui puoi modificare il tema e le dimensioni del testo per tutti voi amanti del tema oscuro .

Vista annotata di un progetto vuoto in p5.js

L'editor p5.js combina un editor di codice, una console e una finestra di output nello stesso spazio. Finora ci sono due funzioni già impostate per te.

Nozioni di base su p5.js

Ogni schizzo p5.js inizia con due elementi. La funzione setup () e la funzione draw () . Per quelli di voi che hanno già programmato un Arduino, questo sarà familiare!

 function setup() { createCanvas(500, 500); } 

La funzione setup () viene eseguita all'inizio del programma. In questo caso, l'installazione crea una tela quadrata da 400 pixel. Cambialo in (500, 500) per un'area leggermente più grande per funzionare.

L'installazione viene eseguita una sola volta e viene utilizzata per creare le parti necessarie per il programma, insieme ai valori iniziali per il programma.

 function draw() { background(220); } 

Il metodo draw () è chiamato ogni frame. Funziona molto come la funzione di loop su Arduino o la funzione di aggiornamento in Unity 3D . Tutto ciò che deve cambiare nel tuo schizzo avviene qui. Per ora, lo sfondo viene ridisegnato su ogni fotogramma. In alto vedrai due icone, riproduci e fermati. Clicca play.

Il risultato dell'esecuzione di uno schizzo p5.js predefinito

Questo è il programma fino ad ora: una tela 500 × 500 con uno sfondo grigio,

Creare una forma

Lavorare con le forme in p5.js è un po 'diverso rispetto agli oggetti di forma preimpostati utilizzati nell'esercitazione di animazione web mo.js. Per creare un'ellisse semplice, aggiungi questo al codice nel metodo draw () , appena sotto il punto in cui imposti il ​​colore di sfondo.

 function draw() { background(220); ellipse(250,250,50) } 

Il metodo ellipse () accetta diversi argomenti. I primi due sono la posizione X e Y sulla tela. Poiché la tela è larga 500 pixel, l'impostazione di questi due valori su 250 pone l'ellisse al centro. Il terzo argomento è la larghezza del cerchio, in questo caso 50 pixel.

Un'ellisse bianca resa su una tela p5.js

Quindi hai uno sfondo e un cerchio, ma non sembra poi così bello. È ora di aggiustarlo.

Aggiungere un po 'di stile

Inizia cambiando il colore di sfondo. Il numero tra parentesi rappresenta un valore di scala di grigi. Quindi, 0 è nero e 255 è bianco, con diverse sfumature di grigio intermedie. Per rendere lo sfondo nero, cambiare questo valore a 0.

 function draw() { background(0); ellipse(250,250,50); } 

Ora quando clicchi su Play lo sfondo sarà nero. Per dare un colore al cerchio, vorremmo influenzare i suoi valori RGB (rosso verde e blu) individualmente. Crea alcune variabili nella parte superiore del tuo script (all'inizio, prima della funzione di configurazione) per memorizzare questi valori.

 var r, g, b; 

Nella funzione di impostazione, impostare il valore di r su 255 e assegnare agli altri il valore 0 . Il suo colore RGB combinato sarà rosso vivo!

 r=255; g=0; b=0; 

Per applicare il colore al cerchio, aggiungi una chiamata fill () al metodo draw, appena prima di disegnare il cerchio.

  fill(r,g,b); ellipse(250,250,50); 

Ora fai clic su Riproduci e dovresti vedere un cerchio rosso su sfondo nero.

Un cerchio rosso su una tela di sfondo nera in p5.js

Fare il cerchio è un buon inizio, ma aggiungere interattività è dove diventa davvero interessante!

Clicca per cambiare colore

Aggiungere codice per l'esecuzione con un clic del mouse è abbastanza semplice in p5.js. Crea una nuova funzione sotto il metodo draw () .

 function mousePressed() { r = random(256); g = random(256); b = random(256); } 

Il mousePressed () ascolta qualsiasi tasto del mouse e esegue il codice all'interno delle parentesi. La funzione random () restituisce un valore casuale compreso tra 0 e un numero specificato. In questo caso, si impostano i valori r, g e b tra 0 e 255 su ogni macchina da stampa del mouse.

Rieseguire il codice e fare clic con il mouse alcune volte. Il cerchio dovrebbe c
ambiare colore quando lo fai.

Una cerchia che cambia quando si fa clic sullo schermo in p5.js

Ora la tua animazione è reattiva ai clic del mouse, ma per quanto riguarda l'uso della voce dell'utente?

Impostazione del controllo vocale

L'utilizzo del microfono di sistema è facilitato con la libreria audio p5.js. Nella parte superiore del tuo script, crea una nuova variabile chiamata mic .

 var r, g, b; var mic; 

Aggiungi queste linee alla tua funzione setup () per assegnare il microfono all'ingresso audio.

 mic = new p5.AudioIn() mic.start(); 

Quando fai clic su Riproduci ora, otterrai una finestra di dialogo che richiede il permesso di accedere al microfono integrato.

Un popup di autorizzazione per consentire al browser di accedere al microfono

Fai clic su Consenti . A seconda del browser che utilizzi, potrebbe ricordare la tua scelta o potrebbe essere necessario fare clic su una casella di conferma. Ora il microfono è configurato ed è ora di utilizzarlo.

Ridimensionamento per volume

Per utilizzare il volume del microfono come valore nel programma, è necessario memorizzarlo come variabile. Cambia il tuo metodo draw () per assomigliare a questo:

 function draw() { var micLevel = mic.getLevel(); background(0); fill(r,g,b); ellipse(250,250,50 + micLevel * 2000); } 

All'inizio della funzione, viene creata una nuova variabile denominata micLevel , assegnata all'ampiezza del microfono corrente.

L'ellisse aveva una larghezza fissa di 50 pixel. Ora 50 pixel è la larghezza minima, aggiunta al valore micLevel che aggiorna ogni fotogramma. Il numero moltiplicato per micLevel varia in base alla sensibilità del microfono.

gif che mostra il ridimensionamento controllato dalla voce in p5.js

Sperimenta con valori più alti: un valore di 5000 creerà un cambiamento di scala più drammatico!

Nota : se questo non funziona, il tuo microfono potrebbe non essere configurato correttamente. Il browser utilizza il microfono predefinito di sistema e potrebbe essere necessario modificare le impostazioni audio e aggiornarle.

Costruire il robot

Ora hai tutti gli strumenti necessari per creare il robot. Innanzitutto, sposta l'ellisse che hai creato e aggiungi un altro per creare gli occhi.

  ellipse(150,150,50 + micLevel * 2000); ellipse(350,150,100 +micLevel * 2000); 

I "denti" sono una serie di rettangoli che si estendono dalla parte inferiore dello schermo. Nota che il metodo rect () richiede un parametro extra per la sua larghezza fissa.

  rect(0, 500,100, -100 -micLevel * 5000); rect(400, 500,100, -100 -micLevel * 5000); rect(100, 500,100, -100 -micLevel * 3000); rect(300, 500,100, -100 -micLevel * 3000); rect(200, 500,100, -100 -micLevel * 1000); 

Questa volta, vuoi solo che l'altezza dei denti cambi, e per dare l'effetto "sorridente" devono avere sensibilità diverse. L'altezza minima è -100 (come emerge dal fondo della tela), quindi il micLevel deve essere anche un numero negativo.

Fai clic su play e dovresti vedere una faccia di robot quasi finita!

la faccia robotizzata quasi costruita in p5.js

Ancora una volta, potrebbe essere necessario modificare i numeri del moltiplicatore per ottenere i migliori risultati.

Aggiunta di tocchi finali

Aggiungi pupille agli occhi con ancora più chiamate a ellisse () . Usa un altro riempimento () per renderli bianchi. Aggiungi questo al tuo metodo draw () , sotto i "denti" che hai appena creato.

 fill(255); ellipse(150,150,20 + micLevel * 1000); ellipse(345,150,30 + micLevel * 1000); 

Infine, per dare una definizione al pezzo intero, modificare il peso della corsa nella funzione setup ()

 strokeWeight(5); 

Questo è tutto!

Il colore finito cambia la testa del robot reattivo in p5.js

Se qualcosa non funziona, controlla attentamente il codice e, se necessario, puoi vedere il codice completo da questo tutorial nell'editor p5.

Andando avanti con p5.js

Questo tutorial per principianti tratta alcuni concetti di base con p5.js, mostrando quanto sia facile essere creativi. Come sempre, questo progetto raschia a mala pena la superficie di tutto ciò che p5.js è in grado di fare.

Trascorrere del tempo a creare arte con p5.js è un tempo ben speso, poiché ti stai familiarizzando con il pensiero come un programmatore e la sintassi JavaScript. Queste sono tutte abilità importanti da portare avanti se decidi di immergerti con tutto il cuore e imparare davvero JavaScript !

Leggi l'articolo completo: Script di un'animazione di robot sensibile alla voce in p5.js

Fonte: Utilizzare