Hoe een Voice-Sensitive Robot-animatie in p5.js te schrijven

JavaScript is de taal van internet. Front-end ontwikkeling zonder dat het onmogelijk is. Vooral voor beginners, kinderen, kan het een uitdaging zijn om te wennen aan de syntaxis van de taal.

Om nieuwelingen te voltooien, kan zelfs het installeren en uitvoeren van een lokale server in de browser een struikelblok zijn. Wat als er een manier was om iets leuks te maken met JavaScript, zonder iets te installeren? Voer p5.js in, een codeerbibliotheek die is ontworpen met creativiteit in gedachten.

Hier is hoe je een geluid reactieve geanimeerde robotkop maakt met behulp van enkele eenvoudige codeerprincipes.

Wat is p5.js?

De p5.js-bibliotheek is gemaakt door de in Los Angeles gevestigde kunstenaar Lauren MacCarthy. Het is ontworpen om een ​​soortgelijk platform te bieden als Processing, voor creatieve expressie en kunst. Duidelijke tools gaan samen met goed uitgelegd tutorials en referentiedocumenten om het perfect te maken voor beginners.

Of je nu animaties, muziek, eenvoudige games maakt of zelfs verbinding maakt met externe hardware 8 Verbazingwekkende hardware-projecten met verwerking en p5.js 8 Verbazingwekkende hardware-projecten met verwerking en p5.js DIY-elektronica is meer dan alleen Arduino en Raspberry Pi. In dit overzicht behandelen we enkele van de coolste projecten die je kunt maken met Processing en p5.js! Meer lezen, p5.js kan helpen.

De p5.js-editor

Open om te beginnen uw browservenster en ga naar de p5.js-webeditor. Voordat u begint, zijn er twee optionele stappen.

1. U moet zijn aangemeld bij p5.js om uw schetsen op te slaan, dus een account maken is aan te raden. Aanmelden is gratis en u kunt uw Google- of GitHub-account gebruiken om in te loggen als u dat wilt.

2. Klik op het tandwiel van de instellingen in de rechterbovenhoek. Hier kunt u het thema en de tekstgrootte wijzigen voor alle liefhebbers van donkere thema's die er zijn.

De editor p5.js combineert een code-editor, console en uitvoervenster in dezelfde ruimte. Tot nu toe zijn er al twee functies voor u ingesteld.

Basisprincipes van p5.js

Elke schets van p5.js begint met twee elementen. De opstelling() functie en de trek() functie. Voor degenen die eerder een Arduino hebben geprogrammeerd, zal dit bekend zijn!

functie-instelling () createCanvas (500, 500); 

De opstelling() functie wordt uitgevoerd aan het begin van uw programma. In dit geval maakt de set-up een vierkant canvas van 400 pixels. Wijzig dit in (500, 500) voor een iets groter gebied om te werken.

Setup wordt maar één keer uitgevoerd en wordt gebruikt om de onderdelen te maken die nodig zijn voor uw programma, samen met de beginwaarden voor uw programma.

functie draw () background (220); 

De trek() methode wordt elk frame genoemd. Dit werkt net als de loop-functie op Arduino of de updatefunctie in Unity 3D. Alles wat er in je schets moet veranderen, gebeurt hier. Voor nu wordt de achtergrond elk frame opnieuw getekend. Aan de bovenkant zie je twee iconen, play en stop. Klik spelen.

Dit is het programma tot nu toe: een doek van 500 × 500 met een grijze achtergrond,

Een vorm maken

Werken met vormen in p5.js wijkt een beetje af van de vooraf ingestelde vormobjecten die de mo.js-webanimatietutorial hebben gebruikt. Om een ​​eenvoudige ellips te maken, voeg je dit toe aan de code in de trek() methode, net onder waar u de achtergrondkleur instelt.

functie draw () background (220); ellips (250,250,50)

De ellips() methode neemt verschillende argumenten. De eerste twee zijn de X- en Y-positie op het canvas. Omdat het canvas 500 pixels breed is, plaatst u deze ellips in het midden als u deze twee waarden instelt op 250. Het derde argument is de breedte van de cirkel, in dit geval 50 pixels.

Dus je hebt een achtergrond en een cirkel, maar ziet er niet zo goed uit. Tijd om dat op te lossen.

Een stijl toevoegen

Begin met het veranderen van de achtergrondkleur. Het getal tussen haakjes geeft een grijswaardenwaarde weer. Dus 0 is zwart en 255 is wit, met daartussen verschillende grijstinten. Als u de achtergrond zwart wilt maken, wijzigt u deze waarde in 0.

functie draw () background (0); ellips (250,250,50); 

Als je nu op play klikt, is de achtergrond zwart. Om de cirkel wat kleur te geven, willen we de RGB-waarden (roodgroen en blauw) afzonderlijk beïnvloeden. Maak enkele variabelen bovenaan uw script (direct aan het begin, vóór de instelfunctie) om deze waarden op te slaan.

var r, g, b;

Stel in de instelfunctie de waarde in van r naar 255, en geef de anderen een waarde van 0. De gecombineerde RGB-kleur is felrood!

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

Als u de kleur op de cirkel wilt toepassen, voegt u een toe vullen() bel naar de tekenmethode, vlak voordat je de cirkel tekent.

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

Klik nu spelen, en je zou een rode cirkel op een zwarte achtergrond moeten zien.

Het maken van de cirkel is een goed begin, maar het toevoegen van interactiviteit is waar het echt interessant wordt!

Klik om kleur te veranderen

Code toevoegen om met een muisklik te draaien is vrij eenvoudig in p5.js. Maak een nieuwe functie onder de trek() methode.

function mousePressed () r = random (256); g = willekeurig (256); b = willekeurig (256);  

De mousePressed () luistert naar elke muis drukt en voert de code tussen de haakjes uit. De willekeurig() functie retourneert een willekeurige waarde tussen 0 en een bepaald getal. In dit geval stelt u bij elke muisaanraking de waarden r, g en b in op tussen 0 en 255.

Voer de code opnieuw uit en klik een paar keer op de muis. De cirkel zou van kleur moeten veranderen als je dat doet.

Nu is uw animatie reactief op muisklikken, maar hoe zit het met het gebruik van de stem van de gebruiker?

Voice Control instellen

Het gebruik van de systeemmic is eenvoudig gemaakt met de p5.js-geluidsbibliotheek. Maak boven aan uw script een nieuwe variabele genaamd mic.

var r, g, b; var mic;

Voeg deze regels toe aan uw opstelling() functie toewijzen mic naar de audio-ingang.

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

Als je nu op play klikt, krijg je een dialoogvenster waarin je toestemming krijgt om toegang te krijgen tot de onboard-microfoon.

Klik Toestaan. Afhankelijk van de browser die u gebruikt, kan het uw keuze onthouden, of moet u op een bevestigend vak klikken. Nu is de microfoon ingesteld en is het tijd om hem te gebruiken.

Schalen op volume

Als u het volume van de microfoon als waarde in uw programma wilt gebruiken, moet u het als een variabele opslaan. Verander jouw trek() methode om er zo uit te zien:

functie draw () var micLevel = mic.getLevel (); achtergrond (0); vullen (r, g, b); ellips (250,250,50 + micLevel * 2000);  

Aan het begin van de functie, een nieuwe variabele genaamd micLevel wordt gemaakt en toegewezen aan de huidige microfoonamplitude.

De ellips had een vaste breedte van 50 pixels. Nu is 50 pixels de minimale breedte, toegevoegd aan de micLevel-waarde die elk frame bijwerkt. Het aantal waarmee het micLevel wordt vermenigvuldigd, is afhankelijk van de gevoeligheid van uw microfoon.

Experimenteer met hogere waarden - een waarde van 5000 zorgt voor een meer ingrijpende schaalverandering!

Notitie: als dit niet voor u werkt, is uw microfoon mogelijk niet correct ingesteld. De browser gebruikt de standaardmicrofoon van het systeem en u moet mogelijk uw geluidsinstellingen wijzigen en vernieuwen.

De robot bouwen

Nu heb je alle tools die nodig zijn om de robot te maken. Verplaats eerst de ellips die u hebt gemaakt en voeg er nog een toe om de ogen te maken.

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

De “tanden” zijn een reeks rechthoeken die zich uitstrekken vanaf de onderkant van het scherm. Merk op dat de rect () methode vereist een extra parameter voor de vaste breedte.

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

Deze keer wil je alleen de hoogte van de tanden veranderen, en de “glimlachen” effect ze moeten verschillende gevoeligheden hebben. De minimale hoogte is -100 (als deze omhoog komt vanaf de onderkant van het canvas), dus het micLevel moet ook een negatief getal zijn.

Klik op play en je zou een bijna voltooid robotgezicht moeten zien!

Nogmaals, misschien moet u uw vermenigvuldigingsnummers aanpassen voor de beste resultaten.

Afwerking toevoegen

Voeg leerlingen toe aan de ogen met nog meer ellips() noemt. Gebruik een andere vullen() om ze wit te maken. Voeg dit toe aan uw trek() methode, onder de “tanden” je hebt zojuist gecreëerd.

vullen (255); ellips (150,150,20 + micLevel * 1000); ellips (345,150,30 + micLevel * 1000); 

Tot slot, om het hele stuk een beetje definitie te geven, verander je het slaggewicht in je opstelling() functie

strokeWeight (5); 

Dat is het!

Als iets niet werkt, controleert u uw code grondig en ziet u de volledige code van deze zelfstudie in de p5-editor, indien nodig.

Vooruitgaan met p5.js

Deze zelfstudie voor beginners behandelt enkele basisbegrippen met p5.js, en laat zien hoe gemakkelijk het is om creatief te zijn. Zoals altijd schrapt dit project nauwelijks het oppervlak van alles waar p5.js toe in staat is.

Tijd besteden aan het maken van kunst met p5.js is goed besteed, omdat je jezelf vertrouwd maakt met denken als een programmeur en JavaScript-syntaxis. Dit zijn allemaal belangrijke vaardigheden om verder te gaan als je besluit om van harte te duiken en echt leert JavaScript echt te leren met 5 Top Udemy Cursussen Leer echt JavaScript met 5 Top Udemy Courses JavaScript is de programmeertaal van het web. Als je een reden hebt om JavaScript te leren, kunnen deze vijf uitstekende cursussen van Udemy de plaats zijn om aan je codeerreis te beginnen. Lees verder !

Meer informatie over: codeerlessen, JavaScript.