Hello, kali ini kita akan membahas bagaimana membuat visualisasi insertion sort menggunakan processing.
Sebelum membuat visualisasi insertion sort kita akan membahas apa sebenarnya apa itu metode insertion sort ? Metode insertion sort adalah satu dari banyaknya metode pengurutan lainnya dalam pemrograman. Pada dasarnya konsep insertion sort ini seperti susunan kartu yang berada di tangan kita. dimana kita akan menerima susunan kartu secara acak, lalu perlahan kita mulai membandingkan kartu tersebut hingga menjadi susuhan yang sesuai pada tempatnya.
Hal ini sama dalam program dimana ada data acak yang akan diberi ke dalam program / inputan . Lalu terjadi perulangan dimana perulangan akan terus dilakukan hingga iterasi(i) nya kurang dari panjang data(n) yang diberikan lalu apa yang terjadi di dalam perulangan ?. Didalam perulangan inilah yang akan terjadi proses swap. Selama nilai pertama kurang dari nilai kedua maka akan terjadi proses swaping / pindah nya suatu nilai ke indeks lain.
“Processing is an open-source graphical library and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities with the purpose of teaching non-programmers the fundamentals of computer programming in a visual context.” wikipedia Nah pada intinya proccesing adalah suatu aplikasi open source yang berguna untuk membuat suatu membuat atau memprogram suatu gambar, animasi dan interaksi.
Nah setelah mengerti tentang insertion sort dan aplikasi proccessing sekarang kita akan membuat simple visualisasi insertion sort dengan proccessing.
Buka aplikasi proccessing kalian lalu masukan kode di bawah.
int[] values;
int i = 1;
void setup() {
// buat playgroud
size(700, 400);
// set nilai values sama dengan nilai width dari size
values = new int[width];
for (int i = 0; i < values.length; i++){
// masukan angka acak sesaui dengan indeks values
values[i] = int(random(height));
// print nilai values berdasarkan indeks ke console
print(values[i] + ", ");
}
}
void draw() {
// set warna background playground
background(0);
// set warna text
fill(225);
// set ukuran text
textSize(20);
// tambahkan teks i
// dikordinat tinggi: 20, lebar: 20 dari playground
text(i,20,20);
// jika nilai i kurang dari panjang values
if(i < values.length) {
// inisialisasi nilai key sama dengan values indeks ke i
int key = values[i];
// inisialisasi nilai j sama dengan i kurang 1
int j = i -1;
// selama nilai nilai dari j lebih dari 0 dan nilai values
// indeks ke j lebih dari key
while(j >= 0 && values[j] > key) {
// proses swapping
// nilai dari values indeks j + 1
// di isi dengan values indeks ke j
values[j+1] = values[j];
// set nilai j dikurangi 1;
j = j -1;
}
// set kembali nilai values indeks ke j + 1 menjadi key
values[j + 1] = key;
} else {
// jika kondisi if tidak terpenuhi perulangan di hentikan
noLoop();
print("finish");
}
// selama perulangan berlangsung i akan ditambah 1
i++;
// draw
for (int i = 0; i < values.length; i++){
// set warna stroke menjadi putih(255)
stroke(255);
// set line dengan nilai dari perulangan
line(i, height, i, height - values[i]);
}
}
Tampilan saat program visualisasi dijalankan
Oke sekian pembahasan mengenai membuat visualisasi insertion sort menggunakan proccessing semoga bermanfaat 🚀️.
Referensi :