Hi, Akwan 👋

Visualisasi Insertion Sort menggunakan proccessing

April 19, 2020

Hello, kali ini kita akan membahas bagaimana membuat visualisasi insertion sort menggunakan processing.

Visualisasi Insertion sort menggunakan proccessing

Apa metode insertion sort ?

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.

Apa itu aplikasi Proccessing ?

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 :