Jak napisać skrypt wrażliwej na głos animacji robota w p5.js

JavaScript jest językiem Internetu. Praca w rozwoju front-end bez tego jest niemożliwa. Dla początkujących, szczególnie dla dzieci, przyzwyczajenie się do składni języka może być trudne.

Aby ukończyć nowicjuszy, nawet instalacja i uruchomienie lokalnego serwera w przeglądarce może być przeszkodą. Co jeśli byłby sposób na zrobienie czegoś fajnego za pomocą JavaScript bez instalowania czegokolwiek? Wpisz p5.js, bibliotekę kodowania zaprojektowaną z myślą o kreatywności.

Oto jak sprawić, by reaktywna dźwiękowo animowana głowa robota przy użyciu kilku prostych zasad kodowania.

Co to jest p5.js?

Biblioteka p5.js została stworzona przez artystę z Los Angeles, Lauren MacCarthy. Został zaprojektowany, aby zapewnić platformę podobną do przetwarzania, dla twórczej ekspresji i sztuki. Do przejrzystych narzędzi dołączono dobrze objaśnione samouczki i dokumenty referencyjne, dzięki czemu są idealne dla początkujących.

Niezależnie od tego, czy tworzysz animacje, muzykę, proste gry, czy nawet podłączasz do zewnętrznego sprzętu 8 Niesamowitych projektów sprzętowych z przetwarzaniem i p5.js 8 Niesamowitych projektów sprzętowych z przetwarzaniem i p5.js Zrób to sam DIY to więcej niż tylko Arduino i Raspberry Pi. W tym podsumowaniu omawiamy jedne z najfajniejszych projektów, które można wykonać za pomocą Processing i p5.js! , p5.js może pomóc.

Edytor p5.js

Aby rozpocząć, otwórz okno przeglądarki i przejdź do edytora internetowego p5.js. Przed rozpoczęciem są dwa opcjonalne kroki.

1. Musisz być zalogowany do p5.js, aby zapisać swoje szkice, więc założenie konta jest wskazane. Rejestracja jest bezpłatna i możesz użyć swojego konta Google lub GitHub, aby zalogować się, jeśli chcesz.

2). Kliknij koło zębate ustawień w prawym górnym rogu. Tutaj możesz zmienić motyw i rozmiar tekstu dla wszystkich miłośników ciemnych motywów.

Edytor p5.js łączy edytor kodu, konsolę i okno wyjściowe w tej samej przestrzeni. Do tej pory skonfigurowano już dwie funkcje.

Podstawy p5.js

Każdy szkic p5.js zaczyna się od dwóch elementów. The Ustawiać() funkcja oraz rysować() funkcjonować. Dla tych z was, którzy wcześniej zaprogramowali Arduino, będzie to znane!

funkcja setup () createCanvas (500, 500); 

The Ustawiać() funkcja działa na początku programu. W takim przypadku konfiguracja tworzy kwadratowe płótno o wielkości 400 pikseli. Zmień to na (500, 500) dla nieco większego obszaru do pracy.

Instalator jest uruchamiany tylko raz i służy do tworzenia części potrzebnych dla programu wraz z wartościami początkowymi dla programu.

funkcja draw () background (220); 

The rysować() Metoda nazywana jest każdą ramką. Działa to podobnie jak funkcja pętli w Arduino lub funkcja aktualizacji w Unity 3D. Tutaj dzieje się wszystko, co wymaga zmiany w szkicu. Na razie tło jest przerysowywane co ramkę. U góry zobaczysz dwie ikony: zagraj i zatrzymaj. Kliknij grać.

To do tej pory program - płótno o wymiarach 500 × 500 z szarym tłem,

Tworzenie kształtu

Praca z kształtami w p5.js różni się nieco od gotowych obiektów kształtów używanych w samouczku animacji internetowej mo.js. Aby utworzyć prostą elipsę, dodaj ją do kodu w rysować() metoda, tuż poniżej miejsca ustawienia koloru tła.

funkcja draw () background (220); elipsa (250,250,50)

The elipsa() Metoda przyjmuje kilka argumentów. Pierwsze dwa to położenie X i Y na płótnie. Ponieważ płótno ma szerokość 500 pikseli, ustawienie tych dwóch wartości na 250 powoduje umieszczenie elipsy na środku. Trzecim argumentem jest szerokość koła - w tym przypadku 50 pikseli.

Masz więc tło i okrąg, ale nie wygląda tak dobrze. Czas to naprawić.

Dodanie stylu

Zacznij od zmiany koloru tła. Liczba w nawiasach oznacza wartość w skali szarości. Tak więc 0 to czarny, a 255 to biały, z różnymi odcieniami szarości pomiędzy nimi. Aby tło było czarne, zmień tę wartość na 0.

funkcja draw () background (0); elipsa (250,250,50); 

Teraz po kliknięciu przycisku odtwarzania tło będzie czarne. Aby nadać kręgu trochę koloru, będziemy chcieli indywidualnie wpływać na jego wartości RGB (czerwony zielony i niebieski). Utwórz niektóre zmienne w górnej części skryptu (bezpośrednio na początku, przed funkcją konfiguracji), aby zapisać te wartości.

var r, g, b;

W funkcji konfiguracji ustaw wartość r do 255, i daj innym wartość 0. Połączony kolor RGB będzie jasno czerwony!

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

Aby zastosować kolor do koła, dodaj napełnić() wywołanie metody rysowania, tuż przed narysowaniem koła.

 wypełnienie (r, g, b); elipsa (250,250,50);

Teraz kliknij grać, i powinieneś zobaczyć czerwony okrąg na czarnym tle.

Tworzenie koła to dobry początek, ale dodawanie interaktywności jest tam, gdzie robi się naprawdę interesujące!

Kliknij, aby zmienić kolor

Dodanie kodu uruchamianego po kliknięciu myszą jest dość proste w p5.js. Utwórz nową funkcję poniżej rysować() metoda.

funkcja mousePressed () r = random (256); g = losowy (256); b = losowy (256);  

The mousePressed () nasłuchuje naciśnięć myszy i wykonuje kod w nawiasach. The losowy() funkcja zwraca losową wartość z zakresu od 0 do podanej liczby. W takim przypadku ustawiasz wartości r, gib na wartość od 0 do 255 po każdym naciśnięciu myszy.

Uruchom ponownie kod i kliknij kilka razy myszką. Koło powinno zmienić kolor, kiedy to zrobisz.

Teraz twoja animacja reaguje na kliknięcia myszką, ale co z użyciem głosu użytkownika?

Konfigurowanie sterowania głosem

Korzystanie z mikrofonu systemowego jest łatwiejsze dzięki bibliotece dźwięków p5.js. U góry skryptu utwórz nową zmienną o nazwie mikrofon.

var r, g, b; var mic;

Dodaj te linie do swojego Ustawiać() funkcja do przypisania mikrofon do wejścia audio.

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

Po kliknięciu przycisku Odtwórz teraz pojawi się okno dialogowe z pytaniem o pozwolenie na dostęp do wbudowanego mikrofonu.

Kliknij Dopuszczać. W zależności od używanej przeglądarki może zapamiętać Twój wybór lub może być konieczne kliknięcie pola potwierdzającego. Teraz mikrofon jest skonfigurowany i nadszedł czas, aby go użyć.

Skalowanie według objętości

Aby użyć głośności mikrofonu jako wartości w programie, musisz go zapisać jako zmienną. Zmień swoje rysować() metoda, aby wyglądać następująco:

funkcja draw () var micLevel = mic.getLevel (); tło (0); wypełnienie (r, g, b); elipsa (250,250,50 + micLevel * 2000);  

Na początku funkcji wywoływana jest nowa zmienna micLevel jest tworzony i przypisywany do bieżącej amplitudy mikrofonu.

Elipsa miała stałą szerokość 50 pikseli. Teraz minimalna szerokość to 50 pikseli, dodana do wartości micLevel, która aktualizuje każdą klatkę. Liczba mnożona przez micLevel będzie się różnić w zależności od czułości mikrofonu.

Eksperymentuj z wyższymi wartościami - wartość 5000 spowoduje bardziej dramatyczną zmianę skali!

Uwaga: jeśli to nie zadziała, mikrofon może nie być poprawnie skonfigurowany. Przeglądarka korzysta z domyślnego mikrofonu systemowego i może być konieczne zmodyfikowanie ustawień dźwięku i odświeżenie.

Konstruowanie robota

Teraz masz wszystkie narzędzia potrzebne do stworzenia robota. Najpierw przesuń elipsę, którą utworzyłeś, i dodaj kolejną, aby zrobić oczy.

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

The “zęby” to seria prostokątów rozciągających się od dołu ekranu. Zauważ, że rect () Metoda wymaga dodatkowego parametru dla swojej stałej szerokości.

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

Tym razem chcesz tylko zmienić wysokość zębów i dać “uśmiecha się” efekt muszą mieć różne wrażliwości. Minimalna wysokość to -100 (jak wychodzi z dołu płótna), więc micLevel musi być również liczbą ujemną.

Kliknij play, a powinieneś zobaczyć prawie ukończoną twarz robota!

Ponownie może być konieczne dostosowanie liczby mnożników w celu uzyskania najlepszych wyników.

Dodawanie wykończeń

Dodaj źrenice do oczu jeszcze bardziej elipsa() połączenia. Użyj innego napełnić() aby były białe. Dodaj to do swojego rysować() metoda poniżej “zęby” właśnie stworzyłeś.

wypełnienie (255); elipsa (150,150,20 + micLevel * 1000); elipsa (345,150,30 + micLevel * 1000); 

Na koniec, aby nadać całemu kawałkowi trochę definicji, zmień ciężar pociągnięcia w swoim Ustawiać() funkcjonować

strokeWeight (5); 

To jest to!

Jeśli coś nie działa, sprawdź dokładnie swój kod, aw razie potrzeby możesz zobaczyć pełny kod z tego samouczka w edytorze p5.

Przechodzenie do przodu z p5.js

Ten samouczek dla początkujących obejmuje kilka podstawowych pojęć z p5.js, pokazując, jak łatwo jest być kreatywnym. Jak zawsze, ten projekt ledwo zeskrobuje powierzchnię wszystkich możliwości p5.js.

Poświęcanie czasu na tworzenie sztuki za pomocą p5.js jest czasem dobrze spędzonym, ponieważ zapoznajesz się z myśleniem jak programista i składnia JavaScript. Są to wszystkie ważne umiejętności, które należy podjąć, jeśli zdecydujesz się nurkować z całego serca i naprawdę nauczyć się JavaScript. Naprawdę ucz się JavaScript z 5 najlepszymi kursami Udemy Naprawdę ucz się JavaScript z 5 najlepszymi kursami Udemy JavaScript jest językiem programowania w Internecie. Jeśli masz powód do nauki języka JavaScript, te pięć doskonałych kursów od Udemy może być miejscem, w którym możesz rozpocząć swoją przygodę z kodowaniem. !