Bel Pintu Kertas W/ P5.js & Makey Makey: 9 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:55

Proyek Makey Makey »

Proyek ini membuat sketsa di p5.js yang dapat memutar file audio menggunakan penekanan tombol kemudian membuat tombol sederhana dengan pensil, kertas, dan Makey Makey untuk memicu suara.

Meskipun proyek ini menggunakan suara bel pintu, langkah-langkahnya mencakup cara memuat file audio ke sketsa p5.js Anda, sehingga dapat dengan mudah disesuaikan untuk menggunakan jenis suara apa pun.

Pelajari lebih lanjut tentang p5.js:

Jika Anda baru menggunakan p5.js dengan Makey Makey, saya sarankan untuk memeriksa proyek ini terlebih dahulu:

Perlengkapan

Pensil

Sebuah kotak kecil kertas

Makey Makey kit (dengan 2 klip buaya)

Laptop dengan koneksi internet

Langkah 1: Mengunduh File Audio

Proyek ini membutuhkan penggunaan file audio yang perlu kita unggah ke sketsa p5.js kita. Untuk melakukan ini, pertama-tama kita perlu mengunduh file audio.

Jika Anda tidak dapat mengunduh file ke komputer Anda atau hanya ingin melewatkan pengunduhan file dan mengunggahnya ke sketsa Anda, Anda dapat membuka tautan ini untuk templat p5.js dengan suara yang sudah diunggah dan lanjutkan ke langkah 3. Namun, jika Anda ingin bekerja dengan file audio di p5.js di masa mendatang, langkah ini dan langkah berikutnya akan menunjukkan cara melakukannya.

Ada banyak tempat untuk mengunduh efek suara dan file audio di web, beberapa yang memerlukan akun, seperti freesound.org dan beberapa yang tidak memerlukan akun, seperti soundbible.com. Selalu perhatikan persyaratan lisensi dan/atau atribusi apa pun saat menggunakan suara untuk proyek Anda. Lebih lanjut tentang itu di sini:

Suara bel pintu untuk proyek ini berasal dari https://freesound.org/s/163730/ disediakan oleh Tim Kahn.

Jika Anda ingin mengunduh suara tanpa membuat akun, saya telah mengubah suara menjadi format mp3 yang dapat diunduh di sini:

Langkah 2: Mengunggah File Audio Ke P5.js

Setelah kami mengunduh suara bel pintu kami, kami perlu mengunggahnya ke sketsa p5.js kami sehingga kami dapat mengaksesnya.

Untuk melakukannya, ikuti langkah-langkah berikut:

- Klik ikon ' > ' di sisi kiri editor web, tepat di bawah tombol putar. Ini akan membuka bilah sisi yang menunjukkan file untuk sketsa Anda.

- Klik segitiga kecil yang menghadap ke bawah tepat di sebelah kanan 'File Sketsa'. Ini akan memunculkan menu tarik-turun dengan opsi untuk 'tambah folder' dan 'tambah file'

- Klik 'tambah file'. Ini akan memunculkan jendela untuk menambahkan file. Anda dapat menyeret file bel pintu ke dalam kotak atau klik di mana kotak bertuliskan 'seret file ke sini untuk mengunggah atau klik untuk menggunakan browser file'. Ini akan memungkinkan Anda menavigasi melalui file komputer Anda untuk menemukan file audio.

- Setelah Anda menyeret atau memilih file, Anda akan melihatnya mengunggah dan nama file akan muncul di bilah sisi.

Sekarang Anda akan dapat mengakses dan menggunakan file audio ini di sketsa Anda.

Langkah 3: Memuat File Audio Ke Sketsa P5.js

Memuat file audio ke dalam sketsa p5.js mengharuskan kita membuat objek file suara. Sebuah objek memiliki properti dan fungsi yang dibangun di dalamnya yang dapat kita gunakan.

Untuk membuat sebuah objek, pertama-tama kita perlu membuat sebuah variabel untuk menampung objek tersebut. Ini akan memungkinkan kita untuk mengakses objek dan propertinya di seluruh sketsa. Untuk membuat variabel, pergi ke baris atas sketsa dan tulis kata let. Kata ini digunakan untuk mendeklarasikan variabel dalam javascript. Kemudian beri nama variabel tersebut. Kita dapat memanggil variabel apa pun yang kita inginkan, tetapi akan sangat membantu jika kita memberinya nama yang terkait dengan apa yang akan dilakukannya dalam kode kita. Dalam hal ini, masuk akal untuk menyebutnya bel pintu.

biarkan bel pintu;

Karena p5.js berbasis web, kita perlu memastikan file audio telah dimuat ke dalam sketsa sebelum sketsa mulai berjalan, jika tidak, kita mungkin tidak dapat mengakses properti objek. Untuk melakukan ini, kita perlu menambahkan fungsi untuk memuat file audio sebelum sketsa dimulai. Fungsi ini disebut preload(). Kami menulis ini dengan cara yang sama seperti fungsi setup() dan draw().

Di dalam kurung kurawal, kita akan menetapkan variabel kita ke objek suara dengan menggunakan fungsi loadSound(). Di dalam tanda kurung, tulis nama persis file audio di dalam tanda kutip:

fungsi pramuat() {

bel pintu = loadSound('bel pintu.mp3');

}

Langkah 4: Putar File Audio Menggunakan Fungsi KeyPressed()

Sekarang setelah file audio dimuat ke dalam sketsa, Anda dapat memutarnya menggunakan metode play(). Metode pada dasarnya adalah fungsi yang khusus untuk suatu objek.

