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

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.

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.

Sia che tu stia realizzando animazioni, musica, giochi semplici o persino connettendoti ad hardware esterno 8 Amazing Hardware Projects With Processing e p5.js 8 Amazing Hardware Projects con Processing e p5.js L'elettronica DIY è molto più di Arduino e Raspberry Pi. In questa panoramica, copriamo alcuni dei progetti più interessanti che puoi realizzare con Processing e p5.js! Per saperne di più, p5.js può aiutare.

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. Devi essere connesso a p5.js per salvare i tuoi schizzi, quindi è consigliabile creare un account. La registrazione è gratuita e puoi utilizzare il tuo account Google o GitHub per accedere, se lo desideri.

2. Fai 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.

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. Il impostare() funzione, e il disegnare() funzione. Per quelli di voi che hanno già programmato un Arduino, questo sarà familiare!

function setup () createCanvas (500, 500); 

Il impostare() la funzione viene eseguita all'inizio del programma. In questo caso, l'installazione crea una tela quadrata da 400 pixel. Cambia questo in (500, 500) per un'area leggermente più grande da lavorare.

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 disegnare() il metodo è 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. Clic giocare.

Questo è il programma finora: 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 disegnare() metodo, appena sotto il punto in cui si imposta il colore di sfondo.

function draw () background (220); ellisse (250,250,50)

Il ellisse() il metodo richiede 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.

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 in 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); ellisse (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 a 255, e dare agli altri un valore 0. Il suo colore RGB combinato sarà rosso vivo!

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

Per applicare il colore al cerchio, aggiungere a riempire() chiamare il metodo draw, appena prima di disegnare il cerchio.

 riempimento (r, g, b); ellisse (250,250,50);

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

Fare il cerchio è un buon inizio, ma l'aggiunta di 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 disegnare() metodo.

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

Il mousePressed () ascolta qualsiasi mouse preme e esegue il codice all'interno delle parentesi. Il casuale() la funzione 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 cambiare colore quando lo fai.

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 al tuo impostare() funzione da assegnare mic 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.

Clic permettere. 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 disegnare() metodo per assomigliare a questo:

function draw () var micLevel = mic.getLevel (); background (0); riempimento (r, g, b); ellisse (250,250,50 + micLevel * 2000);  

All'inizio della funzione, una nuova variabile chiamata micLevel viene creato e assegnato 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.

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.

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

Il “denti” sono una serie di rettangoli che si estende dalla parte inferiore dello schermo. Si noti che il rect () il metodo 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 cambiare l'altezza dei denti e dare il “sorridente” effetto devono avere sensibilità diverse. L'altezza minima è -100 (come esce dal fondo della tela), quindi il micLevel deve essere anche un numero negativo.

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

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 di più ellisse() chiamate. Usane un altro riempire() per renderli bianchi. Aggiungi questo al tuo disegnare() metodo, sotto il “denti” hai appena creato.

riempimento (255); ellisse (150,150,20 + micLevel * 1000); ellisse (345,150,30 + micLevel * 1000); 

Infine, per dare al pezzo intero una piccola definizione, cambia il peso della corsa nel tuo impostare() funzione

strokeWeight (5); 

Questo è tutto!

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 le competenze importanti da portare avanti se decidi di immergerti completamente e imparare davvero JavaScript. Really Learn JavaScript con 5 corsi Top Udemy Imparo davvero JavaScript con 5 corsi Udemy Top JavaScript è il linguaggio di programmazione del web. Se hai un motivo per imparare JavaScript, questi cinque eccellenti corsi di Udemy potrebbero essere il posto giusto per iniziare il tuo viaggio di programmazione. Leggi di più !

Scopri di più su: Esercitazioni di codifica, JavaScript.