Slik skriver du en stemmefølsom robot animasjon i p5.js

JavaScript er språket på internett. Å jobbe i front-end-utvikling uten at det er umulig. For nybegynnere, spesielt barn, kan det være utfordrende å bli vant til språkets syntaks.

For å fullføre nybegynnere kan selv å installere og kjøre en lokal server i nettleseren være en hindring. Hva om det var en måte å gjøre noe kult med JavaScript, uten å installere noe? Skriv inn p5.js, et kodende bibliotek designet med kreativitet i tankene.

Slik lager du en lydreaktiv animert robothodet ved hjelp av enkle kodende prinsipper.

Hva er p5.js?

P5.js-biblioteket ble opprettet av Los Angeles-basert kunstner Lauren MacCarthy. Den er utformet for å gi en lignende plattform til Behandling, for kreativt uttrykk og kunst. Klare verktøy går sammen med godt forklarte veiledninger og referansedokumenter for å gjøre det perfekt for nybegynnere.

Enten du lager animasjoner, musikk, enkle spill eller til og med koble til ekstern maskinvare. 8 Fantastiske maskinvareprosjekter med behandling og p5.js 8 fantastiske maskinvareprosjekter med behandling og p5.js DIY-elektronikk er mer enn bare Arduino og Raspberry Pi. I denne runden dekker vi noen av de kuleste prosjektene du kan lage med Processing and p5.js! Les mer, p5.js kan hjelpe.

P5.js-editoren

Å starte nettleservinduet og navigere til p5.js webredigeringsprogrammet. Før du starter, er det to valgfrie trinn.

1. Du må være logget på p5.js for å lagre skissene dine, så det er tilrådelig å lage en konto. Registrering er gratis, og du kan bruke Google eller GitHub-kontoen din til å logge på hvis du ønsker det.

2. Klikk på innstillingshjulet i øverste høyre hjørne. Her kan du endre tema og tekststørrelse for alle dere mørke temaelskere der ute.

P5.js-editoren kombinerer et kodeditor, konsoll og utdatavindu i samme plass. Så langt er det to funksjoner som allerede er satt opp for deg.

Grunnleggende om p5.js

Hver p5.js-skisse begynner med to elementer. De setup () funksjon, og tegne() funksjon. Til de av dere som har programmert en Arduino før, vil dette bli kjent!

funksjonoppsett () createCanvas (500, 500); 

De setup () funksjonen går i starten av programmet. I dette tilfellet oppretter oppsett et 400-tommers firkantet lerret. Endre dette til (500, 500) for et litt større område å jobbe.

Oppsettet kjøres kun én gang, og brukes til å opprette delene som trengs for programmet, sammen med innledende verdier for programmet.

funksjonstegn () bakgrunn (220); 

De tegne() Metoden kalles hver ramme. Dette fungerer mye som loop-funksjonen på Arduino, eller oppdateringsfunksjonen i Unity 3D. Alt som trenger å skifte i skissen skjer her. For nå blir bakgrunnen redrawn hver ramme. På toppen vil du se to ikoner, spill og stopp. Klikk spille.

Dette er programmet så langt - et 500 × 500 lerret med en grå bakgrunn,

Opprette en form

Arbeide med figurer i p5.js er litt annerledes enn de forhåndsinnstilte formobjektene som ble brukt i mo.js web animasjonsveiledning. For å lage en enkel ellipse, legg dette til koden i tegne() metode, like under der du angir bakgrunnsfargen.

funksjonstegn () bakgrunn (220); ellipse (250,250,50)

De ellipse () Metoden tar flere argumenter. De to første er sin X- og Y-posisjon på lerretet. Siden lerretet er 500 piksler bredt, setter ellipsen i midten ved å sette disse to verdiene til 250. Det tredje argumentet er sirkelens bredde - i dette tilfellet 50 piksler.

Så du har en bakgrunn og en sirkel, men det ser ikke så bra ut. Tid til å fikse det.

Legger til noen stil

Begynn med å endre bakgrunnsfargen. Tallet i parentes representerer en gråskalaverdi. Så er 0 svart, og 255 er hvit, med forskjellige gråtoner i mellom. For å gjøre bakgrunnen svart, endre denne verdien til 0.

funksjonstegn () bakgrunn (0); ellipse (250,250,50); 

Nå når du klikker på spill, blir bakgrunnen svart. For å gi sirkelen litt farge, vil vi ønske å påvirke sine RGB-verdier (rød grønn og blå) individuelt. Opprett noen variabler øverst på skriptet ditt (rett i starten, før oppsettfunksjonen) for å lagre disse verdiene.

var r, g, b;

I oppsettfunksjonen, sett verdien av r til 255, og gi de andre en verdi av 0. Den kombinerte RGB-fargen vil lyse rødt!

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

For å bruke fargen til sirkelen, legg til en fylle() ring til draw-metoden, like før du tegner sirkelen.

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

Klikk nå spille, og du bør se en rød sirkel på en svart bakgrunn.

Å lage sirkelen er en god start, men å legge til interaktivitet er hvor det blir veldig interessant!

Klikk for å endre farge

Å legge til kode for å kjøre på et museklikk er ganske enkelt i p5.js. Opprett en ny funksjon under tegne() metode.

funksjon mousePressed () r = random (256); g = tilfeldig (256); b = tilfeldig (256);  

De mousePressed () lytter etter eventuelle musepresser og utfører koden inne i parentesene. De tilfeldig() funksjonen returnerer en tilfeldig verdi mellom 0 og et gitt nummer. I dette tilfellet setter du r, g og b verdiene til mellom 0 og 255 på hver mus trykk.

Rerun koden, og klikk musen et par ganger. Sirkelen bør skifte farge når du gjør det.

Nå er animasjonen din reaktiv mot museklikk, men hva med brukerens stemme?

Stille inn talekontroll

Ved hjelp av systemet gjøres det enkelt med p5.js lydbibliotek. Øverst på skriptet ditt, opprett en ny variabel som heter mic.

var r, g, b; var mic;

Legg disse linjene til din setup () funksjon å tildele mic til lydinngangen.

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

Når du klikker på spill nå, får du en dialogboks som ber om tillatelse til å få tilgang til mikrofonen.

Klikk Tillate. Avhengig av hvilken nettleser du bruker, kan det huske ditt valg, eller du må kanskje klikke en boks som bekrefter. Nå er mikrofonen satt opp, og det er på tide å sette den i bruk.

Skalering etter volum

Hvis du vil bruke volumet på mikrofonen som en verdi i programmet, må du lagre det som en variabel. Forandre din tegne() metode for å se slik ut:

funksjonstegn () var micLevel = mic.getLevel (); bakgrunn (0); fyll (r, g, b); ellipse (250,250,50 + micLevel * 2000);  

Ved starten av funksjonen kalles en ny variabel micLevel er opprettet, og tilordnet til den aktuelle mikrofonamplitude.

Ellipse hadde en fast bredde på 50 piksler. Nå er 50 piksler den minste bredden, lagt til micVevel-verdien som oppdaterer hver ramme. Antallet micLevel multipliserer med, varierer avhengig av mikrofonens følsomhet.

Eksperimenter med høyere verdier, en verdi på 5000 vil skape en mer dramatisk endring i skalaen!

Merk: Hvis dette ikke virker for deg, kan det hende at mikrofonen ikke er riktig konfigurert. Nettleseren bruker systemens standardmikrofon, og du må kanskje endre lydinnstillingene og oppdatere.

Konstruerer roboten

Nå har du alle verktøyene du trenger for å lage roboten. Først flytt ellipsen du har opprettet, og legg til en annen for å få øynene.

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

De “tenner” er en serie rektangler som strekker seg fra bunnen av skjermen. Legg merke til at rect () Metoden krever en ekstra parameter for sin faste bredde.

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

Denne gangen vil du bare at tennens høyde skal skifte, og å gi “smilende” effekt de må ha forskjellige følsomheter. Minste høyde er -100 (som det kommer opp fra bunnen av lerretet), så mic-nivået må også være et negativt tall.

Klikk på spill, og du bør se et nesten ferdig robot-ansikt!

Nok en gang kan det hende du må finjustere multiplikator tallene dine for å få de beste resultatene.

Legge til etterbehandling

Legg elever til øynene med enda mer ellipse () samtaler. Bruk en annen fylle() å gjøre dem hvite. Legg dette til din tegne() metode, under “tenner” du nettopp opprettet.

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

Til slutt, for å gi hele brikken en liten definisjon, endre slagvekten i din setup () funksjon

strokeWeight (5); 

Det er det!

Hvis noe ikke fungerer, må du sjekke koden grundig, og du kan se hele koden fra denne opplæringen i p5-editoren om nødvendig.

Flytter fremover Med p5.js

Denne nybegynnerveiledningen dekker noen grunnleggende begreper med p5.js, og viser hvor enkelt det er å være kreativ. Som alltid, skraper prosjektet knapt overflaten av alt som p5.js er i stand til.

Å bruke tid på å skape kunst med p5.js, er tid brukt, da du kjenner deg til å tenke som en programmerer og JavaScript-syntaks. Disse er alle viktige ferdigheter for å ta frem hvis du bestemmer deg for å dykke i helhjertet og virkelig lære JavaScript Lær deg JavaScript med 5 Top Udemy-kurs Lær deg JavaScript med 5 Top Udemy-kurs JavaScript er programmeringsspråket på nettet. Hvis du har grunn til å lære JavaScript, kan disse fem utmerkede kursene fra Udemy være stedet å begynne din kodende reise. Les mer !

Utforsk mer om: Kodingstutorials, JavaScript.