Array adalah himpunan dari beberapa nilai yang berbeda. Kalau 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.
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
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
data[0]=10;
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.
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;
data = new int[10];
Penulisan lengkapnya adalah sebagai berikut:
Contoh 5-1 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
}
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.
Sebelumnya, mari kita gunakan contoh sederhana untuk menggambar beberapa lingkaran yang sama di tengah layar
Contoh 5-2 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? Jawabannya, tentu saja dengan menggunakan array.
Tekniknya adalah sebagai berikut. Kita simpan 20 nilai yang berbeda dalam sebuah array. Selanjutnya, masing-masing nilai dalam array ini akan kita gunakan untuk menentukan ukuran ke-20 lingkaran yang bersesuaian. Sehingga nilai pertama dalam array akan mengatur ukuran jari-jari lingkaran pertama, nilai kedua untuk lingkaran kedua, dan seterusnya. Code Processing-nya bisa ditulis sebagai berikut:
Contoh 5-3 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]);
}
}
Di Contoh 5-3, kita telah membuat 20 lingkaran dengan ukuran yang berbeda-beda pula. 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
radiusArray.length //mengembalikan ukuran array
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
.
.
.
radiusArray [19] = (19+1)*2; // nilai elemen ke-20 = 40
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:
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.i*height/2. Sudah jelas, ini agar lingkaran-lingkaran yang digambar juga berada di tengah layar secara vertikal.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.Dengan menggunakan teknik ini, maka kita bisa membuat 20 lingkaran dengan 20 ukuran berbeda. Ini dimungkinkan karena kita bisa mengakses setiap elemen terpisah dalam array dan menggunakannya untuk menentukan ukuran lingkaran. Selanjutnya, dengan menggunakan sedikit perhitungan matematis, kita bisa juga mengembangkan lebih lanjut Contoh 5-3 tadi untuk menganimasikan lingkaran, membuat masing-masing lingkaran bergerak membesar dan mengecil secara dinamis. Perhatikan contoh berikut:
Contoh 5-4 Menganimasikan 20 Lingkaran Berbeda
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;
}
}
Ada sedikit penambahan yang kita lakukan dari Contoh 5-3 sebelumnya. Kali ini, 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. Ini karena, sebagaimana kita ketahui, 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:
sin(sudutDalamRadians)
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:
sin(radians(angle))*10
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.
Latihan 5-1
Konsep Array yang telah diterangkan sebelumnya, kemudian bisa lagi kita kembangkan menjadi 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. Mari kita buat array 2 dimensi, berukuran 5 baris dan 4 kolom berisi 20 angka acak dari 10 sampai 100
Contoh 5-4 Membuat 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