Hoe maak je een spraakgevoelige robotanimatie een script in p5.js
Advertentie
JavaScript is de taal van het internet. Werken in front-end ontwikkeling zonder het is onmogelijk. Vooral voor beginners, vooral kinderen, kan het een uitdaging zijn om te wennen aan de syntaxis van de taal.
Om beginners 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 cools te maken met JavaScript, zonder iets te installeren? Voer p5.js in, een codebibliotheek die is ontworpen met creativiteit in gedachten.
Hier leest u hoe u een geluid-reactieve geanimeerde robotkop maakt met behulp van enkele eenvoudige coderingsprincipes.
Wat is p5.js?
De p5.js-bibliotheek is gemaakt door Lauren MacCarthy, een kunstenaar uit Los Angeles. Het is ontworpen om een vergelijkbaar platform als Processing te bieden, 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 hardwareprojecten met verwerking en p5.js 8 Verbazingwekkende hardwareprojecten 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 u kunt maken met Processing en p5.js! Lees meer, p5.js kan helpen.
De p5.js-editor
Open om te beginnen uw browservenster en navigeer naar de webeditor van p5.js. Voordat u begint, zijn er twee optionele stappen.
1. U moet aangemeld zijn bij p5.js om uw schetsen op te slaan, dus het is raadzaam om een account aan te maken. Aanmelden is gratis en u kunt uw Google- of GitHub-account gebruiken om u aan te melden als u dat wilt.
2. Klik op het tandwiel met instellingen in de rechterbovenhoek. Hier kunt u het thema en de tekstgrootte wijzigen voor iedereen die van een donker thema houdt.
De p5.js-editor 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 functie setup () en de functie draw () . Voor degenen onder u die eerder een Arduino hebben geprogrammeerd, zal dit bekend zijn!
function setup() { createCanvas(500, 500); } De functie setup () wordt aan het begin van uw programma uitgevoerd. In dit geval maakt de installatie een vierkant canvas van 400 pixels. Wijzig dit in (500, 500) voor een iets groter gebied om te werken.
Setup wordt slechts eenmaal uitgevoerd en wordt gebruikt om de onderdelen te maken die nodig zijn voor uw programma, samen met beginwaarden voor uw programma.
function draw() { background(220); } De methode draw () wordt elk frame genoemd. Dit werkt ongeveer zoals de lusfunctie op Arduino, of de updatefunctie in Unity 3D. Alles wat moet veranderen in uw schets gebeurt hier. Voor nu wordt de achtergrond elk frame opnieuw getekend. Bovenaan zie je twee pictogrammen, spelen en stoppen. Klik op spelen.
Dit is het programma tot nu toe - een canvas van 500 × 500 met een grijze achtergrond,
Een vorm maken
Het werken met vormen in p5.js is een beetje anders dan de vooraf ingestelde vormobjecten die in de zelfstudie over webanimatie van mo.js worden gebruikt. Als u een eenvoudige ellips wilt maken, voegt u deze toe aan de code in de methode draw (), net onder waar u de achtergrondkleur instelt.
function draw() { background(220); ellipse(250, 250, 50) } De methode ellipse () heeft verschillende argumenten. De eerste twee zijn de X- en Y-positie op het canvas. Omdat het canvas 500 pixels breed is, zet deze twee waarden op 250 de ellips in het midden. Het derde argument is de breedte van de cirkel - in dit geval 50 pixels.
Dus je hebt een achtergrond en een cirkel, maar het ziet er niet zo goed uit. Tijd om dat op te lossen.
Wat stijl toevoegen
Begin met het veranderen van de achtergrondkleur. Het getal tussen haakjes geeft een grijswaarde aan. Dus 0 is zwart en 255 is wit met daartussen verschillende grijstinten. Wijzig deze waarde in 0 om de achtergrond zwart te maken.
function draw() { background(0); ellipse(250, 250, 50); } Als u nu op afspelen klikt, is de achtergrond zwart. Om de cirkel wat kleur te geven, willen we de RGB-waarden (rood, groen en blauw) afzonderlijk beïnvloeden. Maak enkele variabelen bovenaan uw script (direct aan het begin, vóór de instellingsfunctie) om deze waarden op te slaan.
var r, g, b; Stel in de setup-functie de waarde van r in op 255 en geef de anderen een waarde van 0 . De gecombineerde RGB-kleur zal helder rood zijn!
r=255; g=0; b=0; Als u de kleur op de cirkel wilt toepassen, voegt u een aanroep fill () toe aan de tekenmethode, net voordat u de cirkel tekent.
fill(r, g, b); ellipse(250, 250, 50); Klik nu op play en je zou een rode cirkel op een zwarte achtergrond moeten zien.
De cirkel maken is een goed begin, maar het toevoegen van interactiviteit is echt interessant!
Klik om de kleur te wijzigen
Code toevoegen om met een muisklik uit te voeren is vrij eenvoudig in p5.js. Maak een nieuwe functie onder de methode draw () .
function mousePressed() { r = random(256); g = random(256); b = random(256); } De mousePressed () luistert naar elke muisklik en voert de code tussen de haakjes uit. De functie random () retourneert een willekeurige waarde tussen 0 en een bepaald getal. In dit geval stelt u de waarden r, g en b in op tussen 0 en 255 bij elke muisklik.
Voer de code opnieuw uit en klik een paar keer op de muis. De cirkel zou van kleur moeten veranderen wanneer u dat doet.
Nu reageert uw animatie op muisklikken, maar hoe zit het met het gebruik van de stem van de gebruiker?
Spraakbesturing instellen
Het gebruik van de systeemmicrofoon wordt gemakkelijk gemaakt met de geluidsbibliotheek van p5.js. Maak bovenaan uw script een nieuwe variabele met de naam mic .
var r, g, b; var mic; Voeg deze lijnen toe aan uw setup () -functie om de microfoon toe te wijzen aan de audio-ingang.
mic = new p5.AudioIn() mic.start(); Wanneer u nu op Play klikt, krijgt u een dialoogvenster waarin u wordt gevraagd om toegang tot de ingebouwde microfoon.
Klik op Toestaan . Afhankelijk van de browser die u gebruikt, onthoudt deze mogelijk uw keuze of moet u op een bevestigingsvak klikken. Nu is de microfoon ingesteld en is het tijd om hem in gebruik te nemen.
Schalen op volume
Als u het volume van de microfoon als waarde in uw programma wilt gebruiken, moet u deze als variabele opslaan. Wijzig uw draw () -methode om er zo uit te zien:
function draw() { var micLevel = mic.getLevel(); background(0); fill(r, g, b); ellipse(250, 250, 50 + micLevel * 2000); } Aan het begin van de functie wordt een nieuwe variabele met de naam micLevel 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 vermenigvuldigt, is afhankelijk van de gevoeligheid van uw microfoon.
Experimenteer met hogere waarden - een waarde van 5000 zorgt voor een meer dramatische schaalverandering!
Opmerking : als dit niet voor u werkt, is uw microfoon mogelijk niet correct ingesteld. De browser gebruikt de standaardmicrofoon van het systeem en mogelijk moet u uw geluidsinstellingen aanpassen 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 een nieuwe toe om de ogen te maken.
ellipse(150, 150, 50 + micLevel * 2000); ellipse(350, 150, 100 +micLevel * 2000); De "tanden" zijn een reeks rechthoeken die zich vanaf de onderkant van het scherm uitstrekken. Merk op dat de methode rect () een extra parameter vereist voor de vaste breedte.
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); Deze keer wilt u alleen dat de hoogte van de tanden verandert en om het "lachend" effect te geven, moeten ze verschillende gevoeligheden hebben. De minimale hoogte is -100 (komt uit 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 multiplicatoraantallen aanpassen voor de beste resultaten.
Afwerking toevoegen
Voeg leerlingen toe aan de ogen met nog meer ellips () aanroepen. Gebruik een andere vulling () om ze wit te maken. Voeg dit toe aan je draw () -methode, onder de 'tanden' die je zojuist hebt gemaakt.
fill(255); ellipse(150, 150, 20 + micLevel * 1000); ellipse(345, 150, 30 + micLevel * 1000); Wijzig ten slotte het slaggewicht in uw setup () -functie om het hele stuk een beetje definitie te geven
strokeWeight(5); Dat is het!
Als iets niet werkt, controleer dan uw code grondig, en u kunt de volledige code van deze zelfstudie indien nodig in de p5-editor zien.
Vooruitgaan met p5.js
Deze beginnershandleiding behandelt enkele basisconcepten met p5.js en laat zien hoe gemakkelijk het is om creatief te zijn. Zoals altijd schraapt dit project nauwelijks het oppervlak van alles waartoe p5.js in staat is.
Tijd besteden aan het maken van kunst met p5.js wordt goed besteed, omdat je je 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 JavaScript te leren. Echt JavaScript leren met 5 Top Udemy-cursussen Echt JavaScript leren met 5 Top Udemy-cursussen JavaScript is de programmeertaal van het web. Als je een reden hebt om JavaScript te leren, kunnen deze vijf uitstekende cursussen van Udemy de plek zijn om aan je codeerreis te beginnen. Lees verder !
Ontdek meer over: Codeercursussen, JavaScript.
