Papierowy dzwonek z P5.js i Makey Makey: 9 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:29

Projekty Makey Makey »

Ten projekt tworzy szkic w p5.js, który może odtwarzać plik audio za pomocą naciśnięcia klawisza, a następnie tworzy prosty przycisk z ołówkiem, papierem i Makey Makey, aby uruchomić dźwięk.

Chociaż ten projekt wykorzystuje dźwięk dzwonka do drzwi, kroki obejmują sposób załadowania pliku audio do szkicu p5.js, dzięki czemu można go łatwo dostosować do użycia dowolnego rodzaju dźwięku.

Dowiedz się więcej o p5.js:

Jeśli jesteś nowy w używaniu p5.js z Makey Makey, sugeruję najpierw sprawdzić ten projekt:

Kieszonkowe dzieci

Ołówek

Mały kawałek papieru

Zestaw Makey Makey (z 2 zaciskami krokodylkowymi)

Laptop z połączeniem internetowym

Krok 1: Pobieranie pliku audio

Ten projekt wymaga użycia pliku audio, który musimy wgrać do naszego szkicu p5.js. Aby to zrobić, najpierw musimy pobrać plik audio.

Jeśli nie możesz pobrać plików na swój komputer lub po prostu chcesz pominąć pobieranie pliku i przesyłanie go do swojego szkicu, możesz przejść do tego łącza, aby uzyskać szablon p5.js z już przesłanym dźwiękiem i przejść do kroku 3. jeśli chcesz w przyszłości pracować z plikami audio w p5.js, ten i następny krok pokażą Ci, jak to zrobić.

Istnieje wiele miejsc, w których można pobierać efekty dźwiękowe i pliki audio w Internecie, niektóre wymagają konta, takie jak freesound.org, a inne nie wymagają konta, takie jak soundbible.com. Zawsze pamiętaj o wszelkich wymaganiach dotyczących licencji i/lub atrybucji podczas korzystania z dźwięku w swoim projekcie. Więcej na ten temat tutaj:

Dźwięk dzwonka do tego projektu pochodzi z https://freesound.org/s/163730/ dostarczonego przez Tima Kahna.

Jeśli chcesz pobrać dźwięk bez zakładania konta, przekonwertowałem dźwięk do formatu mp3, który można pobrać tutaj:

Krok 2: Przesyłanie pliku audio do P5.js

Po pobraniu dźwięku dzwonka do drzwi musimy go przesłać do naszego szkicu p5.js, abyśmy mogli uzyskać do niego dostęp.

Aby to zrobić, wykonaj następujące kroki:

- Kliknij ikonę „ >” po lewej stronie edytora internetowego, tuż pod przyciskiem odtwarzania. Spowoduje to otwarcie paska bocznego, który pokazuje pliki do szkicu.

- Kliknij mały trójkąt skierowany w dół po prawej stronie „Pliki szkicu”. Spowoduje to wyświetlenie menu rozwijanego z opcjami „dodaj folder” i „dodaj plik”

- Kliknij „dodaj plik”. Spowoduje to wyświetlenie okna do dodania pliku. Możesz przeciągnąć plik dzwonka do pola lub kliknąć w polu „przeciągnij pliki tutaj, aby przesłać lub kliknij, aby użyć przeglądarki plików”. Umożliwi to nawigację po plikach komputera w celu zlokalizowania pliku audio.

- Po przeciągnięciu lub wybraniu pliku zobaczysz, że został on przesłany, a nazwa pliku pojawi się na pasku bocznym.

Teraz będziesz mógł uzyskać dostęp do tego pliku audio i używać go w swoim szkicu.

Krok 3: Ładowanie pliku audio do szkicu P5.js

Załadowanie pliku audio do szkicu p5.js wymaga od nas stworzenia obiektu pliku dźwiękowego. Obiekt ma wbudowane własne właściwości i funkcje, z których możemy korzystać.

