Sådan skriver du en stemmefølsom robotanimation i p5.js

JavaScript er internettets sprog. At arbejde i frontend-udvikling uden det er umuligt. For begyndere, især børn, kan det være udfordrende at vænne sig til sprogets syntaks.

For at fuldende nybegyndere kan selv installation og drift af en lokal server i browseren være en anstødssten. Hvad hvis der var en måde at gøre noget fedt med JavaScript uden at installere noget? Gå ind på p5.js, et kodningsbibliotek designet med kreativitet i tankerne.

Sådan laver du et lydreaktivt animeret robothoved ved hjælp af nogle simple kodningsprincipper.

Hvad er p5.js?

p5.js-biblioteket blev skabt af den Los Angeles-baserede kunstner Lauren MacCarthy. Det er designet til at give en lignende platform som Processing, for kreativt udtryk og kunst. Tydelige værktøjer følger med godt forklarede tutorials og referencedokumenter for at gøre det perfekt til begyndere.

Uanset om du laver animationer, musik, simple spil eller endda opretter forbindelse til ekstern hardware, kan p5.js hjælpe.

p5.js Editor

For at begynde skal du åbne dit browservindue og navigere til p5.js-webeditoren. Før du starter, er der to valgfrie trin.

1. Du skal være logget ind på p5.js for at gemme dine skitser, så det er tilrådeligt at oprette en konto. Det er gratis at tilmelde sig, og du kan bruge din Google- eller GitHub-konto til at logge ind, hvis du ønsker det.

2. Klik på indstillingstandhjulet i øverste højre hjørne. Her kan du ændre temaet og tekststørrelsen for alle jer elskere af mørke temaer derude.

p5.js-editoren kombinerer en kodeeditor, konsol og outputvindue på samme plads. Indtil videre er der allerede konfigureret to funktioner til dig.

Grundlæggende om p5.js

Hver p5.js-skitse begynder med to elementer. Det Opsætning() funktion, og tegne() fungere. Til dem af jer, der har programmeret en Arduino før, vil dette være bekendt!

function setup() {
  createCanvas(500, 500);
} 

Det Opsætning() funktionen kører ved starten af ​​dit program. I dette tilfælde opretter opsætningen et 400-pixel firkantet lærred. Skift dette til (500, 500) for et lidt større område at arbejde.

Opsætningen kører kun én gang og bruges til at oprette de nødvendige dele til dit program sammen med startværdier for dit program.

function draw() {
  background(220);
} 

Det tegne() metode kaldes hver frame. Dette fungerer meget som loop-funktionen på Arduino eller opdateringsfunktionen i Unity 3D. Alt, der skal ændres i din skitse, sker her. Indtil videre bliver baggrunden tegnet igen hver ramme. Øverst vil du se to ikoner, play og stop. Klik Spil.

Dette er programmet indtil videre — et 500×500 lærred med en grå baggrund,

Oprettelse af en form

Arbejde med figurer i p5.js er lidt anderledes end de forudindstillede formobjekter, der blev brugt i mo.js-webanimationsvejledningen. For at oprette en simpel ellipse skal du tilføje denne til koden i tegne() metode, lige under, hvor du indstiller baggrundsfarven.

function draw() {
  background(220);
  ellipse(250,250,50)
} 

Det ellipse() metode tager flere argumenter. De to første er dens X- og Y-position på lærredet. Da lærredet er 500 pixels bredt, placeres ellipsen i midten, hvis du indstiller disse to værdier til 250. Det tredje argument er bredden af ​​cirklen — i dette tilfælde 50 pixels.

Så du har en baggrund og en cirkel, men det ser ikke så godt ud. Tid til at rette op på det.

Tilføjelse af en stilart

Begynd med at ændre baggrundsfarven. Tallet i parentes repræsenterer en gråtoneværdi. Så 0 er sort, og 255 er hvid, med forskellige grå nuancer imellem. For at gøre baggrunden sort skal du ændre denne værdi til 0.

function draw() {
  background(0);
  ellipse(250,250,50);
} 

Nu, når du klikker på afspil, vil baggrunden være sort. For at give cirklen noget farve, vil vi gerne påvirke dens RGB-værdier (rød grøn og blå) individuelt. Opret nogle variabler øverst i dit script (lige ved starten, før opsætningsfunktionen) for at gemme disse værdier.

var r, g, b; 

Indstil værdien af ​​i opsætningsfunktionen r til 255, og give de andre en værdi af 0. Dens kombinerede RGB-farve vil være lys rød!

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

For at anvende farven på cirklen skal du tilføje en fylde() kald til tegnemetoden, lige før du tegner cirklen.

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

Klik nu Spil, og du skulle se en rød cirkel på en sort baggrund.

At lave cirklen er en god start, men det bliver virkelig interessant at tilføje interaktivitet!

Klik for at ændre farve

Tilføjelse af kode til at køre med et museklik er ret nemt i p5.js. Opret en ny funktion under tegne() metode.

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

Det musetrykt() lytter efter eventuelle musetryk og udfører koden inden for parenteserne. Det tilfældig() funktion returnerer en tilfældig værdi mellem 0 og et givet tal. I dette tilfælde indstiller du r-, g- og b-værdierne til mellem 0 og 255 ved hvert musetryk.

Kør koden igen, og klik med musen et par gange. Cirklen skal skifte farve, når du gør det.

Nu reagerer din animation på museklik, men hvad med at bruge brugerens stemme?

Opsætning af stemmestyring

Det er nemt at bruge systemmikrofonen med p5.js-lydbiblioteket. Øverst i dit script skal du oprette en ny variabel kaldet mikrofon.

var r, g, b;
var mic; 

Tilføj disse linjer til din Opsætning() funktion at tildele mikrofon til lydindgangen.

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

Når du klikker på afspil nu, får du en dialogboks, der beder om tilladelse til at få adgang til den indbyggede mikrofon.

Klik Give lov til. Afhængigt af hvilken browser du bruger, kan den huske dit valg, eller du skal muligvis klikke på en boks, der bekræfter. Nu er mikrofonen sat op, og det er tid til at tage den i brug.

Skalering efter volumen

For at bruge mikrofonens lydstyrke som en værdi i dit program, skal du gemme den som en variabel. Skift din tegne() metode til at se sådan ud:

function draw() {
  var micLevel = mic.getLevel();
  background(0);
  fill(r,g,b);
  ellipse(250,250,50 + micLevel * 2000); 
}
 

Ved starten af ​​funktionen kaldes en ny variabel mikroniveau oprettes og tildeles den aktuelle mikrofonamplitude.

Ellipsen havde en fast bredde på 50 pixels. Nu er 50 pixels minimumsbredden, tilføjet til micLevel-værdien, som opdaterer hver frame. Tallet micLevel multiplicerer med vil variere afhængigt af din mikrofons følsomhed.

Eksperimenter med højere værdier — en værdi på 5000 vil skabe en mere dramatisk ændring i skalaen!

Bemærk: hvis dette ikke virker for dig, er din mikrofon muligvis ikke sat korrekt op. Browseren bruger systemets standardmikrofon, og du skal muligvis ændre dine lydindstillinger og opdatere.

Konstruktion af robotten

Nu har du alle de nødvendige værktøjer til at skabe robotten. Først skal du flytte den ellipse, du har oprettet, og tilføje en anden for at lave øjnene.

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

“Tænderne” er en række rektangler, der strækker sig fra bunden af ​​skærmen. Bemærk, at rect() metode kræver en ekstra parameter for dens faste bredde.

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

Denne gang vil du kun have, at højden på tænderne ændrer sig, og for at give den “smilende” effekt skal de have forskellig følsomhed. Minimumshøjden er -100 (som den kommer op fra bunden af ​​lærredet), så micLevel skal også være et negativt tal.

Klik på play, og du skulle se et næsten færdigt robotansigt!

Endnu en gang skal du muligvis justere dine multiplikatortal for de bedste resultater.

Tilføjelse af prikken over i’et

Tilføj pupiller til øjnene med endnu mere ellipse() opkald. Brug en anden fylde() at gøre dem hvide. Tilføj dette til din tegne() metode, under de “tænder”, du lige har oprettet.

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

Til sidst, for at give hele stykket en lille definition, skal du ændre slagvægten i din Opsætning() fungere

strokeWeight(5);
 

Det er det!

Hvis noget ikke virker, så tjek din kode grundigt, og du kan se den fulde kode fra denne tutorial i p5-editoren, hvis det er nødvendigt.

Gå fremad med p5.js

Denne begyndervejledning dækker nogle grundlæggende begreber med p5.js og viser, hvor nemt det er at være kreativ. Som altid skraber dette projekt knap overfladen af ​​alt, hvad p5.js er i stand til.

At bruge tid på at skabe kunst med p5.js er tid givet godt ud, da du er ved at blive fortrolig med at tænke som en programmør og JavaScript-syntaks. Disse er alle vigtige færdigheder at tage videre, hvis du beslutter dig for at dykke i helhjertet og virkelig lære JavaScript!