Coding Simple Playdoh Shapes W/ P5.js & Makey Makey: 7 Langkah

2025 Pengarang: John Day | [email protected]. Terakhir diubah: 2025-01-23 14:49

Proyek Makey Makey »

Ini adalah proyek komputasi fisik yang memungkinkan Anda membuat bentuk dengan Playdoh, kode bentuk itu menggunakan p5.js dan memicu bentuk itu untuk muncul di layar komputer dengan menyentuh bentuk Playdoh menggunakan Makey Makey.

p5.js adalah open source, berbasis web, lingkungan pengkodean kreatif dalam Javascript. Pelajari lebih lanjut di sini:

Anda tidak memerlukan pengalaman pengkodean untuk melakukan proyek ini. Ini dapat digunakan sebagai pengantar pengkodean berbasis teks (sebagai lawan dari bahasa berbasis blok seperti Scratch). Anda hanya perlu menulis 4 baris kode untuk menyelesaikan proyek ini. Ada beberapa cara Anda dapat mengubah dan memperluas ide dasar ini.

Perlengkapan

Makey Makey Kit (dengan 2 Klip Buaya)

Playdoh (Warna Apa Saja)

Laptop dengan Koneksi internet

Langkah 1: Buat Bentuk Playdoh

Buat bentuk dari Playdoh. Ini bisa berupa lingkaran, oval, persegi, persegi panjang atau segitiga. Ketahuilah bahwa Anda perlu mengkodekan bentuk ini nanti, jadi semakin sederhana bentuknya, semakin mudah bagian pengkodeannya. Namun, p5.js dapat mengkodekan berbagai bentuk, bahkan bentuk khusus, sehingga Anda dapat memutuskan tingkat kesulitan yang ingin Anda coba.

Langkah 2: Memulai di P5.js

Jika Anda belum pernah menggunakan p5.js sebelumnya, saya sarankan untuk memeriksa halaman memulai di situs web:

Saya juga sangat merekomendasikan memeriksa saluran youtube The Coding Train untuk tutorial yang sangat baik tentang menggunakan p5.js. Berikut ini tautan ke daftar putar yang membahas semua dasar-dasarnya:

Karena p5.js berbasis web, Anda dapat melakukan semua pengkodean di web menggunakan p5 Web Editor. Anda tidak memerlukan akun untuk melakukan proyek ini, tetapi jika Anda ingin menyimpan pekerjaan Anda, Anda harus mendaftar untuk sebuah akun.

Editor Web:

Editor web p5.js memiliki area untuk menulis kode di sebelah kiri dan kanvas yang akan menampilkan hasil kode di sebelah kanan.

Setiap sketsa p5.js menyertakan fungsi setup() dan fungsi draw(). Fungsi setup() akan berjalan satu kali saat sketsa pertama kali dimulai. Dalam fungsi setup() adalah fungsi createCanvas yang menciptakan ruang di mana bentuk Anda akan digambar. Angka dalam kurung fungsi createCanvas mengatur sumbu X (kiri ke kanan) dan sumbu Y (atas ke bawah) kanvas. Angka default adalah 400, 400 yang berarti kanvas Anda adalah 400 piksel dari kiri ke kanan dan 400 piksel dari atas ke bawah (Anda selalu dapat mengubahnya sesuai kebutuhan Anda). Sadarilah bahwa sudut kiri atas kanvas adalah titik 0, 0. Ini penting untuk diketahui saat Anda mengkodekan bentuk Anda.

Fungsi draw() berjalan sebagai loop yang berarti terus diperbarui, kira-kira. 60 kali per detik. Ini memungkinkan kita untuk membuat animasi dalam sketsa kita. Di dalam fungsi draw() adalah fungsi latar belakang yang menambahkan warna ke kanvas kita. Standarnya adalah 220 yang merupakan nilai skala abu-abu. 0 = hitam, 255 = putih dan angka di antaranya akan bervariasi dalam nuansa abu-abu. Fungsi latar belakang juga dapat mengambil nilai RGB yang memungkinkan kita menambahkan warna. Lebih lanjut tentang ini di langkah berikutnya.

Langkah 3: Kode Bentuk Anda di P5.js

Untuk mengkode bentuk Anda, Anda hanya perlu menambahkan baris kode di dalam fungsi draw().

Setiap bentuk memiliki fungsinya masing-masing untuk membuatnya tampil di kanvas. Berikut adalah halaman referensi untuk semua bentuk di p5.js:

Untuk membuat lingkaran, kita akan menggunakan fungsi elips. Fungsi ini mengambil 3 argumen (angka yang berada di dalam tanda kurung). Angka pertama adalah posisi X dari pusat lingkaran di kanvas dan angka kedua adalah posisi Y di kanvas. Ingat bahwa sudut kiri atas adalah 0, 0 dan kanvas berukuran 400 kali 400 piksel. Jadi jika saya ingin lingkaran muncul di tengah kanvas saya akan meletakkannya di 200 pada sumbu X dan 200 pada sumbu Y. Anda dapat bereksperimen dengan angka-angka ini untuk merasakan bagaimana menempatkan sesuatu di atas kanvas.

Angka ketiga menentukan ukuran lingkaran. Untuk contoh ini, diatur ke diameter 100 piksel. Fungsi elips juga dapat mengambil argumen keempat yang akan mengubah argumen ketiga untuk mempengaruhi diameter X dan argumen keempat akan menjadi diameter Y. Ini dapat digunakan untuk membuat bentuk oval, bukan lingkaran bulat sempurna.

Untuk mengatur warna bentuk kita, kita menggunakan fungsi fill. Ini menggunakan 3 argumen yang merupakan nilai RGB (R = merah, G = hijau, B = biru). Setiap nilai dapat berupa angka antara 0 dan 255. Misalnya, untuk membuat merah, kita akan menempatkan 255, 0, 0 yang semuanya merah tanpa hijau atau biru. Kombinasi yang berbeda dari angka-angka ini akan menghasilkan warna yang berbeda.

Ada beberapa situs web yang menyediakan nilai RGB untuk berbagai warna, seperti ini:

Setelah Anda menemukan nilai RGB yang sesuai dengan warna PlayDoh Anda, tulis fungsi isian di atas fungsi bentuk.

Anda kemudian dapat mengklik tombol putar di editor web dan Anda akan melihat bentuk Anda muncul di layar.

Langkah 4: Jadikan Bentuk Anda Muncul Dengan Menekan Tombol

Karena kita ingin sketsa p5.js kita menjadi interaktif dengan Makey Makey, kita perlu menambahkan beberapa kode untuk membuat sesuatu terjadi ketika kita menekan tombol pada keyboard. Dalam hal ini, kami ingin bentuk hanya muncul jika kami menekan tombol. Untuk melakukan ini, kita memerlukan pernyataan bersyarat. Ini berarti bahwa sesuatu dalam kode kita hanya akan terjadi jika kondisi tertentu terpenuhi, dalam hal ini, sebuah tombol ditekan.

Untuk membuat conditional statement conditional ini, kita mulai dengan kata if diikuti dengan tanda kurung. Di dalam tanda kurung akan ada kondisi yang ingin kita penuhi. Di p5.js, ada variabel bawaan yang disebut keyIsPressed (pastikan Anda menggunakan huruf kapital sama persis dengan yang ditulis di sini). keyIsPressed adalah variabel boolean. Ini berarti bahwa itu dapat memiliki nilai benar atau salah. Ketika tombol ditekan, nilainya benar dan ketika tidak ditekan, nilainya salah.

Akhirnya kita menambahkan satu set kurung kurawal {}. Di dalam kurung kurawal akan menjadi kode yang ingin kita jalankan jika kondisi kita terpenuhi. Jadi kita hanya akan meletakkan kode kita untuk membuat bentuk di antara tanda kurung kurawal itu.

Sekarang ketika kita menjalankan sketsa kita, kita tidak akan melihat bentuknya sampai kita menekan tombol pada keyboard.

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: 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 bentuk untuk muncul).

Ambil klip buaya yang terpasang pada tombol Spasi dan tekan ujung lainnya ke dalam bentuk Playdoh.

Colokkan kabel USB ke laptop.

Langkah 6: Sentuh Bentuk Playdoh

Pegang ujung logam klip buaya yang terpasang ke Bumi di Makey Makey dan sentuh bentuk Playdoh. Saat Anda menyentuh bentuk Playdoh, bentuk kode akan muncul di kanvas sketsa Anda.

Berikut ini tautan ke sketsa p5.js untuk proyek ini:

Jika bentuknya tidak muncul:

1. Pastikan Anda telah mengklik mouse pada kanvas sketsa p5.js sebelum menyentuh Playdoh.

2. Pastikan Anda memegang klip logam dari kabel pembumian.

Langkah 7: Bentuk Berbeda

Segitiga Kuning:

Kotak Biru: