Gambar 1. Tampilan Layar Sebuah Program Animasi

Transkripsi

1 Menggambar Kotak (Ed. 2) 1/6 Lecture Notes Algoritma dan Pemrograman Menggambar Kotak Thompson Susabda Ngoen Di dalam penulisan program adakalanya kita perlu menggambar kotak (bingkai segi empat) di layar komputer agar tampilan menjadi lebih indah. Compiler yang digunakan harus mempunyai function-function untuk mengatur posisi cursor di layar komputer, seperti gotoxy() yang didefinisikan di berkas header conio.h pada compiler Turbo C dan Borland C IDE Dev-C++ juga mempunyai function ini di berkas header conio2.h. A. Koordinat Titik Gambar 1. Tampilan Layar Sebuah Program Animasi Data apa yang kita perlukan agar kotak tersebut bisa digambar? Ya, koordinat kotak tersebut. Sebuah kotak mempunyai empat titik. Berapa titik koordinat yang diperlukan? Keempat titik? Dua titik saja? Dua titik yang mana? atas dan kiri bawah? Misalkan keempat titik kotak kita beri nama A, B, C, dan D. Misalkan kolom kiri kotak adalah x1, kolom kanan kotak adalah x2, baris atas kotak adalah y1, dan baris bawah kotak adalah y2. Dengan demikian titik A berkoordinat x1, y1; titik B berkoordinat x2, y1; titik C berkoordinat x2, y2; dan titik D berkoordinat x1, y2. Gambar 2. Koordinat Kotak Jika koordinat yang diambil adalah titik A dan B maka kita mendapat data x1, x2, dan y1, sebanyak 3 data, tidak ada data y2. Jika koordinat yang diambil adalah titik A dan D maka

2 Menggambar Kotak (Ed. 2) 2/6 kita mendapat data x1, y1, dan y2, sebanyak 3 data, tidak ada data x2. Jika koordinat yang diambil adalah titik-titik diagonal A dan C maka kita mendapat data x1, y1, x2, y2. Sama halnya jika kita menggunakan koordinat titik B dan D maka kita mendapat data x1, y1, x2, y2. Jadi data yang diperlukan adalah koordinat kedua titik diagonal. B. Cara Pertama Kotak ini terdiri atas 8 bagian: karakter kiri atas (a), garis horisontal atas (b), karakter kanan atas (c), garis vertikal kanan (d), karakter kanan bawah (e), garis horisontal bawah (f), karakter kanan bawah (g), dan garis vertikal kiri (h). Gambar 3. Komponen Kotak Hal yang harus diingat adalah bahwa cursor yang berada di koordinat (x, y) setelah mencetak satu karakter akan pindah ke koordinat (x+1, y). Jika posisi cursor saat pencatakan berada di kolom 80, maka cursor akan pindah ke kolom satu baris berikutnya. Pada cara pertama kita menggambar kotak dengan urutan searah putaran jarum jam mulai dari pojok kiri atas: a, b, c, d, e, f, g, dan h. a adalah (karakter ASCII berkode 201) pada koordinat (x1, y1) b adalah sejumlah potongan garis horisontal (karakter ASCII berkode 205) pada koordinat (x1+1, y1), (x1+2, y1), sampai dengan (x2-1, y1). c adalah (karakter ASCII berkode 187) pada koordinat (x2, y1). d adalah sejumlah potongan garis vertikal (karakter ASCII berkode 186) pada koordinat (x2, y1+1), (x2, y1+2), sampai dengan (x2, y2-1). e adalah ( karakter ASCII berkode 188) pada koordinat (x2, y2). f adalah sejumlah potongan garis horisontal pada koordinat (x1+1, y2), (x1+2, y2), sampai dengan (x2-1, y2). g h adalah (karakter ASCII berkode 200) pada koordinat (x1, y2). adalah sejumlah potongan garis vertikal pada koordinat (x1, y1+1), (x1, y1+2), sampai dengan (x1, y2-1). Karakter kiri atas dicetaka dengan instruksi gotoxy(x1, y1); printf("%c",201); /*** a ***/ Setelah selesai mencetak a cursor berada di koordinat (x1+1, y1). Ini adalah koordinat awal untuk mencetak b. Jadi posisi cursor sudah tepat dan tidak perlu diatur kembali dengan gotoxy( ). Pada saat mencetak b posisi baris selalu berada di y1 sedangkan posisi kolom berubah-ubah mulai dari x1+1 ke kanan sampai dengan x2-1. Posisi kolom ini yang perlu dikendalian misalnya dengan variabel i. for (i = x1 + 1; i <= x2-1; i++) /*** b ***/ printf("%c", 205);