Jika Anda pernah menggunakan penekanan tombol di p5.js sebelumnya, Anda mungkin menggunakan pernyataan kondisional dengan variabel keyIsPressed di dalam fungsi draw. Namun, saat bekerja dengan file audio, kami tidak ingin memicunya di dalam fungsi undian. Fungsi draw adalah loop sehingga terus diperbarui. Ini berarti file audio akan diputar berulang-ulang selama tombol ditekan yang tidak enak untuk didengarkan.

Untuk menghindari ini, Anda akan menggunakan fungsi yang disebut keyPressed(). Ini juga ditulis sama dengan fungsi setup() dan draw(). Tulis ini di bagian bawah kode di bawah fungsi draw().

Di dalam kurung kurawal adalah tempat Anda meletakkan metode play() yang akan memicu file audio sekali saat Anda menekan tombol. Untuk menggunakan metode objek, tulis nama variabel yang menampung objek diikuti dengan.play();

fungsi tombolDitekan() {

bel pintu.play();

}

Sekarang ketika Anda menjalankan sketsa Anda, Anda dapat menekan tombol dan suara bel pintu akan diputar.

CATATAN PENTING: Saat menambahkan penekanan tombol ke dalam kode kami, editor web perlu mengetahui apakah kami menekan tombol untuk menulis kode di editor teks atau kami menekan tombol untuk melakukan hal yang kami kodekan dengan menekan tombol. Saat Anda mengklik tombol putar, gerakkan mouse ke atas kanvas dan klik pada kanvas. Ini akan membawa fokus editor ke sketsa dan menekan tombol akan memicu kode penekanan tombol yang kita inginkan terjadi

Langkah 5: Buat Tombol Kertas

Untuk memicu suara dengan Makey Makey, kita akan menggunakan pensil dan kertas biasa untuk membuat tombol.

Gambarlah dua setengah lingkaran dengan jarak yang sangat kecil di antara keduanya sehingga tidak benar-benar bersentuhan tetapi cukup dekat sehingga kita dapat menyentuh kedua bagian tersebut secara bersamaan dengan satu jari. Setiap setengah lingkaran juga harus memiliki garis tebal yang memanjang ke setiap ujung kertas. Di sinilah Anda akan memasang klip buaya dari Makey Makey.

Pastikan Anda mengisi kedua sisi dengan sangat gelap sehingga grafit dari pensil mampu menahan arus dari Makey Makey.

Desain dua setengah lingkaran adalah memiliki celah kecil di antara keduanya sehingga pada dasarnya tidak mungkin untuk tidak menyentuh kedua sisi pada saat yang bersamaan. Ini memungkinkan Anda untuk menyelesaikan sirkuit antara kunci dan Earth di Makey Makey tanpa harus memegang kabel ground.

Langkah 6: Siapkan Makey Makey

Keluarkan papan Makey Makey, kabel USB, dan dua klip buaya. Lampirkan satu klip buaya ke Earth dan satu lagi ke tombol Space (karena kami tidak menentukan kunci dalam kode kami, tombol apa pun yang kami tekan akan memicu suara).

Ambil klip buaya yang terpasang pada tombol Spasi dan klipkan ke satu sisi tombol kertas. Ambil klip buaya yang terpasang ke Bumi dan klip ke sisi lain dari tombol kertas.

Colokkan kabel USB ke laptop.

Langkah 7: Tekan Tombol untuk Memicu File Audio

Pada titik ini, Anda siap untuk membunyikan bel pintu Anda. Mulai sketsa (ingat untuk mengklik mouse pada kanvas sehingga penekanan tombol akan menjalankan fungsi keyPressed()) dan kemudian sentuh dua setengah lingkaran di atas kertas secara bersamaan. Anda akan mendengar suara file audio bel pintu diputar.

Langkah 8: Ekstensi: Tambahkan Komponen Visual ke Sketsa

Pada titik ini, sketsa kami hanya menyertakan kode untuk memutar file audio, jadi Anda tidak akan melihat perubahan apa pun di layar. Ini mungkin semua yang ingin Anda lakukan jika Anda mencoba membuat beberapa jenis proyek suara interaktif.

Namun, dengan kemampuan pengkodean visual p5.js, kemungkinan menambahkan grafik tidak terbatas. Anda bahkan dapat memiliki visual yang bereaksi terhadap file audio Anda dalam berbagai cara seperti hanya muncul saat file audio diputar, bereaksi terhadap perubahan volume dan/atau frekuensi atau bahkan membuat representasi visual dari suara itu sendiri.

Langkah 9: Ekstensi: Buat Lingkaran Berubah Warna Saat Tombol Ditekan

Agar proyek ini tetap sederhana, kita hanya akan membuat lingkaran yang berubah warna saat tombol ditekan.

Dalam fungsi draw(), buat lingkaran menggunakan fungsi elips(). Di atas itu, tambahkan fungsi fill() untuk mengatur warna lingkaran. Untuk sketsa ini, warna aslinya adalah putih yang merupakan nilai skala abu-abu 255. Anda dapat mengatur warna ke warna mana pun yang Anda inginkan menggunakan nilai warna RGB.

Di antara fungsi fill() dan fungsi elips(), buat pernyataan kondisional menggunakan variabel keyIsPressed di dalam tanda kurung. Di antara tanda kurung kurawal pernyataan bersyarat, letakkan fungsi fill() lain yang disetel ke warna yang Anda inginkan agar lingkaran berubah saat Anda menekan tombol. Untuk proyek ini, warna akan berubah menjadi kuning yang memiliki nilai RGB 255, 255, 0.

jika(kunciDitekan) {

isi(255, 255, 0);

}

Tekan tombol putar untuk menjalankan sketsa. Lingkaran putih sekarang akan muncul ketika sketsa dimuat (Ingat untuk mengklik mouse di kanvas). Kemudian tekan tombol kertas dan Anda akan mendengar bel pintu berdering dan melihat lingkaran berubah warna.

sketsa p5.js: