Hur man skriver en röstsensiv robot animation i p5.js

JavaScript är språket på internet. Arbeta i front-end-utveckling utan det är omöjligt. För nybörjare, speciellt barn, kan det vara utmanande att vänja sig till språkets syntax.

För att slutföra nybörjare kan även installation och körning av en lokal server i webbläsaren vara ett hinder. Vad händer om det var ett sätt att göra något coolt med JavaScript, utan att installera något? Ange p5.js, ett kodningsbibliotek utformat med kreativitet i åtanke.

Så här gör du ett ljudaktivt animerat robothuvud med några enkla kodningsprinciper.

Vad är p5.js?

Biblioteket p5.js skapades av Los Angeles-baserad artist Lauren MacCarthy. Det är utformat för att tillhandahålla en liknande plattform för bearbetning, för kreativt uttryck och konst. Tydliga verktyg går tillsammans med väl förklarade handledning och referensdokument för att göra det perfekt för nybörjare.

Oavsett om du gör animeringar, musik, enkla spel eller till och med ansluta till extern hårdvara 8 Fantastiska hårdvaruprojekt med bearbetning och p5.js 8 Fantastiska hårdvaruprojekt med bearbetning och p5.js DIY-elektroniken är mer än bara Arduino och Raspberry Pi. I denna översikt täcker vi några av de coolaste projekten du kan göra med Processing och p5.js! Läs mer, p5.js kan hjälpa till.

P5.js-redigeraren

Börja med att öppna ditt webbläsarfönster och navigera till p5.js webbredigerare. Innan du börjar är det två valfria steg.

1. Du måste vara inloggad på p5.js för att spara dina skisser, så att göra ett konto är tillrådligt. Registrering är gratis, och du kan använda ditt Google- eller GitHub-konto för att logga in om du vill.

2. Klicka på inställningshjulet i övre högra hörnet. Här kan du ändra tema och textstorlek för alla dina mörka temaälskare där ute.

P5.js-redigeraren kombinerar ett kodredigerare, konsol och utmatningsfönster i samma utrymme. Hittills finns det två funktioner som redan har upprättats för dig.

Grunderna i p5.js

Varje p5.js skiss börjar med två element. De inrätta() funktion och dra() fungera. För er som har programmerat en Arduino före, kommer det att bli bekant!

funktion setup () createCanvas (500, 500); 

De inrätta() funktionen körs i början av ditt program. I det här fallet skapas en 400-pixel kvadrerad duk. Ändra detta till (500, 500) för ett något större område att arbeta.

Inställningen körs endast en gång och används för att skapa de delar som behövs för ditt program, tillsammans med initialvärden för ditt program.

funktionsteckning () bakgrund (220); 

De dra() Metoden heter varje ram. Detta fungerar ungefär som loop-funktionen på Arduino, eller uppdateringsfunktionen i Unity 3D. Allt som behöver ändras i din skiss händer här. För nu blir bakgrunden återrappad varje ram. Överst ser du två ikoner, spelar och stoppar. Klick spela.

Detta är programmet hittills - en 500 × 500 duk med en grå bakgrund,

Skapa en form

Att arbeta med former i p5.js är lite annorlunda än de förinställda formobjekten som användes i ma.js webbanimeringstutorial. För att skapa en enkel ellips lägger du till den i koden i dra() metod, precis nedanför där du ställer in bakgrundsfärgen.

funktionsteckning () bakgrund (220); ellips (250,250,50)

De ellips() Metoden tar flera argument. De två första är dess X- och Y-position på duken. Eftersom duken är 500 pixlar bred, ställs dessa två värden till 250 sätta ellipsen i mitten. Det tredje argumentet är cirkelns bredd, i det här fallet 50 pixlar.

Så du har en bakgrund och en cirkel, men det ser inte så bra ut. Dags att fixa det.

Lägger till någon stil

Börja med att ändra bakgrundsfärgen. Antalet i parentes representerar ett gråskalans värde. Så, 0 är svart och 255 är vit, med olika nyanser av grått däremellan. För att göra bakgrunden svart, ändra detta värde till 0.

funktionsteckning () bakgrund (0); ellips (250,250,50); 

Nu när du klickar på spelar bakgrunden svart. För att ge cirkeln lite färg vill vi påverka dess RGB (röda gröna och blå) värden individuellt. Skapa några variabler längst upp i ditt skript (rätt i början, före inställningsfunktionen) för att lagra dessa värden.

var r, g, b;

I inställningsfunktionen ställer du in värdet på r till 255, och ge de andra ett värde av 0. Den kombinerade RGB-färgen kommer att vara ljusröd!

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

Om du vill använda färgen till cirkeln lägger du till en fylla() Ring till teckningsmetoden, precis innan du ritar cirkeln.

 fylla (r, g, b); ellips (250,250,50);

