Kako skriptirati glasovno osjetljivu animaciju robota u p5.js

JavaScript je jezik interneta. Raditi na front-end razvoju bez njega je nemoguće. Početnicima, djeci posebno, može biti teško da se naviknu na sintaksu jezika.

Dovršiti novajlije, čak i instaliranje i pokretanje lokalnog poslužitelja u pregledniku može biti kamen spoticanja. Što ako postoji način da se nešto cool postigne s JavaScriptom, a da se ništa ne instalira? Unesite p5.js, knjižnicu kodiranja dizajniranu s kreativnošću na umu.

Evo kako napraviti zvučno reaktivnu animiranu glavu robota koristeći neke jednostavne principe kodiranja.

Što je p5.js?

Knjižnicu p5.js stvorila je umjetnica iz Los Angelesa Lauren MacCarthy. Dizajniran je tako da pruža sličnu platformu Processing, za kreativno izražavanje i umjetnost. Jasni alati idu zajedno s dobro objašnjenim vodičima i referentnim dokumentima kako bi bili idealni za početnike.

Bilo da pravite animacije, glazbu, jednostavne igre ili se čak povezujete s vanjskim hardverom 8 Iznenađujuće hardverske projekte s obradom i p5.js 8 Iznenađujuće hardverske projekte s obradom i p5.js Elektronika uradi sam više nego samo Arduino i Raspberry Pi. U ovom koraku pokrivamo neke od zgodnih projekata koje možete napraviti s Processingom i p5.js! , p5.js može pomoći.

Urednik p5.js

Za početak, otvorite prozor preglednika i pomaknite se do web uređivača p5.js. Prije početka, postoje dva neobvezna koraka.

1. Za spremanje skica morate biti prijavljeni na p5.js, pa je preporučljivo praviti račun. Prijavljivanje je besplatno, a za prijavu po želji možete koristiti svoj Google ili GitHub račun.

2. Kliknite na kotačić s postavkama u gornjem desnom kutu. Ovdje možete promijeniti temu i veličinu teksta za sve ljubitelje mračne teme.

Uređivač p5.js kombinira uređivač koda, konzolu i izlazni prozor u istom prostoru. Do sada su za vas već postavljene dvije funkcije.

Osnove p5.js

Svaka skica p5.js započinje s dva elementa. postaviti() funkciju i crtati() funkcija. Onima koji ste prije programirali Arduino, ovo će biti poznato!

postava funkcije () createCanvas (500, 500); 

postaviti() funkcija pokreće se na početku vašeg programa. U tom slučaju postavljanje stvara kvadratno platno veličine 400 piksela. Promijenite to u (500, 500) da malo veće područje djeluje.

Postavljanje se pokreće samo jednom i koristi se za stvaranje dijelova potrebnih vašem programu, zajedno s početnim vrijednostima za vaš program.

funkcija draw () pozadina (220); 

crtati() metoda naziva se svaki okvir. To djeluje poput funkcije petlje na Arduinu ili funkcije ažuriranja u Unity 3D-u. Ovdje se događa sve što treba promijeniti u vašoj skici. Zasad pozadina ponovno crta svaki kadar. Na vrhu ćete vidjeti dvije ikone, igrati se i zaustaviti. Klik igra.

Ovo je dosadašnji program - platna veličine 500 × 500 sa sivom pozadinom,

Stvaranje oblika

Rad s oblicima u p5.js malo se razlikuje od unaprijed postavljenih objekata oblika koji koriste mo.js udžbenik za web animaciju. Da biste stvorili jednostavnu elipsu, dodajte to kôdu u crtati() metoda, odmah ispod mjesta gdje postavljate boju pozadine.

funkcija draw () pozadina (220); elipsa (250,250,50)

elipsa() metoda uzima nekoliko argumenata. Prva dva su njegova X i Y pozicija na platnu. Budući da je platno široko 500 piksela, postavljanje ove dvije vrijednosti na 250 stavlja elipsu u sredinu. Treći argument je širina kruga - u ovom slučaju 50 piksela.

Dakle, imate pozadinu i krug, ali to ne izgleda tako dobro. Vrijeme je da to popravimo.

Dodavanje nekog stila

Započnite s promjenom boje pozadine. Broj u zagradama predstavlja vrijednost sive vrijednosti. Dakle, 0 je crno, a 255 bijelo, s različitim nijansama sive između. Da bi pozadina postala crna, promijenite ovu vrijednost u 0.

funkcija draw () pozadina (0); elipsa (250,250,50); 

Sada kada kliknete igrati pozadina će biti crna. Da bismo krugu dali neku boju, želit ćemo utjecati na njegove RGB (crveno zelene i plave) vrijednosti pojedinačno. Stvorite neke varijable na vrhu skripte (odmah na početku, prije funkcije postavljanja) da biste pohranili ove vrijednosti.

var r, g, b;

U funkciji postavljanja postavite vrijednost r do 255, a drugima dati vrijednost 0. Njegova kombinirana RGB boja bit će svijetlo crvena!

r = 255; g = 0; B = 0;

Da biste boju primijenili u krug, dodajte a punjenje () nazovite metodu crtanja, neposredno prije crtanja kruga.

 punjenje (r, g, b); elipsa (250,250,50);

Sada kliknite igra, a na crnoj pozadini trebali biste vidjeti crveni krug.

