Cum să scrii un animat robot sensibil la voce în p5.js

JavaScript este limba internetului. Lucrul în dezvoltarea front-end-ului fără a fi imposibil. Pentru începători, în special pentru copii, poate fi o provocare să te obișnuiești cu sintaxa limbii.

Pentru a finaliza începători, chiar instalarea și rularea unui server local în browser poate fi un obstacol în calea pietonilor. Ce se întâmplă dacă a existat o modalitate de a face ceva cool cu ​​JavaScript, fără a instala ceva? Introduceți p5.js, o bibliotecă de codare creată în spiritul creativității.

Iată cum să faceți un cap de robot animat reactiv sonor folosind câteva principii simple de codificare.

Ce este p5.js?

Biblioteca p5.js a fost creată de artistul din Los Angeles, Lauren MacCarthy. Acesta este conceput pentru a oferi o platformă similară procesării, expresiei creative și artei. Instrumentele clare merg împreună cu tutoriale bine explicate și documente de referință pentru ao face perfectă pentru începători.

Fie că faceți animații, muzică, jocuri simple sau chiar conectați la hardware extern 8 Proiecte uimitoare cu procesare și p5.js 8 Proiecte uimitoare cu procesare și p5.js Electronicele DIY sunt mai mult decât Arduino și Raspberry Pi. În acest rundown, acoperim unele dintre cele mai tari proiecte pe care le puteți face cu procesarea și p5.js! Citiți mai multe, p5.js vă poate ajuta.

Editorul p5.js

Pentru a începe, deschideți fereastra browserului și navigați la editorul web p5.js. Înainte de a începe, există doi pași opționali.

1. Trebuie să fiți conectat (ă) la p5.js pentru a salva schițele, așa că este recomandabil să faceți un cont. Înscrierea este gratuită și puteți utiliza contul dvs. Google sau GitHub pentru a vă conecta, dacă doriți.

2. Faceți clic pe rotița de rotire a setărilor din colțul din dreapta sus. Aici puteți modifica tema și mărimea textului pentru toți iubitorii de temă închis acolo.

Editorul p5.js combină un editor de cod, o consolă și o fereastră de ieșire în același spațiu. Până în prezent, există două funcții deja create pentru dvs..

Noțiuni de bază despre p5.js

Fiecare schiță p5.js începe cu două elemente. înființat() funcție, și a desena() funcţie. Pentru cei care au programat un Arduino înainte, acest lucru va fi familiar!

setarea funcției () createCanvas (500, 500); 

înființat() funcționează la începutul programului dvs. În acest caz, configurarea creează o pânză pătată de 400 de pixeli. Schimbați această valoare la (500, 500) pentru o zonă ușor mai mare de lucru.

Instalarea rulează o singură dată și este utilizată pentru a crea părțile necesare pentru programul dvs., împreună cu valorile inițiale ale programului dvs..

desenul funcției () background (220); 

a desena() metoda se numește fiecare cadru. Aceasta funcționează la fel ca și funcția de buclă de pe Arduino sau funcția de actualizare în Unity 3D. Orice lucru care trebuie schimbat în schiță se întâmplă aici. Deocamdată, fundalul este redat la fiecare cadru. În partea de sus veți vedea două icoane, jucați și opriți. Clic Joaca.

Acesta este programul până acum - o pânză de 500 × 500 cu fundal gri,

Crearea unei forme

Lucrul cu formele din p5.js este puțin diferit față de obiectele de formă presetate folosite de tutorialul de animație web mo.js. Pentru a crea o elipsă simplă, adăugați aceasta la codul din a desena() , sub nivelul unde ați setat culoarea de fundal.

desenul funcției () background (220); elipsă (250, 250, 50)

elipsă() metoda ia mai multe argumente. Primele două sunt poziția lui X și Y pe pânză. Deoarece panza are o lățime de 500 de pixeli, setarea acestor două valori la 250 pune elipsa în centru. Al treilea argument este lățimea cercului - în acest caz, 50 de pixeli.

Deci, aveți un fundal și un cerc, dar nu arată prea bine. E timpul să rezolv asta.

Adăugarea unui anumit stil

Începeți prin schimbarea culorii de fundal. Numărul din paranteze reprezintă o valoare a tonului de gri. Deci, 0 este negru și 255 este alb, cu diferite nuanțe de gri între ele. Pentru a face fundalul negru, modificați această valoare la 0.

desenul funcției () background (0); elipsă (250,250,50); 

Acum când faceți clic pe redare, fundalul va fi negru. Pentru a da cercului o anumită culoare, vom dori să îi afectăm individual valorile RGB (roșu verde și albastru). Creați câteva variabile în partea de sus a scriptului dvs. (chiar la început, înainte de funcția de configurare) pentru a stoca aceste valori.

var r, g, b;

În funcția de configurare, setați valoarea r la 255, și îi dau celorlalți o valoare 0. Culoarea RGB combinată va fi roșu!

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

Pentru a aplica culoarea în cerc, adăugați a completati() apel la metoda remiză, chiar înainte de a desena cercul.

 umple (r, g, b); elipsă (250,250,50);

Acum faceți clic pe Joaca, și ar trebui să vedeți un cerc roșu pe fundal negru.

Efectuarea cercului este un început bun, dar adăugarea interactivității este locul în care devine cu adevărat interesant!

Faceți clic pentru a schimba culoarea

Adăugarea de cod pentru a rula pe un click de mouse este destul de ușor în p5.js. Creați o funcție nouă sub a desena() metodă.

Mouse-ul funcției () r = aleatoriu (256); g = aleatoare (256); b = aleatoare (256);  

mousePressed () asculta pentru orice mouse apasă și efectuează codul din interiorul parantezelor. întâmplător() funcția returnează o valoare aleatoare între 0 și un număr dat. În acest caz, setați valorile r, g și b între 0 și 255 la fiecare apăsare a mouse-ului.

Renunțați la cod și faceți clic de câteva ori pe mouse. Cercul trebuie să schimbe culoarea atunci când o faci.

Acum, animația dvs. este reactivă la clicurile de mouse, dar cum rămâne cu utilizarea vocii utilizatorului?

Configurarea controlului vocal

Utilizarea microfonului sistemului se face ușor cu biblioteca de sunet p5.js. În partea de sus a scriptului, creați o nouă variabilă numită Mic.

var r, g, b; var mic;

Adăugați aceste linii la dvs. înființat() funcția de atribuire Mic la intrarea audio.

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

Când faceți clic pe redare acum, veți primi o casetă de dialog care solicită permisiunea de a accesa microfonul la bord.

Clic Permite. În funcție de browserul pe care îl utilizați, acesta poate aminti alegerea dvs. sau este posibil să fie necesar să faceți clic pe o casetă care confirmă. Acum, microfonul este configurat și este timpul să îl folosiți.

Scalarea după volum

Pentru a utiliza volumul microfonului ca valoare în program, va trebui să îl stocați ca variabilă. Schimba-ti a desena() metoda de a arata astfel:

desenul funcției () var micLevel = mic.getLevel (); fundal (0); umple (r, g, b); elipsă (250,250,50 + micLevel * 2000);  

La începutul funcției, se numește o nouă variabilă micLevel este creată și atribuită amplitudinii actuale a microfonului.

Elipsa avea o lățime fixă ​​de 50 de pixeli. Acum, 50 de pixeli reprezintă lățimea minimă adăugată la valoarea micLevel care actualizează fiecare cadru. Numărul cu care se înmulțește micLevel va varia în funcție de sensibilitatea microfonului.

Experimentați cu valori mai mari - o valoare de 5000 va crea o schimbare mai dramatică a scării!

Notă: dacă acest lucru nu funcționează pentru dvs., este posibil ca microfonul dvs. să nu fie configurat corect. Browserul utilizează microfonul implicit pentru sistem și este posibil să fie necesar să modificați setările de sunet și să le actualizați.

Construirea robotului

Acum aveți toate instrumentele necesare pentru a crea robotul. Mai întâi, mutați elipsa pe care ați creat-o și adăugați-o pe alta pentru a face ochii.

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

“dantură” sunt o serie de dreptunghiuri care se extind din partea de jos a ecranului. Rețineți că RECT () metoda necesită un parametru suplimentar pentru lățimea fixă.

 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); 

De data aceasta, doriți doar ca înălțimea dinților să se schimbe și să se dea “zâmbitor” trebuie să aibă sensibilități diferite. Înălțimea minimă este -100 (așa cum apare din partea inferioară a pânzei), deci micLevel trebuie să fie, de asemenea, un număr negativ.

Faceți clic pe redare și ar trebui să vedeți o față robot aproape terminată!

Încă o dată, poate fi necesar să vă ajustați numerele de multiplicare pentru obținerea celor mai bune rezultate.

Adăugarea de atingeri de finisare

Adăugați elevilor la ochi chiar și mai mult elipsă() apeluri. Utilizați altul completati() pentru a le face alb. Adăugați-o la dvs. a desena() , sub “dantură” tocmai ați creat.

umple (255); elipsă (150,150,20 + micLevel * 1000); elipsă (345,150,30 + micLevel * 1000); 

În cele din urmă, pentru a da întreaga piesă o mică definiție, schimbați greutatea cursei în dvs. înființat() funcţie

strokeWeight (5); 

Asta e!

Dacă ceva nu funcționează, verificați-vă bine codul și puteți vedea codul complet din acest tutorial în editorul p5 dacă este necesar.

Deplasarea înainte cu p5.js

Acest tutorial începător acoperă câteva concepte de bază cu p5.js, arătând cât de ușor este să fii creativ. Ca întotdeauna, acest proiect abia scarpină suprafața a tot ceea ce este capabil de p5.js.

Timpul petrecut pentru a crea arta cu p5.js este un timp bine petrecut, pe măsură ce vă familiarizați cu gândirea ca un programator și sintaxă JavaScript. Acestea sunt toate competențe importante pentru a avansa, dacă vă decideți să se scufunde în toată inima și să învețe cu adevărat JavaScript Într-adevăr Aflați JavaScript cu 5 cursuri Udemy de top Învață cu adevărat JavaScript cu 5 cursuri Udemy de top JavaScript este limba de programare a web-ului. Dacă aveți un motiv să învățați JavaScript, aceste cinci cursuri excelente de la Udemy ar putea fi locul pentru a începe călătoria dvs. de codificare. Citeste mai mult !

Explorați mai multe despre: Tutoriale de codificare, JavaScript.