Aby stworzyć obiekt, najpierw musimy stworzyć zmienną do przechowywania obiektu. Umożliwi nam to dostęp do obiektu i jego właściwości w całym szkicu. Aby utworzyć zmienną, przejdź do górnej linii szkicu i napisz słowo let. To słowo służy do deklarowania zmiennej w javascript. Następnie nadaj zmiennej nazwę. Możemy nazwać zmienną jak tylko chcemy, ale warto nadać jej nazwę związaną z tym, co będzie robić w naszym kodzie. W takim przypadku warto nazwać to dzwonkiem.

niech dzwonek do drzwi;

Ponieważ p5.js jest oparty na sieci, musimy upewnić się, że plik audio został załadowany do szkicu, zanim szkic zacznie działać, w przeciwnym razie możemy nie mieć dostępu do właściwości obiektu. Aby to zrobić, musimy dodać funkcję wczytywania pliku audio przed rozpoczęciem szkicu. Ta funkcja nazywa się preload(). Piszemy to w taki sam sposób, jak funkcje setup() i draw().

Wewnątrz nawiasów klamrowych przypiszemy naszą zmienną do obiektu dźwiękowego za pomocą funkcji loadSound(). W nawiasach wpisz dokładną nazwę pliku audio w cudzysłowie:

funkcja wstępnego ładowania () {

dzwonek = loadSound('dzwonek.mp3');

}

Krok 4: Odtwórz plik audio za pomocą funkcji KeyPressed()

Teraz, gdy plik audio został załadowany do szkicu, możesz go odtworzyć za pomocą metody play(). Metody są zasadniczo funkcjami specyficznymi dla obiektu.

Jeśli wcześniej używałeś naciśnięć klawiszy w p5.js, prawdopodobnie użyłeś instrukcji warunkowej ze zmienną keyIsPressed wewnątrz funkcji rysowania. Jednak podczas pracy z plikami audio nie chcemy uruchamiać go w funkcji rysowania. Funkcja rysowania jest pętlą, więc stale się aktualizuje. Oznacza to, że plik audio będzie odtwarzany w kółko, dopóki wciśnięty jest klawisz, co nie będzie przyjemne do słuchania.

Aby tego uniknąć, użyjesz funkcji o nazwie keyPressed(). Jest to również napisane tak samo, jak funkcje setup() i draw(). Napisz to na dole kodu pod funkcją draw().

Wewnątrz nawiasów klamrowych umieszczasz metodę play(), która uruchomi plik audio raz po naciśnięciu klawisza. Aby użyć metody dla obiektu, napisz nazwę zmiennej, która przechowuje obiekt, po której następuje.play();

Naciśnięty klawisz funkcyjny() {

dzwonek.play();

}

Teraz, gdy uruchomisz swój szkic, możesz nacisnąć klawisz, a dźwięk dzwonka zostanie odtworzony.

WAŻNA UWAGA: Podczas dodawania naciśnięć klawiszy do naszego kodu, edytor sieciowy musi wiedzieć, czy naciskamy klawisz, aby napisać kod w edytorze tekstu, czy też naciskamy klawisz, aby wykonać to, do czego zakodowaliśmy naciśnięcie klawisza. Po kliknięciu przycisku odtwarzania przesuń mysz nad płótno i kliknij płótno. Spowoduje to skupienie edytora na szkicu, a naciśnięcie klawisza wywoła kod naciśnięcia klawisza, który chcemy wykonać

Krok 5: Utwórz przycisk papieru

Aby wyzwolić dźwięk za pomocą Makey Makey, użyjemy zwykłego ołówka i papieru do zrobienia przycisku.

Narysuj dwa półokręgi z bardzo małą przerwą między nimi, tak aby tak naprawdę się nie stykały, ale wystarczająco blisko, abyśmy mogli dotknąć obu połówek jednocześnie jednym palcem. Każde półkole powinno mieć również grubą linię, która rozciąga się na każdy koniec kartki. W tym miejscu przymocujesz zaciski krokodylkowe z Makey Makey.