Stvaranje kruga je dobar početak, ali dodavanje interaktivnosti postaje stvarno zanimljivo!

Kliknite za promjenu boje

Dodavanje koda za pokretanje klikom miša u p5.js. je jednostavno. Kreirajte novu funkciju ispod crtati() način.

funkcija mousePress () r = slučajno (256); g = slučajni (256); b = slučajno (256);  

mousePressed () sluša sve pritiske miša i provodi kod unutar zagrada. slučajna () funkcija vraća slučajnu vrijednost između 0 i zadanog broja. U tom slučaju postavljate vrijednosti r, g i b između 0 i 255 pri svakom pritisku miša.

Ponovno pokrenite kôd i nekoliko puta kliknite mišem. Krug bi trebao mijenjati boju kada to učinite.

Sada je vaša animacija reaktivna na klikove miša, ali što je s uporabom korisnikovog glasa?

Postavljanje kontrole glasa

Korištenje sistemskog mikrofona jednostavno je pomoću knjižnice p5.js. Na vrhu skripte stvorite novu varijablu koja se zove mikrofon.

var r, g, b; var mic;

Dodajte ove retke u svoje postaviti() funkcija dodijeliti mikrofon na audio ulaz.

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

Kada kliknete Reproduciraj sada, dobit ćete dijaloški okvir sa zahtjevom za pristup ulaznom mikrofonu.

Klik dopustiti. Ovisno o tome koji preglednik koristite, on će možda zapamtiti vaš izbor ili ćete možda morati potvrditi okvir. Sad je mikrofon postavljen, i vrijeme je da ga iskoristimo.

Skaliranje prema volumenu

Za korištenje glasnoće mikrofona kao vrijednosti u vašem programu, trebat ćete ga pohraniti kao varijablu. Promijenite svoje crtati() metoda da izgleda ovako:

funkcija draw () var micLevel = mic.getLevel (); pozadina (0); punjenje (r, g, b); elipsa (250,250,50 + micLevel * 2000);  

Na početku funkcije nazvana je nova varijabla micLevel se kreira i dodjeljuje trenutnoj amplitudi mikrofona.

Elipsa je imala fiksnu širinu od 50 piksela. Sada je 50 piksela minimalna širina, dodana vrijednosti micLevel koja ažurira svaki kadar. Broj s kojim se micLevel množi ovisit će ovisno o osjetljivosti vašeg mikrofona.

Eksperimentirajte s višim vrijednostima - vrijednost 5000 stvorit će dramatičniju promjenu razmjera!

Bilješka: ako to ne radi za vas, vaš mikrofon možda neće biti pravilno postavljen. Preglednik koristi zadani mikrofon sustava i možda ćete trebati izmijeniti svoje zvučne postavke i osvježiti.

Konstrukcija robota

Sada imate sve alate potrebne za izradu robota. Prvo pomaknite elipsu koju ste stvorili i dodajte drugu da biste napravili oči.

 elipsa (150.150,50 + micLevel * 2000); elipsa (350.150.100 + micLevel * 2000); 

“zubi” su niz pravokutnika koji se protežu od dna zaslona. Imajte na umu da pravokutnika () metoda zahtijeva dodatni parametar za svoju fiksnu širinu.

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

Ovog puta želite samo da se promijeni visina zuba i da se daju “nasmijan” efekt moraju imati različite osjetljivosti. Minimalna visina je -100 (jer dolazi s dna platna), tako da micLevel također mora biti negativan broj.

Kliknite igrati, a trebali biste vidjeti gotovo završeno lice robota!

Još jednom, možda ćete trebati prilagoditi svoje brojeve množitelja za najbolje rezultate.

Dodavanje završnih dodira

Dodajte zjenice očima još više elipsa() poziva. Upotrijebite drugu punjenje () da ih učini bijelim. Dodajte to svom crtati() metoda ispod “zubi” upravo ste stvorili.

punjenje (255); elipsa (150.150,20 + micLevel * 1000); elipsa (345.150,30 + micLevel * 1000); 

Na kraju, kako biste cijelom djelu dali malu definiciju, promijenite težinu udara u svom postaviti() funkcija

strokeWeight (5); 

To je to!

Ako ništa ne radi, temeljito provjerite svoj kôd i možete vidjeti puni kôd iz ovog vodiča u p5 uređivaču ako je potrebno.

Kretanje naprijed s p5.js

Ovaj vodič za početnike pokriva neke osnovne pojmove s p5.js, pokazujući koliko je lako biti kreativan. Kao i uvijek, ovaj projekt jedva krpa površinu svih onih za koje je p5.js sposoban.

Provoditi vrijeme za stvaranje umjetnosti s p5.js vrijeme je dobro utrošeno jer ste se upoznali s razmišljanjem poput programera i JavaScript sintakse. Sve su to važne vještine koje trebate iskoristiti ako se odlučite roniti svesrdno i stvarno naučite JavaScript Zaista naučite JavaScript s 5 najboljih tečaja Udemije Stvarno naučite JavaScript s 5 najboljih tečaja Udemije JavaScript je programski jezik na webu. Ako imate razloga za učenje JavaScripta, ovih pet izvrsnih tečajeva iz Udemya moglo bi biti mjesto za početak vašeg putovanja kodiranjem. !