4
Prosedur
Bab ini menjelaskan bagaimana Anda dapat menggunakan pendekatan "bagi dan taklukkan" dalam pemrograman. Alih-alih membangun program Anda sebagai satu bagian besar, Anda dapat menulis prosedur terpisah yang kemudian Anda gabungkan. Menggunakan prosedur akan membuat program Anda lebih mudah ditulis dan lebih mudah diuji dan di-debug. Dalam bab ini, Anda akan mempelajari cara:
• Menggunakan penyiaran pesan untuk mengoordinasikan perilaku banyak sprite
• Menggunakan penyiaran pesan untuk mengimplementasikan prosedur
• Menggunakan fitur "buat blok Anda sendiri" dari Scratch 2
• Menggunakan teknik pemrograman terstruktur
Sebagian besar aplikasi yang telah kita kembangkan sejauh ini hanya berisi satu sprite, tetapi sebagian besar aplikasi membutuhkan beberapa sprite yang bekerja bersama. Sebuah cerita animasi, misalnya, mungkin memiliki beberapa karakter serta latar belakang yang berbeda. Kita membutuhkan cara untuk menyinkronkan tugas yang diberikan kepada sprite. Dalam bab ini, kita akan menggunakan mekanisme penyiaran pesan Scratch untuk mengoordinasikan pekerjaan di antara beberapa sprite (ini adalah satu-satunya cara untuk mengimplementasikan prosedur di versi Scratch sebelumnya). Kemudian kita akan membahas cara menggunakan fitur "blok kustom" Scratch 2 untuk menyusun program besar menjadi bagian-bagian yang lebih kecil dan lebih mudah dikelola yang disebut prosedur. Prosedur adalah urutan perintah yang melakukan fungsi tertentu. Misalnya, kita dapat membuat prosedur yang menyebabkan sprite menggambar bentuk, melakukan komputasi kompleks, memproses input pengguna, mengurutkan not musik, mengelola permainan, dan melakukan banyak hal lainnya. Setelah dibuat, prosedur ini dapat berfungsi sebagai blok bangunan untuk membangun semua jenis aplikasi yang berguna.
Penyiaran dan Penerimaan Pesan
Jadi bagaimana sistem penyiaran di Scratch bekerja dalam praktiknya? Setiap sprite dapat menyiarkan pesan (Anda dapat memberi nama pesan ini apa pun yang Anda suka) menggunakan blok siaran atau siaran dan tunggu (dari palet Peristiwa) yang ditunjukkan pada Gambar 4-1. Siaran ini memicu semua skrip di semua sprite (termasuk sprite yang menyiarkan itu sendiri) yang dimulai dengan blok pemicu "ketika saya menerima" yang sesuai. Semua sprite mendengar siaran tersebut, tetapi mereka hanya akan bertindak jika mereka memiliki blok "ketika saya menerima" yang sesuai.
Gambar 4-1: Anda dapat menggunakan blok penyiaran dan penerimaan pesan untuk mengoordinasikan pekerjaan beberapa sprite.
Perhatikan Gambar 4-2. Gambar ini menunjukkan empat sprite: bintang laut, kucing, katak, dan kelelawar. Bintang laut menyiarkan pesan lompat, dan siaran itu dikirim ke semua sprite, termasuk dirinya sendiri. Sebagai respons terhadap pesan ini, baik kucing maupun katak akan menjalankan skrip lompat mereka. Perhatikan bagaimana setiap sprite melompat dengan caranya sendiri, menjalankan skrip yang berbeda. Kelelawar juga menerima pesan lompat, tetapi tidak bertindak berdasarkan pesan tersebut karena tidak diberi tahu apa yang harus dilakukan ketika menerima pesan ini. Kucing dalam gambar ini tahu cara berjalan dan melompat, katak hanya bisa melompat, dan kelelawar hanya diajari untuk terbang.
Perintah siaran dan tunggu bekerja seperti perintah siaran, tetapi menunggu hingga semua penerima pesan selesai mengeksekusi blok "ketika saya menerima" yang sesuai sebelum melanjutkan.
Gambar 4-2: Pesan siaran diterima oleh semua sprite, bahkan oleh sprite yang mengirim siaran tersebut.
Mengirim dan Menerima Siaran
Untuk mendemonstrasikan cara kerja penyiaran dan penerimaan pesan, mari kita buat aplikasi sederhana yang menggambar kotak berwarna secara acak. Saat pengguna mengklik tombol kiri mouse pada Stage, Stage akan mendeteksi kejadian ini (menggunakan blok "when this sprite clicked") dan menyiarkan pesan yang akan Anda sebut "Square" (Anda dapat memilih nama yang berbeda jika Anda mau). Ketika satu-satunya sprite dalam aplikasi ini menerima pesan ini, ia akan bergerak ke posisi mouse saat ini dan menggambar sebuah kotak. Ikuti langkah-langkah ini untuk membuat aplikasi:
1. Mulai Scratch dan kemudian pilih "New" dari menu "File" untuk memulai aplikasi baru. Anda bebas mengubah kostum kucing menjadi apa pun yang Anda suka.
2. Tambahkan blok "when I receive" (dari palet "Events") ke Area Skrip sprite. Klik panah bawah di blok ini dan pilih "new message..." dari menu tarik-turun. Pada dialog yang muncul, ketik Square dan klik OK. Nama blok akan berubah menjadi when I receive Square.
3. Lengkapi skrip seperti yang ditunjukkan pada Gambar 4-3. Sprite pertama-tama mengangkat pena dan bergerak ke posisi mouse saat ini, yang ditunjukkan oleh blok mouse x dan mouse y (dari palet Sensing). Kemudian ia memilih warna pena secara acak, menurunkan penanya, dan menggambar sebuah persegi.
Sprite sekarang siap untuk menangani pesan Square ketika diterima. Skrip pada Gambar 4-3 dapat disebut sebagai penangan pesan karena tugasnya adalah untuk menangani (atau memproses) pesan siaran.
Gambar 4-3: Penanganan pesan Persegi
Sekarang, mari kita pergi ke Panggung dan menambahkan kode untuk menyiarkan pesan Persegi sebagai respons terhadap klik mouse. Klik Panggung di Daftar Sprite dan tambahkan dua skrip yang ditunjukkan pada Gambar 4-4. Skrip pertama menghapus semua tanda pena dari Panggung saat bendera hijau diklik. Skrip kedua, yang dipicu saat pengguna mengklik mouse pada Panggung, menggunakan blok siaran untuk memberi tahu sprite bahwa sudah waktunya untuk menggambar.
Gambar 4-4: Dua skrip untuk Panggung dalam aplikasi menggambar Persegi
Aplikasi sekarang sudah lengkap. Untuk mengujinya, cukup klik mouse pada Panggung. Aplikasi tersebut akan merespons dengan menggambar persegi sebagai respons terhadap setiap klik mouse. Siaran Pesan untuk Mengkoordinasikan Beberapa Sprite
Untuk melihat beberapa sprite merespons pesan siaran yang sama, mari kita buat aplikasi yang menggambar beberapa bunga di Panggung sebagai respons terhadap klik mouse. Aplikasi Bunga berisi lima sprite (bernama Flower1 hingga Flower5) yang bertanggung jawab untuk menggambar lima bunga di Panggung.
Setiap sprite memiliki kostumnya sendiri, seperti yang ditunjukkan pada Gambar 4-5. Perhatikan bagaimana latar belakang setiap kostum transparan. Perhatikan juga lokasi pusat rotasi untuk setiap kostum (ditandai dengan garis silang).
Gambar 4-5: Bunga menggunakan lima sprite kelopak ini (seperti yang ditunjukkan di Editor Cat).
Ketika sebuah sprite menerima pesan untuk menggambar bunganya, ia akan mencetak beberapa salinan kostumnya yang diputar di Panggung, seperti yang diilustrasikan pada Gambar 4-6. Gambar tersebut juga menunjukkan contoh keluaran dari skrip menggambar bunga yang akan kita jelajahi selanjutnya.
Gambar 4-6: Proses menggambar aplikasi Bunga (kiri) dan beberapa kemungkinan bunga (kanan) Saat Anda mengklik mouse di Panggung, Panggung mendeteksi klik mouse menggunakan blok "when this sprite clicked". Sebagai respons, ia membersihkan latar belakangnya dan menyiarkan pesan yang disebut "Draw". Kelima sprite merespons pesan ini dengan menjalankan skrip yang mirip dengan yang ditunjukkan pada Gambar 4-7.
Gambar 4-7: Skrip dasar yang digunakan oleh masing-masing dari lima sprite
Skrip dimulai dengan menetapkan nilai acak ke efek warna, efek kecerahan, dan ukuran untuk mengubah tampilan bunga yang digambar. Kemudian ia bergerak ke posisi vertikal acak di Panggung dan menggambar bunga dengan mencetak replika kostumnya yang diputar. Buka aplikasi ini (bernama Flowers.sb2) dan jalankan untuk melihat cara kerjanya. Meskipun sederhana, outputnya menarik. Saya mendorong Anda untuk merancang kostum yang berbeda untuk menciptakan berbagai jenis bunga.
Ubah pusat kostum untuk menemukan desain bunga yang lebih menarik lagi. Sekarang setelah Anda memahami cara kerja penyiaran dan penerimaan pesan, kita akan melanjutkan untuk memperkenalkan pemrograman terstruktur sebagai cara untuk mengelola kompleksitas program besar.
Membuat Program Besar dalam Langkah-Langkah Kecil
Skrip yang telah Anda tulis hingga saat ini relatif pendek dan sederhana. Pada akhirnya, Anda akan menulis skrip yang lebih panjang dan kompleks yang berisi ratusan blok, dan memahami serta memeliharanya akan menjadi tantangan nyata.
Pendekatan yang dikenal sebagai pemrograman terstruktur dikembangkan pada pertengahan tahun 1960-an untuk menyederhanakan proses penulisan, pemahaman, dan pemeliharaan program komputer. Alih-alih meminta Anda menulis satu program besar, pendekatan ini mengharuskan pembagian program menjadi bagian-bagian yang lebih kecil, yang masing-masing menyelesaikan satu bagian dari tugas keseluruhan.
Pertimbangkan, misalnya, proses memanggang kue. Anda mungkin tidak memikirkan langkah-langkah individual saat memanggang, tetapi prosesnya mengikuti resep yang tepat yang mencantumkan langkah-langkah yang diperlukan. Resep tersebut mungkin mencakup instruksi seperti (1) campur 4 telur, 2 ons tepung, dan 1 cangkir air; (2) masukkan campuran ke dalam loyang; (3) masukkan loyang ke dalam oven; (4) panggang selama 1 jam pada suhu 350°F; dan seterusnya. Pada intinya, resep tersebut memecah masalah memanggang kue menjadi langkah-langkah logis yang berbeda.
Demikian pula, ketika Anda merancang solusi untuk masalah pemrograman Anda, akan sangat membantu jika Anda memecah masalah tersebut menjadi bagian-bagian yang mudah dikelola dan "seukuran pikiran". Pendekatan ini membantu Anda mempertahankan pandangan yang jelas tentang keseluruhan program dan hubungan antara bagian-bagian komponennya.
Perhatikan Gambar 4-8, yang menunjukkan skrip panjang yang menggambar sebuah bentuk di Panggung. Anda akan melihat bahwa Anda dapat membagi skrip ini menjadi blok-blok logis yang lebih kecil berdasarkan fungsinya. Enam blok pertama, misalnya, menginisialisasi sprite. Blok pengulangan pertama menggambar persegi, yang kedua menggambar segitiga, dan seterusnya. Dengan menggunakan pendekatan pemrograman terstruktur, kita dapat mengelompokkan blok-blok terkait bersama-sama di bawah nama yang representatif untuk membentuk prosedur.
Setelah kita menulis prosedur-prosedur ini, kita dapat memanggilnya dalam urutan tertentu untuk menyelesaikan masalah pemrograman kita. Gambar 4-8 juga menunjukkan bagaimana prosedur-prosedur terpisah digabungkan untuk mencapai fungsi yang sama dengan skrip aslinya. Jelas, skrip yang menggunakan prosedur (kanan) lebih modular dan lebih mudah dipahami daripada yang asli (kiri).
Prosedur juga dapat membantu Anda menghindari penulisan kode yang sama dua kali. Jika serangkaian perintah dieksekusi di beberapa tempat dalam program, Anda dapat menulis prosedur yang menjalankan perintah-perintah ini dan menggunakannya sebagai gantinya. Strategi untuk menghindari duplikasi kode ini disebut sebagai penggunaan kembali kode. Perhatikan, misalnya, bagaimana prosedur Menggambar persegi digunakan kembali pada Gambar 4-8.
Menggunakan prosedur memungkinkan Anda untuk menerapkan strategi "bagi dan taklukkan" untuk memecahkan masalah yang kompleks. Anda membagi masalah yang besar dan kompleks menjadi submasalah dan kemudian menaklukkan masalah yang lebih sederhana ini secara individual, menguji masing-masing secara terpisah. Setelah menyelesaikan semua submasalah secara terpisah, Anda menggabungkan bagian-bagian ini sedemikian rupa sehingga memecahkan masalah aslinya. Ini mirip dengan strategi pembuatan kue kita: Resep kita membagi masalah menjadi langkah-langkah yang terdefinisi dengan baik, dan kita mengeksekusi langkah-langkah ini dalam urutan yang benar untuk membuat produk akhir (kue kita).
Gambar 4-8: Memecah skrip besar menjadi bagian-bagian logis yang masing-masing menyelesaikan satu fungsi
Pada titik ini, Anda mungkin bertanya, “Bagaimana kita membuat prosedur ini?” Sebelum Scratch 2, Anda tidak dapat membuat blok Inisialisasi yang ditunjukkan pada Gambar4-8 dan kemudian memanggilnya dari skrip Anda. Satu-satunya cara untuk meniru prosedur dan menambahkan beberapa struktur ke program adalah melalui mekanisme penyiaran pesan Scratch. Ini telah berubah di Scratch 2, yang menambahkan fitur "blok kustom" yang ampuh.
Di bagian ini, kita akan mendemonstrasikan cara lama untuk melakukan sesuatu, karena itulah yang akan Anda lihat dalam skrip yang dibuat di versi Scratch yang lebih lama. Namun, fitur pembuatan blok sendiri akan dijelaskan di bagian selanjutnya, dan akan digunakan secara konsisten di sepanjang sisa buku ini.
Karena sprite menerima pesan siaran mereka sendiri, kita dapat mengimplementasikan prosedur dengan membuat sprite menyiarkan pesan ke dirinya sendiri dan melakukan tugas yang diinginkan di bawah blok pemicu "ketika saya menerima". Kita dapat menggunakan blok broadcast dan wait untuk memastikan bahwa prosedur kita dipanggil dalam urutan yang benar, sehingga menambahkan struktur dan modularitas pada program kita. Bingung? Mari kita lihat cara kerjanya.
Membuat Prosedur dengan Broadcasting Pesan
Kita akan mengeksplorasi cara kerja prosedur dan bagaimana prosedur dapat meningkatkan kode Anda dengan membuat ulang program Flowers dari sebelumnya.
Buka file Flowers2.sb2, yang berisi versi baru program tersebut. Skrip untuk Stage sama seperti sebelumnya (Stage menyiarkan pesan Draw ketika mendeteksi klik mouse), tetapi kali ini, program kita hanya menggunakan satu sprite, bukan lima. Sprite ini memiliki lima kostum, leaf1
melalui leaf5, dan akan memanggil sebuah prosedur untuk menggambar bunga untuk setiap kostum. Karena kita hanya memiliki satu sprite, kita hanya membutuhkan satu salinan kode menggambar (bukan lima skrip duplikat seperti pada versi pertama). Ini membuat program lebih kecil dan kode lebih mudah dipahami. Ketika sprite dalam aplikasi ini menerima pesan Draw, ia menjalankan skrip yang ditunjukkan pada Gambar 4-9.
Gambar 4-9: Ketika sprite menerima pesan Draw, ia memanggil DrawFlower lima kali (dalam sebuah loop) untuk menggambar lima bunga.
Skrip tersebut mengatur koordinat x dan kostum untuk menggambar bunga pertama, lalu memasuki loop untuk menggambar lima bunga. Pada setiap putaran, loop mengatur koordinat y untuk bunga dan memanggil DrawFlower dengan menyiarkan pesan ke dirinya sendiri. Panggilan ini menghentikan eksekusi skrip hingga DrawFlower selesai. Ketika ini terjadi, skrip Draw melanjutkan eksekusi, menyesuaikan koordinat x dan mengubah kostum sebagai persiapan untuk menggambar bunga berikutnya.
Catatan
Anda dapat memberi nama prosedur apa pun yang Anda suka, tetapi saya sarankan untuk memilih nama yang mencerminkan tujuan prosedur tersebut. Ini sangat membantu ketika Anda meninjau kembali program yang Anda tulis beberapa bulan yang lalu. Misalnya, jika Anda ingin menunjukkan kepada pemain berapa banyak poin yang mereka miliki dalam permainan, Anda dapat membuat prosedur bernama ShowScore. Memberi nama prosedur ini Mary atau Alfred tentu tidak akan mengingatkan Anda (atau siapa pun yang membaca program Anda) tentang apa yang dilakukan prosedur tersebut.
Prosedur DrawFlower ditunjukkan pada Gambar 4-10. Prosedur ini menetapkan nilai acak untuk efek warna, kecerahan, dan ukuran sprite sebelum mencetak versi kostum saat ini yang diputar untuk menggambar bunga.
Meskipun versi pertama program berisi lima sprite dan lima skrip berulang, versi kedua mencapai hasil yang sama menggunakan satu sprite yang memanggil satu prosedur untuk menggambar kelima bunga tersebut. Buka Flowers.sb2 dan Flowers2.sb2 di dua tab browser Anda dan bandingkan. Bukankah versi baru jauh lebih mudah dipahami? Menggunakan prosedur memungkinkan Anda membuat program yang lebih kecil yang lebih mudah dipahami dan dipelihara. Hal ini akan menjadi lebih bermanfaat seiring Anda menulis program untuk melakukan tugas-tugas yang lebih kompleks.
Gambar 4-10: Prosedur DrawFlower
Membangun Blok Anda Sendiri
Mulai Scratch 2, Anda juga dapat membuat blok kustom Anda sendiri. Setelah Anda membuat blok kustom, blok tersebut akan muncul di palet More Blocks, di mana Anda dapat menggunakannya seperti blok Scratch lainnya.
Untuk menunjukkan kepada Anda cara membuat dan menggunakan blok ini, kami akan memodifikasi program Flowers2 yang telah kita bahas di bagian sebelumnya untuk menggunakan blok kustom untuk prosedur DrawFlower. Langkah-langkah berikut akan memandu Anda dalam membuat versi baru aplikasi ini.
1. Pertama, buka file Flowers2.sb2 yang telah Anda lihat di bagian sebelumnya. Pilih File4Download ke komputer Anda dari menu File dan simpan file sebagai Flowers3.sb2. Anda dapat memilih nama yang berbeda jika Anda mau.
2. Klik thumbnail sprite Bunga untuk memilihnya. Kemudian pilih palet
More Blocks dan klik Buat Blok. Anda akan melihat dialog yang ditunjukkan pada Gambar 4-11 (kiri). Ketik DrawFlower untuk nama blok dan klik OK. Blok fungsi baru bernama DrawFlower akan muncul di bawah palet More Blocks, dan blok define DrawFlower akan muncul di Area Scripts seperti yang ditunjukkan pada gambar (kanan).
Gambar 4-11: Dialog New Block dan blok yang muncul setelah membuat blok kustom DrawFlower
3. Lepaskan skrip yang terhubung ke blok `when I receive DrawFlower` dan hubungkan ke blok `define DrawFlower`, seperti yang ditunjukkan pada Gambar 4-12. Ini menghasilkan prosedur baru, yang disebut `DrawFlower`, yang diimplementasikan sebagai blok kustom. Hapus blok `when I receive DrawFlower` karena tidak lagi diperlukan. Gambar 4-12: Prosedur `DrawFlower` yang diimplementasikan sebagai blok kustom
4. Sekarang setelah kita membuat prosedur `DrawFlower`, kita hanya perlu memanggilnya dari penangan pesan `Draw`. Ubah penangan pesan `Draw` seperti yang ditunjukkan pada Gambar 4-13. Perhatikan bahwa kita hanya mengganti blok `broadcast DrawFlower` dan `wait` dengan blok kustom `DrawFlower` baru kita. Gambar 4-13: Memanggil `DrawFlower` dari penangan pesan `Draw` Program sekarang sudah lengkap, dan Anda dapat mengujinya. Klik mouse pada Stage untuk memverifikasi bahwa program masih berfungsi seperti sebelumnya. Lihat “Menjalankan Tanpa Penyegaran Layar” di halaman 77 untuk mempelajari cara mempercepat eksekusi program ini. Sekarang setelah Anda mengetahui dasar-dasar di balik blok kustom, Anda dapat melangkah lebih jauh dengan membuat blok yang dapat menerima input.
Menjalankan Tanpa Penyegaran Layar
Mengimplementasikan prosedur DrawFlower dengan blok kustom menghadirkan fitur lain yang dapat mempersingkat waktu eksekusi skrip menggambar. Untuk mendemonstrasikannya, lakukan hal berikut:
1. Klik kanan blok DrawFlower di bawah palet More Blocks dan pilih edit dari menu pop-up. Ini akan menampilkan dialog dari Gambar 4-11, kecuali judulnya akan menjadi Edit Block, bukan New Block.
2. Klik panah di sebelah Options, centang kotak Run without screen refresh dan klik OK (lihat Gambar 4-15).
3. Sekarang, klik mouse pada Stage dan lihat apa yang terjadi. Alih-alih melihat langkah-langkah rotasi dan pencetakan individual saat kelima bunga digambar, Anda akan melihatnya muncul di Stage hampir bersamaan. Berikut penjelasan tentang apa yang terjadi.
Prosedur DrawFlower berisi banyak blok yang mengubah tampilan sprite, termasuk set color, set brightness, set size, dan stamp. Setelah mengeksekusi blok tersebut, Scratch biasanya berhenti sejenak untuk menyegarkan (yaitu, menggambar ulang) layar. Inilah mengapa kita dapat melihat kemajuan penggambaran saat aplikasi dijalankan sebelumnya.
Jika Anda memilih opsi Jalankan tanpa penyegaran layar, blok akan berjalan tanpa jeda untuk menyegarkan layar, sehingga prosedur dapat berjalan jauh lebih cepat. Layar akan disegarkan setelah Scratch menjalankan seluruh prosedur.
Selain mempercepat prosedur, opsi Jalankan tanpa penyegaran layar membantu mencegah kedipan yang dapat disebabkan oleh penggambaran ulang berulang.
Meneruskan Parameter ke Blok Kustom
Mari kita mulai dengan membuat blok kustom bernama Square, yang menggambar persegi dengan panjang sisi 100 piksel, seperti yang ditunjukkan pada Gambar 4-14.
Gambar 4-14: Prosedur Square yang menggambar persegi dengan ukuran tetap
Prosedur Square memiliki kemampuan terbatas, karena ukuran persegi yang digambar sudah tetap untuk selamanya. Bagaimana jika Anda ingin menggambar persegi dengan panjang sisi yang berbeda, seperti 50, 75, atau 200? Anda dapat mendefinisikan beberapa blok khusus bernama Square50, Square75, dan Square200, tetapi membuat beberapa blok yang pada dasarnya melakukan hal yang sama, dalam kebanyakan kasus, adalah ide yang buruk; jika Anda perlu melakukan perubahan, maka Anda harus melacak semua salinan dan mengubahnya juga. Solusi yang lebih baik adalah memiliki satu blok Square yang memungkinkan pengguna untuk menentukan panjang sisi yang diinginkan saat memanggilnya.
Anda sebenarnya telah menerapkan konsep ini sejak Bab 1. Misalnya, Scratch menyediakan satu blok pindah yang memungkinkan Anda untuk menentukan berapa langkah yang akan ditempuh sprite dengan memasukkan angka tersebut ke dalam slot parameter. Dengan begitu, Scratch tidak perlu menyediakan blok baru untuk setiap kemungkinan jarak pindah.
Oleh karena itu, yang perlu kita lakukan adalah menambahkan slot parameter ke blok Square kita di mana pengguna dapat memasukkan panjang sisi. Gambar 4-15 mengilustrasikan cara memodifikasi blok Persegi.
Gambar 4-15: Menambahkan input angka ke blok Persegi
Pertama, klik kanan blok Persegi di palet Blok Lainnya (atau blok definisikan Persegi di Area Skrip) dan pilih edit dari menu pop-up untuk memunculkan dialog Edit Blok u. Klik panah kecil di sebelah Opsi untuk memperluas dialog dan melihat opsi yang tersedia.
Kita ingin blok Persegi kita menerima panjang sisi persegi yang diinginkan, yang merupakan angka, jadi klik Tambah input angka v untuk menambahkan slot angka ke blok. Slot angka bernama number1 harus ditambahkan ke blok Persegi.
Untuk menunjukkan bahwa slot baru dimaksudkan untuk membawa panjang sisi persegi, ubah nama default dari number1 menjadi sesuatu yang bermakna w, seperti side, length, atau sideLength. (Sekali lagi, meskipun Scratch tidak peduli label apa yang Anda gunakan, Anda peduli! Pilih nama yang mencerminkan arti parameter.) Mari kita gunakan nama side untuk contoh ini.
Secara teknis, hanya itu yang perlu kita lakukan untuk menambahkan slot angka ke
prosedur kita. Jika kita klik OK, kita akan memiliki blok Persegi yang menerima angka sebagai input. Kita dapat menyeret blok ini ke dalam skrip kita dan menentukan panjang yang diinginkan di slot parameter, seperti Persegi 50. Tetapi bagaimana pengguna akan tahu apa arti angka yang diberikan ke Persegi? Apakah itu berarti luas 50, diagonal 50, panjang sisi 50, atau sesuatu yang lain?
Bayangkan jika blok geser Scratch dirancang seperti ini:
Bagaimana Anda tahu bahwa slot pertama mewakili waktu (dalam detik) dan slot kedua dan ketiga mewakili koordinat x dan y dari titik geser target? Para perancang Scratch membuat blok geser lebih mudah dipahami dan digunakan dengan menambahkan label ke slot ini sebagai berikut:
Mari kita lakukan hal yang sama untuk blok Persegi kita dengan menambahkan teks yang
menjelaskan arti (atau penggunaan) dari slot parameter. Klik Tambah teks label x, seperti yang ditunjukkan pada Gambar 4-15, untuk menambahkan label setelah parameter sisi. Ketik langkah-langkah untuk teks label dan klik OK.
Sekarang, jika Anda memeriksa definisi prosedur Square di Area Skrip, Anda akan melihat blok kecil (bernama side) ditambahkan ke header-nya, seperti yang diilustrasikan pada Gambar 4-16 (kiri). Blok move masih memiliki angka tetap 100 di dalamnya, tetapi yang perlu kita lakukan sekarang adalah menyeret blok side dari header metode Square dan meletakkannya di atas slot parameter blok move untuk mengganti angka 100, seperti yang ditunjukkan pada Gambar 4-16 (kanan).
Gambar 4-16: Memodifikasi prosedur Square untuk menggunakan parameter side
Label, side, yang muncul di header prosedur Square disebut parameter. Anda dapat menganggap parameter sebagai placeholder bernama. Kami ingin prosedur Square kami dapat menggambar persegi dengan ukuran apa pun, jadi alih-alih memasukkan angka tetap di dalam prosedur kami, kami menggunakan parameter umum bernama side. Pengguna akan menentukan nilai pasti side saat mereka memanggil prosedur Square. Mari kita ilustrasikan hal ini dengan memodifikasi skrip pada Gambar 4-14 untuk menggunakan versi baru dari prosedur Square kita. Perubahan yang diperlukan diilustrasikan pada Gambar 4-17.
Gambar 4-17: Memanggil prosedur Square dengan sisi diatur ke 100
Di sini, angka 100 (disebut argumen) diteruskan ke prosedur Square. Saat Square dieksekusi, parameter sisinya diatur ke 100, dan nilai ini digunakan untuk mengganti semua kemunculan blok sisi di dalam prosedur. Seperti yang Anda lihat, kemampuan untuk menentukan argumen yang berbeda untuk suatu prosedur adalah fitur yang ampuh yang menambah banyak fleksibilitas pada program kita. Kita dapat meningkatkan prosedur Square kita lebih jauh lagi dengan membuatnya menerima warna persegi sebagai parameter kedua, seperti yang ditunjukkan pada Gambar 4-18. Di sini, kita menambahkan parameter input kedua, yang disebut clrNum (singkatan dari nomor warna), yang menunjukkan warna persegi yang diinginkan. Prosedur sekarang mengatur warna pena ke nilai yang ditentukan oleh clrNum sebelum mengeksekusi loop menggambar.
Edit blok Square untuk menerapkan perubahan yang ditunjukkan pada gambar.
Parameter vs. Argumen
Meskipun banyak programmer menggunakan istilah parameter dan argumen secara bergantian, kedua istilah tersebut sebenarnya berbeda. Untuk memperjelas, perhatikan prosedur Rata-rata yang ditunjukkan di bawah ini, yang menghitung rata-rata dari dua angka.
Seperti yang didefinisikan, prosedur ini memiliki dua parameter bernama num1 dan num2. Sebuah parameter mendefinisikan input ke suatu prosedur. Anda akan memanggil prosedur ini dengan blok yang ditunjukkan di sebelah kiri dan menentukan beberapa nilai atau ekspresi di dalam slot yang tersedia. Nilai 100 dan 50 dalam contoh di atas disebut argumen dari prosedur tersebut.
Tentu saja, jumlah argumen dalam panggilan prosedur harus sesuai dengan jumlah parameter dalam definisi prosedur. Saat Anda memanggil Rata-rata, parameter num1 dan num2 masing-masing menerima nilai 100 dan 50, karena argumen dan parameter dicocokkan berdasarkan posisi.
Gambar 4-18: Versi Square ini mengambil warna yang diinginkan sebagai parameter kedua.
Cobalah 4-1
Bagaimana dengan ketebalan batas persegi? Ubah prosedur Square untuk mengambil parameter ketiga, yang disebut penSize, yang menentukan ukuran pena yang akan digunakan dalam menggambar persegi.
Mari kita akhiri bagian ini dengan beberapa kiat bermanfaat untuk menangani blok kustom:
• Blok kustom tidak dapat dibagikan di antara sprite. Jika Anda membuat blok kustom untuk, misalnya, Sprite1, maka hanya Sprite1 yang dapat menggunakan blok tersebut. Demikian pula, blok kustom yang didefinisikan untuk Stage hanya dapat dipanggil oleh skrip yang termasuk dalam Stage.
• Beri parameter Anda nama yang bermakna yang menunjukkan untuk apa parameter tersebut digunakan.
• Untuk menghapus blok kustom, cukup seret blok definisinya (yaitu, blok topi) dari Area Skrip dan jatuhkan ke area Palet. Anda hanya dapat menghapus blok definisi jika proyek Anda tidak berisi blok tumpukan apa pun yang terkait dengannya, jadi hapus semua penggunaan blok kustom dari skrip Anda sebelum mencoba menghapusnya.
• Untuk menghapus parameter blok kustom, klik nama parameter di dialog Edit Blok, lalu klik ikon X kecil yang muncul di atas slot parameter.
• Selain input angka, Anda juga dapat menambahkan parameter string dan Boolean. Kita akan membahas lebih lanjut tentang tipe data ketika kita membahas variabel di bab berikutnya.
Sekarang, Anda mungkin bertanya-tanya: Dapatkah sebuah prosedur memanggil prosedur lain?
Di bagian selanjutnya, Anda akan mempelajari cara menggunakan panggilan prosedur bersarang untuk memperluas kekuatan dan kegunaan prosedur yang ada.
Menggunakan Prosedur Bersarang
Seperti yang telah kita catat sebelumnya, sebuah prosedur harus dirancang untuk melakukan satu tugas yang terdefinisi dengan baik. Untuk menjalankan beberapa tugas, sangat sah—dan dalam banyak kasus diinginkan—untuk memiliki satu prosedur yang memanggil prosedur lain sebagai bagian dari jalur eksekusinya. Menyusun prosedur dengan cara ini memberi Anda fleksibilitas yang besar dalam menyusun dan mengatur program Anda. Untuk melihat ini dalam praktiknya, mari kita mulai dengan prosedur Square yang telah kita tulis
di bagian sebelumnya (lihat Gambar 4-17). Sekarang, kita akan membuat prosedur baru, yang disebut Squares, yang menggambar empat persegi yang diregangkan, seperti yang diilustrasikan pada Gambar 4-19. Prosedur ini melakukannya dengan memanggil prosedur Square empat kali. Setiap panggilan menggunakan argumen yang berbeda, dan outputnya adalah empat persegi yang berbagi sudut.
Gambar 4-19: Prosedur Squares dan outputnya
Sekarang kita dapat menggunakan Squares untuk membuat beberapa karya seni yang menarik. Gambar 4-20 menunjukkan prosedur lain, yang disebut RotatedSquares, yang memanggil prosedur Squares beberapa kali, memutar bentuk dengan sudut tertentu setelah setiap panggilan.
Gambar 4-20: Prosedur RotatedSquares dan beberapa kemungkinan output
Dalam prosedur ini, parameter count digunakan dua kali: sekali untuk menentukan jumlah pengulangan dan sekali lagi untuk menghitung sudut putar setelah memanggil Squares. Misalnya, mengatur count menjadi 5 akan menghasilkan pengulangan pola persegi pada Gambar 4-20 sebanyak lima kali dengan putaran kanan 72° (yaitu, 360° / 5) setelah setiap panggilan. Bereksperimenlah dengan nilai yang berbeda untuk menemukan pola baru.
Mari kita kerjakan contoh lain yang menunjukkan kekuatan prosedur bersarang: Kita akan mulai dengan prosedur Square pada Gambar 4-16 dan berakhir dengan papan catur.
Buat prosedur baru (disebut Row) yang menggambar satu baris persegi, seperti yang diilustrasikan pada Gambar 4-21. Perhatikan bahwa jumlah persegi
Ukuran kotak yang akan digambar ditentukan sebagai parameter. Untuk menyederhanakan, kami telah menetapkan ukuran setiap kotak pada 20 langkah, alih-alih mendefinisikan ukuran sebagai parameter kedua pada prosedur Row.
Gambar 4-21: Prosedur Row
Gambar 4-21 juga mengilustrasikan hasil pemanggilan Row dengan argumen
4, yang membuat prosedur memanggil Square sebanyak 20 langkah sebanyak empat kali dalam sebuah loop. Posisi sprite disesuaikan setelah menggambar setiap kotak untuk mengatur posisi awal kotak berikutnya. Setelah menggambar keempat kotak, perintah terakhir mengembalikan sprite ke posisi awalnya.
Untuk menggambar baris kotak lain di bawah baris yang ditunjukkan pada Gambar 4-21, kita hanya perlu memindahkan sprite ke bawah sebanyak 20 langkah dan kemudian memanggil prosedur Row lagi. Kita dapat mengulangi ini untuk menggambar sebanyak baris yang kita inginkan. Prosedur Checkers kita, yang ditunjukkan pada Gambar 4-22, melakukan hal itu.
Gambar 4-22: Prosedur Checkers dan outputnya
Prosedur ini mengambil dua parameter: jumlah baris dan jumlah kolom untuk papan catur yang diinginkan. Setelah menggambar setiap baris, prosedur memindahkan sprite ke bawah 20 langkah untuk bersiap menggambar baris kotak berikutnya.
Contoh yang disajikan di bagian ini menunjukkan bagaimana prosedur dapat membantu Anda membagi program menjadi bagian-bagian yang lebih kecil dan lebih mudah dikelola. Setelah Anda menulis dan menguji prosedur Anda, Anda dapat menggunakannya sebagai blok bangunan untuk prosedur yang lebih kompleks tanpa terlalu khawatir tentang detail implementasi tingkat rendah. Anda kemudian dapat fokus pada tugas penting untuk menyusun seluruh aplikasi menggunakan prosedur ini sebagai blok bangunan.
Cobalah 4-2
Menurut Anda apa yang akan terjadi jika Anda mengatur arah awal ke 0° (atas) alih-alih 90° (kanan)? Apakah skrip akan berfungsi? Jika tidak, bagaimana Anda bisa memperbaikinya? Lakukan perubahan ini dan jalankan skrip untuk menguji jawaban Anda.
Bekerja dengan Prosedur
Sekarang Anda tahu mengapa penting untuk memecah program Anda menjadi bagian-bagian yang lebih kecil dan menanganinya satu per satu, mari kita bahas cara melakukan pembagian ini. Setiap masalah berbeda, dan tidak ada solusi "satu ukuran untuk semua"—tetapi itulah yang membuat ini menjadi teka-teki yang menyenangkan! Di bagian ini, pertama-tama kita akan mengeksplorasi proses top-down untuk membagi program besar menjadi bagian-bagian modular dengan struktur logis yang jelas. Kemudian kita akan membahas cara lain untuk membangun program yang kompleks: proses bottom-up untuk menggabungkan prosedur yang ada. Gambar 4-23 menunjukkan pandangan tingkat tinggi dari kedua pendekatan ini.
Gambar 4-23: Mengilustrasikan pendekatan top-down (kiri) dan bottom-up (kanan)
Dalam kedua diagram, masalah yang ingin kita selesaikan berada di atas, dan langkah-langkah individual yang membangun solusi kita berada di bawah. Anda dapat memulai dari level mana pun yang masuk akal bagi Anda.
Memecah Program Menjadi Prosedur
Langkah pertama dalam menyelesaikan masalah pemrograman apa pun adalah memahami sepenuhnya masalah tersebut. Setelah itu, Anda dapat merencanakan solusi umum dan membaginya menjadi tugas-tugas utama. Tidak ada cara yang benar atau salah untuk membagi program tertentu, dan dengan pengalaman, Anda akan menjadi lebih baik dalam menentukan apa arti "utama". Bekerja dari solusi umum ke hal-hal spesifiknya memastikan bahwa, setidaknya, logika keseluruhan program tersebut benar.
Untuk mendemonstrasikan strategi pemecahan masalah ini, mari kita pertimbangkan bagaimana kita akan menggambar rumah yang mirip dengan yang ditunjukkan pada Gambar 4-24.
Gambar 4-24: Kita dapat menggambar rumah ini dengan membagi tugas menjadi beberapa bagian yang lebih kecil dan menangani setiap bagian secara individual.
Di satu sisi, mengerjakan masalah sederhana ini memungkinkan kita untuk fokus pada strategi solusi tanpa terjebak dalam banyak detail. Di sisi lain, terlepas dari kesederhanaannya yang tampak, masalah ini memungkinkan banyak solusi yang berbeda. Berikut beberapa kemungkinannya:
• Kita dapat melihat rumah tersebut terdiri dari garis-garis lurus. Dalam hal ini, menggambar setiap garis merupakan tugas utama.
• Kita dapat melihat rumah tersebut terdiri dari enam bentuk independen: sisi 1, sisi 2, dua pintu, sebuah segitiga, dan sebuah jajaran genjang. Menggambar setiap bentuk merupakan tugas utama.
• Karena kedua pintu tersebut identik, kita dapat mendefinisikan satu tugas utama untuk menggambar pintu dan menggunakan tugas tersebut dua kali.
• Kita dapat melihat segitiga dan jajaran genjang di bagian atas rumah sebagai satu kesatuan, yaitu atap. Dalam hal ini, satu tugas utama adalah menggambar atap.
• Kita dapat melihat sisi 1 dan pintunya sebagai satu kesatuan, yaitu sisi depan. Dalam hal ini, salah satu tugas utama adalah menggambar sisi depan.
Ada banyak kemungkinan lain, tetapi itu sudah cukup untuk mengilustrasikan poinnya. Idenya adalah mengelompokkan tugas menjadi bagian-bagian kecil yang mudah dipahami yang dapat Anda tangani, lalu fokus pada satu bagian pada satu waktu. Jika Anda menemukan bagian-bagian yang serupa, cobalah untuk menemukan solusi umum dan terapkan pada semua bagian tersebut. Dengan mengingat hal itu, rencana kita untuk menggambar rumah juga diuraikan dalam Gambar 4-24. Rencana ini mengasumsikan bahwa sprite mulai menghadap ke kanan di titik A.
Yang perlu kita lakukan hanyalah membuat skrip yang sesuai dengan langkah-langkah yang diuraikan dalam rencana tersebut. Kita akan menulis sebuah prosedur (disebut Side1) untuk menggambar sisi kiri rumah seperti yang ditentukan pada langkah 1. Kita juga akan menulis tiga prosedur (disebut Door, Side2, dan Roof) untuk menggambar kedua pintu, sisi kanan rumah, dan atap (seperti yang ditentukan pada langkah 2, 3, 4, dan 6), dan kita akan menghubungkan semua prosedur ini dengan perintah gerak yang sesuai.
Prosedur Rumah kami ditunjukkan pada Gambar 4-25 di samping langkah-langkah menggambar yang sesuai dengan setiap panggilan prosedur. Prosedur ini mengambil satu parameter (disebut skala) yang menentukan panjang satuan (yaitu, faktor penskalaan) untuk menggambar rumah. Perhatikan bagaimana prosedur Pintu digunakan kembali dua kali. Perhatikan juga bahwa prosedur Atap bertanggung jawab untuk menggambar seluruh atap, dan bahwa prosedur ini dapat berisi sub-prosedur yang berbeda untuk menggambar komponen-komponen individual dari atap.
Gambar 4-25: Prosedur Rumah. Perhatikan bagaimana tugas-tugas utama selaras dengan rencana menggambar.
Prosedur individual untuk menggambar rumah ditunjukkan pada Gambar 4-26. Prosedur-prosedur ini menggambar bentuk geometris sederhana menggunakan teknik yang sama yang Anda pelajari di Bab 2.
Prosedur Sisi1, Pintu, dan Sisi2 masing-masing menggambar persegi panjang 3×5, 1×2, dan 9×5 (diskalakan oleh faktor skala). Prosedur Atap memiliki dua sub-prosedur (bernama Segitiga dan Jajar Genjang) untuk menggambar dua bagian atap. Perhatikan bahwa faktor skala digunakan secara konsisten di semua prosedur ini. Ini memungkinkan kita untuk menggambar rumah yang lebih besar atau lebih kecil dengan memanggil prosedur Rumah dengan argumen yang berbeda.
Cobalah 4-3
Apakah Anda memperhatikan bahwa prosedur Sisi1, Pintu, dan Sisi2 menggunakan kode yang hampir identik? Buat prosedur baru bernama Persegi Panjang yang mengambil panjang, lebar, dan skala sebagai parameter dan menggambar persegi panjang dengan dimensi yang ditentukan. Ubah prosedur Sisi1, Pintu, dan Sisi2 untuk memanggil prosedur Persegi Panjang yang baru.
Gambar 4-26: Prosedur untuk menggambar rumah pada Gambar 4-24
Membangun dengan Prosedur
Cara lain untuk menangani masalah besar adalah dengan fokus pada detail yang lebih kecil terlebih dahulu. Jika Anda menyelesaikan bagian-bagian kecil dari masalah besar (atau menemukan solusi yang sudah ada), Anda kemudian dapat menyusun hasilnya dari bawah ke atas untuk mencapai solusi total.
Untuk mendemonstrasikan teknik pemecahan masalah ini, mari kita mulai dengan prosedur sederhana (disebut Daun) yang menggambar satu daun seperti yang ditunjukkan pada Gambar 4-27. Prosedur ini berisi loop pengulangan yang berjalan dua kali untuk menggambar dua bagian daun. Setiap bagian digambar sebagai serangkaian 15 segmen garis pendek dengan sudut belok 6° di antaranya. Ini mirip dengan metode menggambar poligon yang kita gunakan di Bab 2.
Gambar 4-27: Prosedur Daun dan outputnya
Gambar 4-28: Prosedur Leaves memanggil prosedur Leaf sebanyak lima kali dengan sudut putar 72° di antara setiap panggilan.
Menggunakan prosedur ini sebagai titik awal, kita sekarang dapat menggambar bentuk yang sedikit lebih kompleks yang berisi lima daun. Prosedur baru kita, yang disebut Leaves, dan outputnya ditunjukkan pada Gambar 4-28. Seperti yang Anda lihat, kita hanya perlu memanggil prosedur Leaf dalam loop berulang dengan sudut putar yang sesuai di antaranya.
Kita sekarang dapat menggunakan Leaf dan Leaves untuk membangun sesuatu yang lebih kompleks: cabang dengan daun di atasnya. Prosedur Branch dan outputnya diilustrasikan pada Gambar 4-29. Sprite bergerak maju 40 langkah, menggambar satu daun (dengan memanggil prosedur Leaf), bergerak maju 50 langkah lagi, menggambar lima daun (dengan memanggil prosedur Leaves), dan akhirnya kembali ke posisi awalnya.
Gambar 4-29: Prosedur Branch dan outputnya
Mari kita tingkatkan lagi. Bagaimana jika kita menggunakan prosedur Branch untuk membuat gambar bunga yang kompleks? Prosedur baru kami, yang disebut Flower, dan outputnya ditunjukkan pada Gambar 4-30. Prosedur ini hanya memanggil prosedur Branch sebanyak enam kali dalam sebuah loop dengan sudut putaran 60° di antaranya. Kita bisa terus melanjutkan, tetapi idenya sekarang seharusnya sudah jelas. Kita mulai dengan prosedur sederhana yang disebut Leaf dan menggunakannya dalam prosedur baru (disebut Leaves) untuk membuat pola yang kompleks. Prosedur Branch bergantung pada kedua prosedur ini untuk membuat sesuatu yang lebih rumit. Prosedur Flower kemudian menggunakan Branch untuk menggambar pola yang lebih kompleks lagi. Jika kita mau, kita bisa membuat prosedur yang menggambar seluruh pohon bunga dan prosedur lain untuk menggambar taman yang penuh dengan pohon.
Gambar 4-30: Prosedur Flower dan outputnya.
Intinya dari contoh ini adalah, terlepas dari kompleksitas masalah yang kita coba selesaikan, kita selalu dapat membangun solusi dengan menggabungkan sejumlah bagian yang lebih kecil dan lebih mudah dikelola. Dengan menggunakan teknik pemecahan masalah ini, kita mulai dengan prosedur singkat yang menyelesaikan masalah yang sangat sederhana dan kemudian menggunakannya untuk membuat prosedur yang lebih canggih.
Ringkasan
Dalam bab ini, kita memperkenalkan sejumlah konsep fundamental yang akan digunakan secara luas di sisa buku ini. Pertama, kita menjelaskan konsep penyiaran pesan untuk komunikasi dan sinkronisasi antar-sprite. Setelah itu, kita memperkenalkan pemrograman terstruktur dan membahas cara menggunakan penyiaran pesan untuk mengimplementasikan prosedur. Kemudian kita mendemonstrasikan fitur membangun blok sendiri di Scratch 2.0 dan menjelaskan cara meneruskan argumen ke prosedur untuk membuat prosedur lebih fleksibel. Kita membahas beberapa contoh yang menunjukkan pembagian masalah besar menjadi bagian-bagian yang lebih kecil dan lebih mudah dikelola dan menjelaskan cara
menggunakan prosedur sebagai blok bangunan dasar untuk membuat program besar. Terakhir, kita meneliti teknik pemecahan masalah bottom-up, di mana kita menggabungkan solusi yang diketahui untuk bagian-bagian kecil dari suatu masalah untuk menyelesaikan masalah besar tersebut.
Pada bab selanjutnya, Anda akan mempelajari konsep terpenting dalam bahasa pemrograman apa pun: variabel. Pengenalan variabel ini akan menjadi langkah penting selanjutnya untuk menjadi programmer yang mahir.
Soal
1. Tulis prosedur yang berbeda untuk menggambar setiap huruf nama Anda. Beri nama setiap prosedur sesuai dengan huruf yang digambarnya. Kemudian tulis skrip yang memanggil prosedur-prosedur ini sehingga Anda dapat menggambar nama Anda di Panggung.
2. Buat program yang ditunjukkan di bawah ini, jalankan, dan jelaskan cara kerjanya.
3. Tulis prosedur yang mengkonversi derajat Celsius ke derajat Fahrenheit seperti yang ditunjukkan di bawah ini. Buat skrip membulatkan jawabannya ke bilangan bulat terdekat. Uji prosedur Anda untuk suhu yang berbeda. (Petunjuk: °F = (9 / 5) × °C + 32.)
4. Tulis prosedur untuk membuat rumah seperti yang ditunjukkan di sebelah kanan. Mulailah dengan menulis prosedur kecil yang menggambar bagian-bagian kecil rumah (misalnya, pintu, atap, jendela, dan sebagainya). Kemudian gabungkan prosedur-prosedur ini untuk membuat seluruh rumah.
5. Tulis prosedur untuk menghitung luas lingkaran (A = πr²) berdasarkan jari-jarinya, seperti yang ditunjukkan di bawah ini. Gunakan π = 3,14.
6. Dalam latihan ini, Anda akan mensimulasikan tekanan yang dialami ikan di bawah air. Asumsikan bahwa tekanan P (dalam atmosfer) yang dirasakan oleh ikan berhubungan dengan kedalamannya d (dalam meter dari permukaan) melalui hubungan: P = 0,1d + 1. PressureUnderWater_NoSolution.sb2 berisi implementasi parsial dari simulasi ini. Selesaikan skrip sehingga ikan tersebut menyebutkan tekanan yang dirasakannya saat berenang, seperti yang diilustrasikan di bawah ini:
