Titik dan Garis

Assalamu'alaikum .......

Halo guys, kali ini saya akan posting tentang elemen dasar citra/tampilan pada monitor/layar/display alat-alat digital.  Tentunya kaitannya dengan kommputer grafik.

Elemen dasar dari citra adalah titik, dimana biasa sering didengar oleh telinga kita ada kata-kata piksel, dot, resolusi dst.

Garis dan citra apapun pada komputer atau media penampil digital selalu ditampilkan dalam kumpulan titik-titik.

Berkaitan dengan hal tersebut, maka perintah dasar pada pemrograman di java titik direpresentasikan dalam perintah dasar g.fillRect, seperti terlihat pada penggalan program berikut :

 
    g.fillRect(100, 100, 200, 100 ); // (x, y, width x, width y) rectangle dg block

Dari perintah tersebut, terlihat ada format baku yang harus diketahui, yaitu :

    g.fillRect(x, y, width x, width y );

dimana :
x dan y adalah koordinat sebelah kiri atas tempat titik akan ditempatkan
width x adalah lebar titik searah sumbu x
width y adalah lebar titik searah sumbu y

Pada perintah di atas, maka akan diperoleh tampilan seperti pada gambar 1.

Gambar 1

Terlihat bahwa titik sudut kiri atas adalah (100,100) dan panjang searah sumbu x adalah 200 dan tinggi searah sumbu y adalah 100.

Kalau misalnya x width dan y width tidak seperti pada penggalan program di atas, maka tampilan akan berbeda. 

Misalnya akan dibuat garis lurus ke kanan sepanjang 400 dengan ketebalan y=1 (y width = 1), maka perintahnya adalah sebagai berikut :

 g.fillRect(100, 100, 400, 1 );

Maka tampilannya akan menjadi seperti terlihat pada gambar 2.

Gambar 2. 

Pada gambar 2 terlihat bahwa garisnya tipis.  Hal itu terjadi karena perintah :

g.fillRect(100, 100, 400, 1 );

Sehingga dapat diperoleh kesimpulan bahwa kalau diinginkan membuat garis, maka ketebalannya bisa diatur sesuai dengan keinginan dengan memanipulasi x width dan y width.

Kalau dikehendaki garisnya tegak lurus, maka bisa diperoleh dengan cara  : ketebalan searah sumbu x harus = 1 agar diperoleh kesan menjadi garis yang tipis. Sedangkan arah ke bawah bisa diperoleh dengan cara memberikan perintah pada y width dengan nilai sesuai dengan panjang yang diinginkan.  Misalkan panjangnya pengin 400 point ke bawah, maka perintahnya menjadi

        g.fillRect(100, 100, 1, 400 ); terlihat pada nilai y width = 400 dan x width =1 .

Dengan perintah tersebut, maka akan diperoleh tampilan seperti pada gambar 3.

Gambar 3

Terlihat pada gambar 3, bahwa garisnya adalah ke bawah dimulai dari titik (100,100) sepanjang 400 point (titik).

Perintah perintah tersebut hanya bisa dipakai untuk membuat garis lurus ke arah horizontal dan vertikal saja.  Sehingga apabila diinginkan garis miring maka perintah yang dipakai adalah dengan memberikan perintah titik berulang-ulang dengan memindahkan koordinat awal peletakan yang berbeda-beda.

ohhhh....terus bagaimana untuk membuat garis miring ? kan tidak asyik kalau tidak ada yang miring !!!........OMG......bagaimana ya ?

Jangan takut dan jangan khawatir, saya sudah sediakan amunisi jawabannya. dan amunisi tersebut tidaklah membuat kita kaget dan terkejut, karena sudah biasa........eh......biasa ya ?     iya....biasa ngga ngerti !!!! ....xiixixixixii

Misalnya awal titik adalah (100,100), maka titik berikutnya adalah (101,101), berikutnya (102,102), begitu seterusnya, maka akan menjadi titik yang miring dari kiri atas ke kanan bawah.

Gambar 5.

Pada gambar 5, terlihat bahwa garis miring tersebut diperoleh dengan cara menghitung delta x (perubahan searah sumbu x) dan delta y (perubahan searah sumbu y).

Terlihat bahwa delta x = 100 dan delta y = 100.  Artinya bahwa gambar tersebut miring ke kanan bawah 45 derajat (karena delta x = delta y).

Gambar 5 diperoleh dengan membuat titik berulang-ulang, dengan memindahkan posisi titik awalnya (g.fillRect(100, 100, 1, 400 );

Perintah yang diberikan untuk menghasilkan gambar 5 adalah sebagai berikut :




int jumlahtitik = 0;
    while (jumlahtitik <=100){
        g.fillRect(100+jumlahtitik , 100+jumlahtitik, 1, 1);
        jumlahtitik++; } //counter naik

Lihat proses perintah pengulangannya.

Kalau diinginkan garis miring ke kiri bawah, apa yang harus dilakukan ?

Gambar 6

Adiiiiii....pung pusing laiii.......

Garis miring ke kiri bawah, itu artinya bahwa nilai delta x berkurang dan nilai delta y bertambah.

Coba lihat gambar 6.

Terlihat bahwa arah sumbu x nya adalah ke kiri bukan ke kanan (artinya nilai x berkurang) dan arah sumbu y ke bawah bukan ke atas (artinya nilai y bertambah)

Untuk memperoleh gambar 6, perintah yang diberikan adalah sebagai berikut :

int jumlahtitik = 0;
    while (jumlahtitik <=100){
        g.fillRect(200-jumlahtitik , 200+jumlahtitik, 1, 1);
        jumlahtitik++; } //counter naik

Coba perhatikan perintah berikut :

       g.fillRect(200-jumlahtitik , 200+jumlahtitik, 1, 1);

Pada sisi koordinat x, nilainya dikurangi sedangkan nilai koordinat y nya ditambah, seperti uraian saya sebelumnya.

oooh........begitulah ternyata.......

Jadi and so......tidak ada yang sulitkan .....silahkan berkreasi.
Wassalamu'alaikum