Array (Larik)
Array
Array adalah himpunan dari beberapa nilai yang berbeda.
Jika sebelumnya dengan variabel kita bisa menyimpan 1 nilai, maka dengan array, kita bisa mengumpulkan beberapa nilai yang berbeda ke dalam sebuah wadah.
Nilai-nilai yang berbeda ini kemudian bisa kita akses satu-persatu atau keseluruhan, sesuai kebutuhan kita.
Dengan menggunakan loop, seperti yang kita pelajari sebelumnya, kita bisa memproses array dengan lebih mudah
Membuat Array
Sebuah array bisa kita gambarkan dalam contoh di bawah ini.
Array berikut bernama data, berukuran 10 dan berisi 10 bilangan bulat acak:
• data1 = 10 • data2 = 19 • data3 = 1 • data4 = 3 • data5 = 9 • data6 = 88 • data7 = 24 • data8 = 90 • data9 = 45 • data10 = 77
Membuat Array
Dalam array, penomoran elemen selalu dimulai dari angka 0, sehingga pada array di atas, elemen ke-0 adalah data1 dan bernilai 10, dan seterusnya.
Penulisan array seringkali dilakukan dengan notasi berikut:
• namaArray [nomorElemen]
Sehingga untuk array di contoh sebelumnya, kita bisa mengakses elemen pertama dengan menuliskan
• data[0]
Seperti sebelumnya, untuk memberikan nilai 10 pada elemen pertama, kita bisa menuliskan
Membuat Array
Tak lupa, sebuah array harus ditentukan terlebih
dahulu ukurannya.
Ini yang menentukan berapa banyak elemen
yang bisa ditampung array tersebut.
Karena kita akan
menampung 10 bilangan bulat pada array data,
maka kita perlu
menetapkan bahwa array data akan berukuran 10.
Ukuran ini adalah ukuran minimal dan kita bisa saja membuat
array dengan ukuran lebih besar.
Membuat Array
• Sebuah array bisa dituliskan dengan cara yang mirip dengan membuat variabel, aturan penamaannya pun sama, hanya saja ada sedikit tambahan yang harus ditulis.
• Berikut adalah notasi pembuatan array di dalam Processing:
tipeData[] namaArray;
namaArray = new tipeData[ukuranArray]
• Sehingga array data di atas bisa kita buat dengan menuliskan:
int[] data;
Contoh Array Sederhana
void setup() { //deklarasi data int[] data;
data = new int[10]; //inisialisasi data data[0] = 10; data[1] = 19; data[2] = 1; data[3] = 3; data[4] = 9; data[5] = 88; data[6] = 24; data[7] = 90; data[8] = 45; data[9] = 77;
//menampilkan isi array data di console
println (data); }
void draw() {
//kosong saja, kita tidak melakukan apa-apa
}
Menggambar dengan Array
Dengan menggunakan array, kita bisa menyimpan beberapa nilai yang berbeda dan kemudian menggunakan nilai itu untuk menggambar beberapa bentuk yang sama dengan ukuran yang berbeda.
Kalau pada contoh sebelumnya kita tidak menggunakan loop untuk mengakses dan memberikan nilai pada sebuah array, maka selanjutnya kita akan menggunakan teknik ini untuk memanipulasi array.
Contoh: Membuat Beberapa Lingkaran
void setup() { size (1000, 600); smooth(); noStroke(); } void draw() { background (70);for (int i=0; i < 20; i++) {
ellipse (i*width/20+25, height/2, 20, 20);
} }
Kita bisa melihat bahwa dengan menggunakan loop kita bisa
membuat beberapa lingkaran dengan ukuran yang sama.
Sekarang, bagaimana kalau kita tetap ingin membuat 20
lingkaran, namun dengan ukuran yang berbeda?
Contoh: Membuat 20 Lingkaran Berbeda
int[] radiusArray; void setup() {
size (1000, 600);
radiusArray = new int[20];
for (int i=0; i < radiusArray.length; i++) { radiusArray[i] = (i+1)*2; } smooth(); noStroke(); } void draw() { background (70);
for (int i=0; i < 20; i++) {
ellipse (i*width/20+25, height/2, radiusArray[i], radiusArray[i]); }
• Array bernama radiusArray dibuat sebagai variabel global sehingga nilainya bisa diberikan sekali saja pada fungsi setup() dan selanjutnya bisa ditampilkan ke layar berkali-kali dalam fungsi draw().
• Ukuran dari radiusArray ini dituliskan pada setup() dan diberikan nilai 20, artinya array ini akan memuat 20 nilai, sesuai dengan banyak lingkaran yang akan digambar.
• Selanjutnya, loop for pertama, akan mengisi radiusArray dengan 20 nilai berbeda yang terus bertambah seiring dengan bertambahnya iterasi loop.
• Loop ini akan berjalan dari mulai i=0, hingga i=ukuran array radiusArray, atau bisa juga dinyatakan dengan pernyataan
Dengan demikian, ke-20 elemen pada array radiusArray akan memiliki nilai-nilai berikut secara berurutan:
radiusArray [0] = (0+1)*2; // nilai elemen ke-1 = 2 radiusArray [1] = (1+1)*2; // nilai elemen ke-2 = 4 radiusArray [2] = (2+1)*2; // nilai elemen ke-3 = 6 .
. .
Di dalam fungsi draw(), 20 lingkaran akan digambar dengan menggunakan fungsi ellipse().
Lingkaran-lingkaran ini digambar di dalam sebuah loop for agar kita tidak perlu berkali-kali menuliskan fungsi ellipse().
Masing-masing lingkaran akan digambar dengan argumen fungsi
ellipse() sebagai berikut:
ellipse (i*width/20+25, height/2, radiusArray[i], radiusArray[i])
Di mana i merujuk pada indeks iterasi, atau sudah pada iterasi ke berapa.
Keempat argumen pada ellipse() tersebut menunjukkan hal-hal di bawah ini: 1. Posisi titik tengah lingkaran pada sumbu X: i*width/20+25. Ini untuk
membuat lingkaran sepanjang sumbu X dan posisinya terus bergerak ke kanan seiring dengan bertambahnya lingkaran. Penambahan 25 dilakukan agar lingkaran bisa digambar di tengah layar secara utuh.
2. Posisi titik tengah lingkaran pada sumbu Y: i*height/2. Sudah jelas, ini
agar lingkaran-lingkaran yang digambar juga berada di tengah layar secara vertikal.
3. Jari-jari horizontal dan vertikal lingkaran: radiusArray[i]. Artinya, ukuran jari-jari lingkaran ke-i akan mengikuti nilai ke-i dalam array radiusArray. Penulisannya dilakukan dua kali karena fungsi ellipse()
membutuhkan 2 nilai jari-jari, yakni nilai horizontal dan vertikal secara berurutan.
Animasi dengan Array
int[] radiusArray; float angle = 0; void setup() {
size (1000, 600);
radiusArray = new int[20];
for (int i=0; i < radiusArray.length; i++) { radiusArray[i] = (i+1)*2; } smooth(); noStroke(); } void draw() { background (70);
for (int i=1; i < radiusArray.length; i++) {
ellipse (i*width/20, height/2, radiusArray[i]+(sin(radians(angle))*10), radiusArray[i]+(sin(radians(angle))*10)); angle+=0.1;
} }
• Kita tidak hanya menggunakan radiusArray[i] untuk menentukan ukuran lingkaran, tapi kita akan menambahkan nilai ini dengan hasil operasi sinus sehingga besar lingkaran akan bertambah dan mengecil.
• Hal ini terjadi karena, nilai sinus akan berubah secara dinamis seiring dengan pertambahan sudutnya.
• Nilainya akan berganti-ganti secara mulus dari 0, ke 1, ke -1, kembali lagi ke 0 dan seterusnya secara periodik.
• Operasi sinus dalam Processing dilakukan dengan menggunakan fungsi sin() dengan argumennya berupa sudut dalam radians. Penulisannya sebagai berikut:
• Karena lebih intuitif bagi kita untuk menulis sudut dalam satuan derajat dan bukan radians, maka kita bisa menggunakan fungsi radians() untuk mengkonversikan besaran sudut dalam derajat menjadi sudut dalam radians. Sehingga fungsi sin() bisa kita tuliskan sebagai berikut:
sin(radians(sudutdalamDerajat))
• Sudut dalam contoh tadi ditampung dalam variabel angle dan nilainya akan bertambah sebesar 0.1 setiap selesai 1 loop for berjalan. Ini diekspresikan dalam pernyataan angle += 0.1;. Untuk memperbesar efek dari operasi matematika ini, maka besar sudutnya dikalikan dengan 10. Sehingga operasi pertambahan sudut ini dinyatakan dengan pernyataan:
• Ini kemudian ditambahkan pada nilai dasar jari-jari lingkaran ke-i, hingga pernyataannya menjadi
radiusArray[i]+(sin(radians(angle))*10)
• Karena nilai variabel angle terus bertambah selama program berjalan, karena berlangsung di dalam fungsi draw(), maka besar lingkaran akan terus berubah di dalam program.
Array 2 Dimensi
Ini berbeda dengan array sebelumnya, di mana sebenarnya kita hanya menampung beberapa data dalam 1 dimensi. Ini serupa dengan membuat tabel berisi hanya 1 kolom atau 1 baris saja. Untuk menampung data yang lebih banyak, kita bisa menggunakan array 2 dimensi, hingga nantinya kita bisa bayangkan data yang kita miliki menjadi berbentuk tabel dengan dimensi kolom dan baris tertentu.
Teknik array 2 dimensi ini, nantinya akan berguna saat kita menampilkan dan memanipulasi gambar dan video. Karena pada dasarnya, baik gambar maupun video hanyalah array 2 dimensi dengan data warna pada posisi pixel tertentu pada layar.
Untuk membuat array 2 dimensi caranya mirip dengan membuat array 1 dimensi. Hanya saja kali ini kita tentukan secara eksplisit bahwa kita ingin membuat array 2 dimensi, dan ukurannya pun harus ditetapkan juga
Contoh Array 2 Dimensi
int cols = 4; int rows = 5; int[][] random2dArray; void setup() { size (200, 250);random2dArray = new int [cols][rows]; for (int i=0; i
Referensi
Pratomo, A. (n.d.). Membuat Animasi Interaktif dengan Processing. Retrieved April 15, 2021, from
