Jak skriptovat hlasově citlivou robotickou animaci v p5.js

JavaScript je jazykem internetu. Pracujeme na front-end vývoji, aniž by to bylo nemožné. Pro začátečníky, zejména pro děti, může být náročné zvyknout si na syntaxi jazyka.

Dokončením nováčků může být i instalace a spuštění místního serveru v prohlížeči překážkou. Co kdyby existoval způsob, jak něco vyladit pomocí JavaScriptu, aniž by bylo cokoli nainstalováno? Zadejte p5.js, kódovací knihovnu navrženou s ohledem na kreativitu.

Zde je návod, jak vytvořit zvukově reaktivní animovanou robotickou hlavu pomocí několika jednoduchých principů kódování.

Co je str. Js?

Knihovna p5.js byla vytvořena umělcem Lauren MacCarthy z Los Angeles. Je navržen tak, aby poskytoval podobnou platformu jako zpracování, pro kreativní vyjádření a umění. Přehledné nástroje jsou doplněny dobře vysvětlenými návody a referenčními dokumenty, díky kterým je ideální pro začátečníky.

Ať už děláte animace, hudbu, jednoduché hry nebo se dokonce připojujete k externímu hardwaru. 8 Úžasné hardwarové projekty se zpracováním a p5.js 8 Úžasné hardwarové projekty se zpracováním a p5.js Elektronika pro kutily je víc než jen Arduino a Raspberry Pi. V tomto shrnutí se zabýváme některými z nejlepších projektů, které můžete udělat se zpracováním a p5.js! , p5.js může pomoci.

Editor p5.js

Nejprve otevřete okno prohlížeče a přejděte do webového editoru p5.js. Před zahájením jsou k dispozici dva volitelné kroky.

1. Chcete-li své náčrty uložit, musíte být přihlášeni k p5.js, takže je vhodné vytvořit účet. Registrace je bezplatná a můžete se přihlásit pomocí svého účtu Google nebo GitHub.

2. Klikněte na ozubené kolečko nastavení v pravém horním rohu. Zde můžete změnit velikost motivu a textu pro všechny milovníky temných temat.

Editor p5.js kombinuje editor kódu, konzolu a výstupní okno ve stejném prostoru. Doposud jsou pro vás nastaveny dvě funkce.

Základy p5.js

Každá skica p5.js začíná dvěma prvky. založit() funkce a kreslit() funkce. Pro ty z vás, kteří již dříve Arduino naprogramovali, to bude známo!

setup funkce () createCanvas (500, 500); 

založit() Funkce se spustí na začátku programu. V tomto případě instalační program vytvoří plátno o velikosti 400 pixelů. Změnit na (500, 500) pro práci o něco větší oblast.

Instalační program se spustí pouze jednou a používá se k vytvoření částí potřebných pro váš program spolu s počátečním hodnotami pro váš program.

funkce draw () background (220); 

kreslit() metoda se nazývá každý snímek. Funguje to podobně jako funkce smyčky na Arduino nebo funkce aktualizace v Unity 3D. Tady se děje vše, co je třeba ve vaší skici změnit. Prozatím se pozadí překreslí každý snímek. V horní části uvidíte dvě ikony, hrát a zastavit. Klikněte na hrát si.

Toto je zatím program - plátno o rozměrech 500 × 500 se šedým pozadím,

Vytvoření tvaru

Práce s tvary v p5.js je trochu odlišná od přednastavených tvarových objektů, které byly použity v tutoriálu pro webovou animaci mo.js. Chcete-li vytvořit jednoduchou elipsu, přidejte ji do kódu v kreslit() metodu, těsně pod nastavením barvy pozadí.

funkce draw () background (220); elipsa (250 250 50)

elipsa() metoda má několik argumentů. První dvě jsou jeho pozice X a Y na plátně. Protože plátno má šířku 500 pixelů, nastavení těchto dvou hodnot na 250 umístí elipsu do středu. Třetím argumentem je šířka kruhu - v tomto případě 50 pixelů.

Máte tedy zázemí a kruh, ale nevypadá to tak dobře. Je čas to napravit.

Přidání nějakého stylu

Začněte změnou barvy pozadí. Číslo v závorce představuje hodnotu ve stupních šedi. Takže 0 je černá a 255 je bílá, s různými odstíny šedé mezi nimi. Chcete-li pozadí černé, změňte tuto hodnotu na 0.

funkce draw () pozadí (0); elipsa (250 250, 50); 

Po kliknutí na tlačítko play bude pozadí černé. Chcete-li dát kruhu určitou barvu, budeme chtít ovlivnit jeho hodnoty RGB (červená zelená a modrá) jednotlivě. Vytvořte některé proměnné v horní části skriptu (přímo na začátku, před funkcí nastavení), abyste tyto hodnoty uložili.

var r, g, b;

Ve funkci nastavení nastavte hodnotu r na 255, a dát ostatním hodnotu 0. Jeho kombinovaná barva RGB bude jasně červená!

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

Chcete-li použít barvu na kruh, přidejte a vyplnit() vyvolejte metodu kreslení, těsně před nakreslením kruhu.

 výplň (r, g, b); elipsa (250 250, 50);

Nyní klikněte hrát si, a měli byste vidět červený kruh na černém pozadí.

Vytvoření kruhu je dobrý začátek, ale přidání interaktivity je opravdu zajímavé!

Klepnutím změníte barvu

Přidání kódu pro spuštění kliknutím myši je v p5.js. docela snadné. Vytvořte novou funkci pod ikonou kreslit() metoda.

function mousePressed () r = random (256); g = náhodný (256); b = náhodné (256);  

mousePressed () poslouchá jakékoli stisknutí myši a provede kód uvnitř závorek. náhodný() Funkce vrací náhodnou hodnotu mezi 0 a daným číslem. V tomto případě nastavujete hodnoty r, g a b mezi 0 a 255 při každém stisknutí myši.

Znovu spusťte kód a několikrát klikněte myší. Kruh by měl změnit barvu, když tak učiníte.

Nyní je vaše animace reaktivní na kliknutí myší, ale co na používání hlasu uživatele?

Nastavení hlasového ovládání

Pomocí systému mic je zvuková knihovna p5.js snadná. V horní části skriptu vytvořte novou proměnnou s názvem mic.

var r, g, b; var mic;

Přidejte tyto řádky do svého založit() funkce přiřadit mic na zvukový vstup.

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

Když klepnete na tlačítko Přehrát, zobrazí se dialogové okno se žádostí o povolení přístupu k palubnímu mikrofonu.

Klikněte na Dovolit. V závislosti na tom, jaký prohlížeč používáte, si může pamatovat podle vašeho výběru, nebo budete muset kliknout na pole s potvrzením. Nyní je mikrofon nastaven a je čas ho uvést do provozu.

Měřítko podle objemu

Chcete-li použít hlasitost mikrofonu jako hodnotu ve vašem programu, musíte ji uložit jako proměnnou. Změn svůj kreslit() metoda vypadá takto:

function draw () var micLevel = mic.getLevel (); pozadí (0); výplň (r, g, b); elipsa (250 250, 50 + micLevel * 2000);  

Na začátku funkce se volala nová proměnná micLevel je vytvořen a přiřazen aktuální amplitudě mikrofonu.

Elipsa měla pevnou šířku 50 pixelů. Nyní je minimální šířkou 50 pixelů přidaných k hodnotě micLevel, která aktualizuje každý snímek. Číslo, které znásobí mikrofon, se bude lišit v závislosti na citlivosti mikrofonu.

Experiment s vyššími hodnotami - hodnota 5000 vytvoří dramatičtější změnu měřítka!

Poznámka: Pokud to pro vás nefunguje, nemusí být váš mikrofon správně nastaven. Prohlížeč používá systémový výchozí mikrofon a možná budete muset upravit nastavení zvuku a obnovit.

Stavba robota

Nyní máte všechny nástroje potřebné k vytvoření robota. Nejprve přesuňte elipsu, kterou jste vytvořili, a přidejte další, abyste vytvořili oči.

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

“zuby” jsou série obdélníků vyčnívajících ze spodní části obrazovky. Všimněte si, že rect () metoda vyžaduje zvláštní parametr pro pevnou šířku.

 přímý (0, 500, 100, -100 -micLevel * 5000); přímý (400, 500, 100, -100 -micLevel * 5000); rekt (100, 500, 100, -100 -micLevel * 3000); přímý (300, 500, 100, -100 -micLevel * 3000); přímý (200, 500, 100, -100 -micLevel * 1000); 

Tentokrát chcete pouze změnit výšku zubů a dát “usmívající se” musí mít různé citlivosti. Minimální výška je -100 (jak vychází ze spodní části plátna), takže micLevel musí být také záporné číslo.

Klikněte na tlačítko play a měla by se zobrazit téměř hotová tvář robota!

Pro dosažení nejlepších výsledků budete možná muset znovu vynásobit čísla multiplikátoru.

Přidání dokončovacích doteků

Ještě více přidejte žáky do očí elipsa() hovory. Použijte jiné vyplnit() aby byly bílé. Přidejte to do svého kreslit() metoda pod “zuby” právě jsi vytvořil.

výplň (255); elipsa (150 150,20 + micLevel * 1000); elipsa (345,150,30 + micLevel * 1000); 

A konečně, aby byl celý kus trochu definován, změňte hmotnost tahu ve vašem založit() funkce

zdvihová hmotnost (5); 

A je to!

Pokud něco nefunguje, důkladně zkontrolujte svůj kód a v případě potřeby si můžete celý kód z tohoto tutoriálu zobrazit v editoru p5..

Posun vpřed s p5.js

Tento tutoriál pro začátečníky pokrývá některé základní pojmy s p5.js a ukazuje, jak snadné je být kreativní. Jako vždy tento projekt stěží škrábe povrch všeho, co p5js dokáže.

Trávit čas tvorbou umění pomocí p5.js je čas dobře strávený, protože se seznamujete s myšlenkami jako programátor a syntaxe JavaScriptu. To jsou všechny důležité dovednosti, kterými se můžete ubírat vpřed, pokud se rozhodnete potápět upřímně a opravdu se učit JavaScript Opravdu Naučte se JavaScript s 5 Top Udemy kurzy Opravdu Naučte se JavaScript s 5 Top Udemy Courses JavaScript je programovací jazyk webu. Pokud máte důvod se naučit JavaScript, těchto pět vynikajících kurzů od Udemy by mohlo být místem, kde můžete začít s kódováním. !