Klicka nu spela, och du bör se en röd cirkel på en svart bakgrund.

Att göra cirkeln är en bra start, men att lägga till interaktivitet är där det blir väldigt intressant!

Klicka för att ändra färg

Att lägga till kod för att köra med ett musklick är ganska enkelt i p5.js. Skapa en ny funktion under dra() metod.

funktion mousePressed () r = random (256); g = slumpmässigt (256); b = slumpmässigt (256);  

De mousePressed () lyssnar på eventuella muspressar och utför koden inuti parenteserna. De slumpmässig() funktionen returnerar ett slumpmässigt värde mellan 0 och ett givet tal. I det här fallet ställer du in r, g och b till mellan 0 och 255 på varje muspresse.

Rerun koden och klicka på musen några gånger. Cirkeln bör ändra färg när du gör det.

Nu är din animering reaktiv mot musklick, men vad sägs om att använda användarens röst?

Ställa in röstkontroll

Med hjälp av systemet görs det enkelt med p5.js ljudbibliotek. Överst på ditt skript skapar du en ny variabel som heter mic.

var r, g, b; var mic;

Lägg till dessa rader till din inrätta() funktion att tilldela mic till ljudingången.

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

När du klickar på spela nu får du en dialogruta som ber om tillstånd att komma åt inbyggd mikrofon.

Klick Tillåta. Beroende på vilken webbläsare du använder kan det komma ihåg ditt val, eller du kanske måste klicka på en ruta som bekräftar. Nu är mikrofonen inställd, och det är dags att använda den.

Skalning efter volym

Om du vill använda volymen för mikrofonen som ett värde i ditt program måste du lagra det som en variabel. Ändra din dra() metod att se så här ut:

funktionsteckning () var micLevel = mic.getLevel (); bakgrund (0); fylla (r, g, b); ellipse (250,250,50 + micLevel * 2000);  

I början av funktionen heter en ny variabel micLevel skapas och tilldelas den nuvarande mikrofonamplituden.

Ellipsen hade en fast bredd på 50 pixlar. Nu är 50 pixlar den minsta bredden, läggs till micLevel-värdet som uppdaterar varje ram. Antalet micLevel multipliceras med varierar beroende på mikrofonens känslighet.

Experimentera med högre värden - ett värde på 5000 kommer att skapa en mer dramatisk förändring i skala!

Notera: Om det inte fungerar för dig, kanske inte din mikrofon är korrekt inställd. Webbläsaren använder systemets standardmikrofon, och du kan behöva ändra dina ljudinställningar och uppdatera.

Konstruera roboten

Nu har du alla verktyg som behövs för att skapa roboten. Först flytt ellipsen du har skapat, och lägg till en annan för att få ögonen.

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

De “tänder” är en serie rektanglar som sträcker sig från undersidan av skärmen. Observera att rect () Metoden kräver en extra parameter för sin fasta bredd.

 rekt (0, 500,100, -100 -micLevel * 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-mikronivå * 1000); 

Den här gången vill du bara att höjden på tänderna ändras och att ge “leende” effekt de måste ha olika känsligheter. Minimihöjden är -100 (som den kommer upp från undersidan av duken), så mic-nivå måste också vara ett negativt tal.

Klicka på spel och du bör se ett nästan färdigt robotansikte!

Återigen kan du behöva tweak dina multiplikatornummer för bästa resultat.

Lägga till efterbehandling

Lägg eleverna i ögonen med ännu mer ellips() samtal. Använd en annan fylla() för att göra dem vita. Lägg till detta i din dra() metod, under “tänder” du har just skapat.

fylla (255); ellipse (150, 150,20 + mikronivå * 1000); ellipsen (345,150,30 + micLevel * 1000); 

Slutligen, för att ge hela stycket en liten definition, ändra strokevikt i din inrätta() fungera

strokeWeight (5); 

Det är allt!

Om något inte fungerar, kolla koden noga och du kan se hela koden från den här handledningen i p5-redigeraren om det behövs.

Flytta framåt med p5.js

Denna nybörjare handledning täcker några grundläggande begrepp med p5.js, vilket visar hur enkelt det är att vara kreativ. Som alltid skrapar detta projekt knappt ytan av allt som p5.js kan.

Att spendera tid på att skapa konst med p5.js är bra tid, eftersom du känner till att du tänker som en programmerare och JavaScript-syntax. Det här är alla viktiga färdigheter att ta fram om du bestämmer dig för att dyka i helhjärtat och verkligen lära dig JavaScript Lär dig verkligen JavaScript med 5 Top Udemy-kurser Lär dig verkligen JavaScript med 5 Top Udemy-kurser Javascript är programmets språk på webben. Om du har en anledning att lära sig JavaScript, kan dessa fem utmärkta kurser från Udemy vara platsen för att börja din kodningsresa. Läs mer !

Utforska mer om: Kodningstutorials, JavaScript.