Wednesday, 15 September 2010

Segitiga dari Kotak (3)

Tulisan ini merupakan lanjutan dari:
Segitiga dari Kotak (1)
Segitiga dari Kotak (2)


Bagaikan air yang mengalir dari atas ke bawah.


Sekarang kita lanjutkan kebagian bagaimana program ini bekerja atau alur dari program. Kita langsung masuk ke loop (pengulangan) while atau loop utama program kita. Pertama adalah memperoleh detik awal pengulangan yang berfungsi untuk mengatur FPS (Frame Per Second) yang akan diproses selanjutnya pada akhir statement loop. Kedua adalah proses kontrol program dengan SDL_PollEvent(). Kita hanya membuat sebuah kondisi jika tombol panah kiri atau kanan ditekan, maka akan mengatur nilai dari variabel jumlahKotak. Kondisinya membatasi var jumlahKotak dengan jumlah minimal 3 dan maksimal 25. Dan tombol Escape untuk keluar atau menutup program.

Selanjutnya proses pengambaran pada fungsi SegitigaDariKotak() sesudah memberi alas pada layar (screen) dengan warna biru muda dengan SDL_FillRect(). Untuk argumen kedua fungsi, jumlah kotaknya disesuaikan dengan var jumlahKotak. Sebetulnya lebih tepat dibilang jumlah baris berbentuk kotak pada segitiga dibanding jumlah kotak yang lebih mengarah pada banyaknya kotak yang tampil, benar nggak? - sebodoh ah (pengacau bahasa). Dunia pemrograman memang penuh dengan singkatan, hehehe . Pada fungsi SegitigaDariKotak(), variabel Size akan mempermudahkan kita dalam mengatur tata letak, ukuran kotak dan segala perhitungannya. Variabel global red, green, dan blue berfungsi untuk mengatur warna yang tampil pada kotak agar lebih variatif.

Bagian utama dalam program ini adalah pengulangan for didalam fungsi SegitigaDariKotak() ini. Kita mulai dari koordinat x dan y. Meletakkannya secara manual selain membuat kode program menjadi panjang dan belum tentu rata/rapi. Belum lagi bagaimana caranya apakah menggunakan kondisi if? (jadi bingung sendiri ). So, perhatikan kode utama program kita:


...
    for(int c=1;c<=jumlah;c++)
    {
        int _X = (lebar_layar/2 - c*Size/2);
        int _Y = (tinggi_layar/2 - jumlah*Size/2)+ (c-1)*Size;

        //_blok = membuat blok hitam
        SDL_Rect _blok = {_X,_Y,c*Size,Size};
        SDL_FillRect(screen,&_blok,SDL_MapRGB(screen->format,0,0,0));

        for(int d=0;d<c;d++)
        {
            SDL_Rect _kotak = {_X+(d*Size)+2,_Y+2,Size-4,Size-4};
            SDL_FillRect(screen,&_kotak,SDL_MapRGB(screen->format,
                (c*3+red)%255,green%255,blue%255));
        }
    }
...

Sebelum melanjutkan, jika anda kurang jelas dengan SDL_Rect silahkan membaca kembali postingan sebelumnya. Sudah? Ok kita lanjutkan, dengan membuat variabel _X dan _Y agar nilainya dapat diterapkan pada kotak (SDL_Rect) _blok dan _kotak. Ini untuk menghindari perhitungan koordinat sebanyak 2 kali. Jika jumlah sama dengan 5, maka nilai _X didapat dari perhitungan lebar_layar (dalam program ini 640) dibagi 2 atau setengahnya lebar_layar dikurang c*Size/2 (misal Size = 35 hasil dari 40 - 5, dan berada pada pengulangan kedua - c = 2), sehingga _X = 640/2 - 2*35/2 = 320 - 35 = 285. Jika c diawali dengan 0 (int c=0, c < jumlah) maka untuk memperoleh nilai _X adalah seperti berikut _X = (lebar_layar/2 - (c+1)*Size/2), tetapi akan ada beberapa perubahan kode disana-sini. Sedangkan y diperoleh dari setengah tinggi_layar (dalam program ini 480) dikurang jumlah*Size/2 setelah itu ditambah (c-1)*Size, sehingga nilai _Y pada pengulangan kedua adalah _Y = (480/2 - 5*35/2) + (2-1)*35 = (240 - 87) + 35 = 153 + 35 = 188. So, untuk blok (yang warnain hitam) pada pengulangan ke-2 dengan jumlahKotak = 5 memiliki koordinat (285,188). Jika digambarkan akan seperti berikut:

Gambar 1. Mari kita letakkan yang rapi.

Dimana c1a = c1b, dan c2a = c2b. Itu untuk koordinatnya sedangkan untuk pengambarannya dibagi menjadi 2 bagian, yaitu blok dan kotak. Dimana blok untuk membuat seakan-akan ada garis tepi pada kotak, dan kotak adalah bentuk aslinya. Blok kita beri warna hitam (RGB = 0,0,0), dan untuk kotak kita buat sesuai nilai dari variabel red, green, dan blue. Koordinat kotak kita beri sedikit jarak 2 px (px = pixel, baik x maupun y) serta lebar dan tingginya dikurangi 4 px. Supaya saat pengambaran lebih menyatu dengan si blok dan bentuknya jelas, tidak seperti berikut:

Gambar 2. (a) Tanpa menggunakan blok dan (b) dengan blok, hanya saja kotak menambah 2 px untuk x dan y tetapi lebar dan tingginya tidak dikurangi 4 px.

Dengan ini diharapkan sudah mengerti alur dari program yang kita buat ini sehingga kita dapat membuat program sejenis yang lebih hebat lagi. So, happy coding.

- krofz

No comments:

Post a Comment

Maaf jika komentar anda lama terbitnya ^__^, penulis berusaha OL sesering mungkin. Komentar anda adalah semangat blog ini, dan juga semangat para blogger lainnya. You can use XHTML tags: <a href="" rel="link"> </a>, <strong> </strong>, <b> </b>, <em> </em>, <i> </i>.

Spesial character use :
&lt; for <
&gt; for >


Use Pastebin.com for alternative to display your code :) .

 

back to top

back to top