Upewnij się, że wypełniłeś obie strony bardzo ciemne, aby grafit z ołówka był w stanie utrzymać prąd z Makey Makey.

Konstrukcja dwóch półokręgów polega na tym, aby między nimi była tak mała szczelina, że w zasadzie niemożliwe jest, aby nie dotknąć obu stron jednocześnie. Pozwala to na zakończenie obwodu między kluczem a ziemią na Makey Makey bez konieczności trzymania przewodu uziemiającego.

Krok 6: Skonfiguruj Makey Makey

Wyjmij płytkę Makey Makey, kabel USB i dwa zaciski krokodylkowe. Dołącz jeden zacisk krokodylkowy do Ziemi, a drugi do klawisza spacji (ponieważ nie określiliśmy klucza w naszym kodzie, każdy klawisz, który naciśniemy, uruchomi dźwięk).

Weź zacisk krokodylkowy przymocowany do klawisza spacji i przypnij go z boku przycisku papieru. Weź zacisk krokodylkowy, który jest przymocowany do Ziemi i przypnij go po drugiej stronie przycisku papieru.

Podłącz kabel USB do laptopa.

Krok 7: Naciśnij przycisk, aby uruchomić plik audio

W tym momencie możesz zadzwonić do drzwi. Rozpocznij szkic (pamiętaj, aby kliknąć myszą na płótnie, aby naciśnięcie klawisza wywołało funkcję keyPressed()), a następnie dotknij jednocześnie dwóch półokręgów na papierze. Powinieneś usłyszeć dźwięk odtwarzanego pliku dźwiękowego dzwonka.

Krok 8: Rozszerzenie: Dodaj komponent wizualny do szkicu

W tym momencie nasz szkic zawiera tylko kod do odtworzenia pliku audio, więc na ekranie nic się nie zmieni. To może być wszystko, co chcesz zrobić, jeśli chcesz stworzyć jakiś interaktywny projekt dźwiękowy.

Jednak dzięki możliwościom kodowania wizualnego p5.js możliwości dodawania grafiki są nieograniczone. Możesz nawet mieć wizualizacje, które reagują na pliki audio na wiele sposobów, na przykład pojawiające się tylko podczas odtwarzania pliku audio, reagujące na zmiany głośności i/lub częstotliwości, a nawet tworząc wizualną reprezentację samego dźwięku.

Krok 9: Rozszerzenie: Zmień kolor koła po naciśnięciu przycisku

Aby ten projekt był prosty, zrobimy po prostu okrąg, który zmienia kolor po naciśnięciu przycisku.

W funkcji draw() utwórz okrąg za pomocą funkcji ellipse(). Powyżej dodaj funkcję fill(), aby ustawić kolor okręgu. W przypadku tego szkicu oryginalny kolor będzie biały, co stanowi wartość skali szarości 255. Możesz ustawić dowolny kolor, używając wartości kolorów RGB.

Pomiędzy funkcją fill() a funkcją ellipse() utwórz instrukcję warunkową, używając zmiennej keyIsPressed w nawiasach. Pomiędzy nawiasami klamrowymi instrukcji warunkowej umieść inną funkcję fill() ustawioną na kolor, na który koło ma się zmienić po naciśnięciu klawisza. W tym projekcie kolor zmieni się na żółty, który ma wartość RGB 255, 255, 0.

jeśli (klawisz zostanie naciśnięty) {

wypełnienie(255, 255, 0);

}

Naciśnij przycisk odtwarzania, aby uruchomić szkic. Po załadowaniu szkicu powinno teraz pojawić się białe kółko (pamiętaj, aby kliknąć myszą na płótnie). Następnie naciśnij przycisk papieru i powinieneś usłyszeć dzwonek do drzwi i zobaczyć, jak okrąg zmienia kolor.

szkic p5.js: