Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Memulai Processing untuk Android

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

Processing adalah salah satu pustaka (library) paling powerfull yang tersedia saat ini untuk menciptakan karya seni algoritmik visual, baik 2D maupun 3D. Dia open source, berbasis di Java, dan dilengkapi dengan berbagai macam fungsi yang disesuaikan untuk membuat gambar dan melukis dengan kode yang menyenangkan dan mudah.

Dengan menggunakan pustaka inti Processing di aplikasi Android Anda, Anda dapat membuat grafik dan animasi berperforma tinggi tanpa harus berurusan dengan OpenGL atau Canvas API Android. Biasanya, Anda bahkan tidak perlu repot dengan tugas tingkat rendah seperti mengelola thread, menciptakan render loop, atau mempertahankan frame rate.

Dalam tutorial ini, saya akan menunjukkan cara menambahkan Processing ke aplikasi Android dan mengenalkan beberapa fitur yang paling berguna.

1. Mengatur Proyek

Processing dilengkapi dengan lingkungan pengembangan terpadu tersendiri, yang dapat digunakan untuk membuat aplikasi Android. Namun, jika Anda adalah pengembang aplikasi Android, saya yakin Anda lebih suka menggunakan Android Studio. Jadi silakan download versi terbaru dari Processing's Android Mode.

Di dalam file ZIP yang Anda download, Anda akan menemukan sebuah file bernama processing-core.zip. Ekstrak dan ganti namanya menjadi processing-core.jar menggunakan command line atau file explorer sistem operasi anda.

Terakhir, tambahkan file JAR sebagai salah satu dependensi proyek Android Studio Anda dengan menempatkannya di dalam folder libs modul app.

Anda sekarang memiliki semua yang Anda butuhkan untuk mulai menggunakan Processing.

2. Membuat Canvas

Hampir semua fungsi inti Processing tersedia melalui kelas PApplet, yang pada dasarnya berfungsi sebagai kanvas yang bisa Anda gunakan. Dengan memperluasnya, Anda mendapatkan akses mudah ke semua metode yang ditawarkannya.

Untuk mengkonfigurasi canvas, Anda harus mengganti  settings() method. Di dalam metode ini, Anda dapat menentukan dua detail konfigurasi penting: dimensi yang diinginkan dari canvas dan apakah sebaiknya menggunakan mesin rendering 2D atau 3D. Untuk saat ini, mari kita membuat canvas sebesar layar perangkat dan menggunakan mesin rendering 2D standar. Untuk melakukannya, Anda dapat menghubungi metode pintas fullScreen().

Metode settings() adalah metode khusus yang dibutuhkan hanya jika Anda tidak menggunakan IDE Processing sendiri. Saya sarankan Anda tidak menambahkan kode lagi untuk itu.

Jika Anda ingin menginisialisasi variabel apapun atau mengubah parameter yang terkait dengan gambar - seperti warna latar belakang canvas atau jumlah frame yang harus ditampilkan per detik - Anda harus menggunakan metode setup(). Sebagai contoh, kode berikut menunjukkan cara menggunakan metode background() untuk mengubah warna latar belakang canvas menjadi merah:

3. Menampilkan Canvas

Karena canvas masih bukan bagian dari aktivitas apa pun, Anda tidak akan dapat melihatnya saat menjalankan aplikasi Anda. Untuk menampilkan canvas, Anda harus terlebih dahulu membuat container untuk itu di dalam file XML tata letak aktivitas Anda. Widget LinearLayout atau widget FrameLayout bisa jadi wadahnya.

Contoh PApplet tidak dapat langsung ditambahkan ke container yang Anda buat. Anda harus meletakkannya di dalam contoh PFragment terlebih dahulu dan kemudian memanggil metode setView() contoh PFragment untuk mengaitkannya dengan penampung. Kode berikut menunjukkan cara melakukannya:

Pada titik ini, jika Anda menjalankan aplikasi, Anda harus bisa melihat kanvas kosong yang menutupi keseluruhan layar perangkat Anda.

Blank canvas with red background

4. Menggambar Bentuk Sederhana

Sekarang Anda bisa melihat kanvasnya, mari kita mulai menggambar. Untuk menggambar di dalam canvas, Anda harus mengganti metode draw() dari subclass PApplet yang Anda buat sebelumnya.

Mungkin tidak tampak jelas segera, tapi Processing, secara default, mencoba memanggil metode draw() sesering 60 kali setiap detik, selama canvas ditampilkan. Itu berarti Anda dapat dengan mudah membuat grafik dan animasi dengan itu.

Processing memiliki berbagai metode yang dinamai secara intuitif yang memungkinkan Anda menggambar geometris seperti titik, garis, elips, dan persegi panjang. Misalnya, metode rect() menggambar persegi panjang, dan metode ellipse() untuk menggambar elips. Metode rect() dan ellipse() menggambarkan argumen yang sama: koordinat X dan Y dari bentuk, lebarnya, dan tinggi badannya.

Kode berikut menunjukkan cara menggambar persegi panjang dan elips:

Banyak metode kelebihan beban juga, memungkinkan Anda untuk sedikit memodifikasi bentuk dasar. Misalnya, dengan melewatkan parameter kelima ke metode rect(), radius sudut, Anda bisa menggambar persegi panjang sudut bulat.

Jika Anda menjalankan aplikasi Anda sekarang, Anda akan melihat sesuatu seperti ini:

Simple shapes drawn with default colors

Jika Anda ingin mengubah warna border dari bentuknya, Anda bisa memanggil metode stroke() dan menentukan warna yang diinginkan sebagai argumen untuknya. Begitu pula jika ingin mengisi bentuk dengan warna tertentu, Anda bisa memanggil metode fill(). Kedua metode tersebut harus dipanggil sebelum Anda benar-benar menggambar bentuknya.

Kode berikut menggambar segitiga biru dengan garis hijau:

Jika Anda menjalankan aplikasi Anda sekarang, Anda akan dapat melihat segitiga biru, namun Anda juga akan memperhatikan bahwa setiap bentuk lainnya juga telah berubah menjadi biru.

Fill and stroke applied to all shapes

Jika alasannya tidak jelas bagi Anda, ingatlah bahwa metode draw() dipanggil berulang kali. Itu berarti bahwa setiap parameter konfigurasi yang Anda ubah selama siklus draw akan berpengaruh pada siklus draw berikutnya. Jadi, untuk memastikan bahwa semua bentuk Anda digambar dengan warna yang tepat, merupakan ide bagus untuk selalu menentukan secara eksplisit warna dari setiap bentuk yang Anda gambar, tepat sebelum Anda menggambarnya.

Misalnya, dengan menambahkan kode berikut pada awal metode draw(), Anda bisa membuat bentuk lainnya menjadi putih kembali.

Pada titik ini, canvas akan terlihat seperti ini:

Different fills and strokes for different shapes

5. Penanganan Touch Event

Dengan Processing, handling touch event sangat mudah. Anda tidak memerlukan penangan event apa pun. Yang perlu Anda lakukan adalah memeriksa apakah variabel boolean bernama mousePressed benar untuk diketahui saat pengguna menyentuh layar. Setelah Anda memastikan bahwa pengguna menyentuh layar, Anda dapat menggunakan variabel mouseX dan mouseY untuk menentukan koordinat X dan Y dari sentuhan.

Misalnya, kode berikut ini menggambar persegi panjang baru di mana pun pengguna menyentuh canvas.

Jika Anda menjalankan aplikasi Anda sekarang dan menyeret jari Anda ke layar, Anda akan melihat banyak persegi panjang berwarna kuning yang ditarik.

Rectangles drawn on touch

Sebelum kita melanjutkan, inilah tip cepatnya: jika pada suatu saat Anda ingin menghapus canvas, Anda cukup memanggil metode background() lagi.

6. Bekerja dengan Pixel

Hanya ada sejauh ini yang bisa Anda dapatkan dengan bentuk sederhana. Jika Anda tertarik untuk membuat karya seni yang rumit dan rumit, Anda mungkin memerlukan akses ke piksel masing-masing dari canvas.

Dengan memanggil metode loadPixels(), Anda dapat memuat warna semua piksel canvas ke dalam sebuah array yang diberi nama pixels. Dengan memodifikasi isi array, Anda dapat memodifikasi konten canvas dengan sangat efisien. Terakhir, setelah Anda selesai memodifikasi array, Anda harus ingat untuk memanggil metode updatePixels() untuk membuat kumpulan piksel baru.

Perhatikan bahwa array pixels adalah array integer satu dimensi yang ukurannya sama dengan produk dengan lebar dan tinggi canvas. Karena canvas dua dimensi, mengubah koordinat X dan Y dari sebuah pixsel menjadi indeks array yang valid melibatkan penggunaan rumus berikut ini:

Contoh kode berikut, yang menentukan warna setiap piksel canvas berdasarkan koordinat X dan Y, akan membantu Anda memahami dengan lebih baik bagaimana menggunakan array pixels:

Metode Color.rgb() yang Anda lihat di atas mengubah nilai merah, hijau, dan biru individual menjadi bilangan bulat yang mewakili nilai warna tunggal yang dipahami oleh kerangka Processing. Jangan ragu untuk mengubah argumen yang Anda berikan padanya, tapi pastikan mereka selalu berada dalam kisaran 0 sampai 255.

Jika Anda memilih untuk menjalankan kode tanpa modifikasi, Anda harus melihat pola yang terlihat seperti ini:

Modified pixels array rendered on canvas

Kesimpulan

Anda sekarang tahu cara membuat grafis 2D menggunakan bahasa Processing. Dengan keterampilan yang Anda pelajari hari ini, Anda tidak hanya dapat membuat aplikasi Android Anda lebih menarik, tapi juga membuat game lengkap dari awal. Anda hanya dibatasi oleh kreativitas Anda!

Untuk mempelajari lebih lanjut tentang Processing, saya sarankan Anda meluangkan waktu untuk melihat-lihat halaman referensi resmi.

Dan saat Anda berada di sini, lihat beberapa posting kami yang lain mengenai pengembangan aplikasi Android!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.