3 Menggambar Kotak (Ed. 2) 3/6 Setelah selesai mencetak b cursor berada pada koordinat (x2, y1), tepat di koordinat untuk mencetak c. Jadi c dapat langsung dicetak tanpa harus terlebih dahulu memindahkan cursor. printf("%c", 187); /*** c ***/ Setelah selesai mencetak c cursor berada pada koordinat (x2+1, y1). Ini bukan posisi awal untuk mencetak garis vertikal d yang berada pada koordinat (x2, y1+1). Hal lain yang perlu diperhatikan adalah setelah mencetak satu ruas garis vertikal cursor pindah ke kolom di sebelah kanannya sedangkan ruas garis vertikal berikutnya harus berada tepat di bawah ruas garis vertikal yang telah dicetak. Artinya posisi kolom harus selalu berada pada x2 sedangkan setiap selesai mencetak satu ruas garis cursor berada pada posisi kolom x2+1. Oleh karena itu sebelum mencetak setiap ruas garis vertikal, cursor harus dipindahkan dulu ke kolom x2. Posisi baris ruas garis berubah-ubah mulai dari y1+1 sampai dengan y2-1. Posisi baris ini perlu divariabelkan, misalnya dikendalian oleh pencacah i. for (i = y1 + 1; i <= y2-1; i++) { /*** d ***/ gotoxy(x2, i); printf("%c", 186); Sebelum mencetak e pindahkan cursor ke posisi (x2, y2). gotoxy(x2, y2); printf("%c", 188); /*** e ***/ Garis horisontal f dapat dicetak dari arah kanan ke kiri atau dari kiri ke kanan. Misalkan kita mencetaknya dari kanan ke kiri. Ruas garis ini selalu berada pada baris y2 sedangkan kolomnya berubah-ubah mulai dari x2-1, x2-2, mundur terus sampai kolom x1+1. Kendalikan posisi kolom dengan sebuah pencacah. for(i = x2-1; i >= x1 + 1; i--) { /*** f ***/ gotoxy(i, y2); printf("%c", 205); Karakter g harus dicetak pada koordinat (x1, y2) sedangkan saat ini cursor berada di koordinat (x1+1, y2). Oleh karena itu cursor perlu dipindahkan sebelum mencetak. gotoxy(x1, y2); printf("%c", 200); /*** g ***/ Pencetakan garis vertikal h mirip dengan pencetakan garis vertikal d, cursor harus diatur setiap kali seruas garis dicetak. for (i = y2-1; i >= y1 + 1; i--) { /*** h ***/ gotoxy(x1, i); printf("%c", 186); Kedelapan bagian ini kita gabung menjadi Program # include <stdio.h> # include <conio2.h> int main() { int x1, y1, x2, y2, i; Program 1. Menggambar Kotak (A) scanf("%d %d %d %d", &x1, &y1, &x2, &y2); gotoxy(x1, y1); printf("%c",201); /* a */ for (i = x1 + 1; i < x2; i++) printf("%c", 205); /* b */ printf("%c", 187); /* c */ for (i = y1 + 1; i < y2; i++) { /* d */ gotoxy(x2, i); printf("%c", 186);

4 Menggambar Kotak (Ed. 2) 4/ gotoxy(x2, y2); printf("%c", 188); /* e */ for(i = x2-1; i > x1; i--) { /* f */ gotoxy(i, y2); printf("%c", 205); gotoxy(x1, y2); printf("%c", 200); /* g */ for (i = y2-1; i > y1; i--) { /* h */ gotoxy(x1, i); printf("%c", 186); return 0; C. Cara Kedua Pada cara ini urutan pencetakan karakter pembentuk kotak tidak runut, yang penting kotaknya jadi. Jika diperhatikan ternyata ada kemiripan pencetakan garis b dan f. Perbedaannya hanya pada posisi baris. Demikian juga dengan kemiripan pencetakan garis vertikal d dan h. Perbedaannya hanya pada posisi kolom. Jadi apabila yang dipentingkan adalah hasil akhir maka urutan pencetakan dapat diubah agar program lebih efisien. Urutan pencetakan adalah a, c, e, g, b dan f, d dan h # include <stdio.h> # include <conio2.h> int main() { int x1, y1, x2, y2, i; Program 2. Menggambar Kotak (B) scanf("%d %d %d %d", &x1, &y1, &x2, &y2); gotoxy(x1, y1); printf("%c", 201); /* a */ gotoxy(x2, y1); printf("%c", 187); /* c */ gotoxy(x2, y2); printf("%c", 188); /* e */ gotoxy(x1, y2); printf("%c", 200); /* g */ for (i = x1 + 1; i < x2; i++) { gotoxy(i, y1); printf("%c", 205); /* b */ gotoxy(i, y2); printf("%c", 205); /* f */ for (i = y1 + 1; i < y2; i++) { gotoxy(x2, i); printf("%c", 186); /* d */ gotoxy(x1, i); printf("%c", 186); /* h */ return 0; D. Kotak Berbagai Bentuk Garis Pada kedua contoh di atas karakter pembentuk kotak adalah garis ganda. Selain bentuk garis ganda mungkin ada baiknya jika program kita bisa mengakomodasi pencetakan kotak dengan bentuk garis lain. Instruksi-instruksi pencetakan kotak kita jadikan sebuah function dengan parameter: 1) koordinat kiri atas, 2) koordinat kanan bawah, 3) kode bentuk garis. Parameter ketiga ada kode bentuk garis, bukan kedelapan karakter pembentuk kotak. Hal ini dilakukan agar mudah bagi instruksi yang memanggil function ini, cukup kirimkan kode kotaknya. Bentuk garis kotak ada empat jenis seperti ditunjukkan Tabel 1. Karakter pembentuk garis horizontal atas dan bawah sama. Karakter pembentuk garis vertikal kiri dan kanan sama. Walaupun demikian kita menggunakan larik delapan karakter untuk memudahkan membayang bentuk karakter yang dimaksud.

5 Menggambar Kotak (Ed. 2) 5/6 Tabel 1. Berbagai Bentuk Garis Kotak Kode Kotak Bentuk Atas Atas Kanan Atas Kode ASCII Karakter Kanan Bawah Bawah Bawah # include <stdio.h> # include <conio2.h> Program 3. Menggambar Kotak (C) void kotak (int x1, int y1, int x2, int y2, int kode) { char kar[8]; int i; switch(kode) { case 1: kar[0] = 218; kar[1] = 196; kar[2] = 191; kar[3] = 179; kar[4] = 217; kar[5] = 196; kar[6] = 192; kar[7] = 179; break; case 2: kar[0] = 213; kar[1] = 205; kar[2] = 184; kar[3] = 179; kar[4] = 190; kar[5] = 205; kar[6] = 212; kar[7] = 179; break; case 3: kar[0] = 214; kar[1] = 196; kar[2] = 183; kar[3] = 186; kar[4] = 189; kar[5] = 196; kar[6] = 211; kar[7] = 186; break; case 4: kar[0] = 201; kar[1] = 205; kar[2] = 187; kar[3] = 186; kar[4] = 188; kar[5] = 205; kar[6] = 200; kar[7] = 186; gotoxy(x1, y1); putchar(kar[0]); /* a */ gotoxy(x2, y1); putchar(kar[2]); /* c */ gotoxy(x2, y2); putchar(kar[4]); /* e */ gotoxy(x1, y2); putchar(kar[6]); /* g */ for (i = x1 + 1; i < x2; i++) { gotoxy(i, y1); putchar(kar[1]); /* b */ gotoxy(i, y2); putchar(kar[5]); /* f */ for (i = y1 + 1; i < y2; i++) { gotoxy(x2, i); putchar(kar[3]); /* d */ gotoxy(x1, i); putchar(kar[7]); /* h */ int main() { int x1, y1, x2, y2, kode; scanf("%d %d %d %d %d", &x1, &y1, &x2, &y2, &kode); kotak (x1, y1, x2, y2, kode); return 0;

6 Menggambar Kotak (Ed. 2) 6/ SOAL LATIHAN 1. Tulis function untuk menampilkan kotak dengan urutan yang simetri: kiri tengah atas, kanan tengah atas, kiri tengah bawah, kanan tengah bawah berakhir di tengah kiri dan kanan. 2. Tulis function untuk menampilkan kotak dengan membentuk serangkaian kotak berukuran lebih kecil tapi proporsional dengan ukuran kotak yang diinginkan seperti diilustrasikan gambar di bawah ini. Ketika menggambar kotak berikutnya hapus kotak sebelumnya. Semua kotak-kotak tersebut mempunyai koordinat kiri atas yang sama seperti diilustrasikan gambar di bawah ini.