Modul1 Grafika

BAHAN AJAR

GRAFIKA KOMPUTER (Kode : MK3110215)

Oleh : Agus Limbang Wardani, S.Kom

PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS PGRI YOGYAKARTA 2006

BAB I PENGANTAR GRAFIKA KOMPUTER Pengertian Grafika Komputer Grafika komputer merupakan studi tentang bagaimana membuat gambar/grafik dan bagaimana memanipulasinya dengan menggunakan komputer. Perbedaan antara Picture/gambar, graphics/grafik dan Image/citra : Picture/gambar

: Paling luas/umum. Mencakup grafik dan citra.

Graphics/grafik

: Gambar yang dibuat dengan dengan cara dan aturan tertentu tanpa alat perekam gambar.

Image/citra

: Gambar yang diambil dengan alat pengambil gambar ( kamera, satelit, foto, sidik jari, scan dll)

Sistem Grafika Komputer Sistem komputer baik itu perangkat lunak ataupun keras untuk membuat gambar/grafik dan memanipulasinya. Sistem grafika komputer dibedakan menjadi dua yaitu : •

Non-interaktif Grafika non-interaktif dibuat sebagai akhir dari proses dalam bentuk hardcopy. Contoh : Printer, Plotter dll

•

Interaktif Grafika interaktif dapat dibuat dan dimanipulasi secara interaktif pada layar peranti peraga. Peranti-peranti peraga interaktif yang paling umum digunakan : CRT (Tabung sinar katoda). Lain-lain : Plasma, LCD, laser, dsb.

Prinsip CRT Pemendaran phosfor pada layar (permukaan dalam tabung bagian depan) setelah ditembak berkas elektron. Untuk mengatur ketajaman berkas, digunakan suatu focusing system, suatu anoda bercelah sempit. Berkas elektron yang menyebar disaring oleh celah hingga tersisa lintasan berkas yang tipis. Kadang-

kadang ditambah suatu akselerator elektron, juga berupa anoda bercelah. Berkas ini lalu diarahkan ke deflektor. Kerja Deflektor Deflektor elektrostatis : berupa dua pasang lempeng (deflektor), satu pasang sebagai pengarah vertikal dan yang lainnya pengarah horisontal. Arah berkas di atur dengan merubah-rubah voltase lempeng. Deflektor magnetis mengatur medan magnit (atau medan listrik) di ruang antara lempeng yang dilalui berkas. Refresh CRT Karena pemendaran phosfor hanya terjadi sesaat maka untuk bisa berpendar terus menerus dilakukan pemendaran berulang, istilahnya mengalami refresh. Persistensi Lamanya partikel phospor yang berpendar (mulai saat menerima elektron hingga pendarannya masih dianggap nyala oleh mata atau tinggal 10% dari maksimum). Aplikasi animasi memerlukan persistensi yang lebih rendah. Aplikasi peragaan statis memerlukan persistensi yang lebih tinggi. Refresh Rate Berapa kali

(frekuensi) refresh dilakukan dalam satu detiknya. Bila

rendah maka akan terjadi kedipan (flickering). Semakin tinggi semakin baik hingga > kecepatan maksimum dimana mata masih dapat menangkap kedipan 60 Hz

(60 frame/sec)

Resolusi Jumlah posisi maksimum titik pada layar yang dapat diperagakan tanpa overlap. Resolusi ditentukan oleh jenis phospor dan sistem fokus dan defleksinya.

Bandwidth Monitor Satuan yang sering digunakan sebagai spesifikasi teknis monitor, yang menyatakan kecepatan elektron gun melakukan satu perioda on-off (on ketika menembak satu pixel dan off ketika berpindah ke pixel yang lain) per detik.

Aspect Ratio Perbandingan jumlah titik vertika dengan horisontal untuk menghasilkan garis yang sama panjangnya pada masing-masing arah. Scan Line Satu baris penyapuan (scanning) berkas pada layar, biasanya dinomori 0,1,2,… interlace vs. non-interlace urutan baris yang disapu bisa interlace (setiap scanline bernomor genap lalu yang bernomor ganjil) atau non-interlace (secara berurutan semua scanline). Monitor LCD Suatu kristal cair akan memiliki polaritas tertentu bila mendapatkan medan listrik. Jika digabungkan dengan dua lapis polaritas filter cahaya maka komposisi panel-panel tersebut berfungsi sebagai “pintu” yang dapat membuka-tutup terkendali oleh medan listrik pixel yang bersangkutan. Resolusinya ditentukan oleh kerapatan elektrodanya. Pencahayaannya sederhana (mis. Untuk kalkulator) : menggunakan cahaya ruangang yang dipantulkan oleh lapisan reflektor dibelakang lapisan-lapisan tsb. Piranti-piranti Hardcopy Dot Matrix Printer, Plotter, Laser Printer, Ink-Jet Printer, foto.

BAB II Membentuk Gambar dengan Titik (pixel) A. Tujuan 1. Mahasiswa dapat memahami objek dasar suatu gambar. 2. Mahasiswa dapat membuat berbagai bentuk geometri dasar menggunakan titik dengan kontrol pada delphi. 3. B. Dasar Teori Semua gambar yang dihasilkan oleh komputer pada dasarnya adalah rangkaian dari titik-titik (pixel) yang diatur warna dan kecerahannya. Properti yang digunakan dalam delphi untuk membuat suatu gambar adalah Canvas. Sintaks : Cannvas.Pixels[X,Y];

Ket : X,Y merupakan koordinat piksel. C. Uji Coba 1. Membuat titik-titik di sembarang tempat.

Image

Panel

kode program dengan Delphi : Perintah pada Event-OnMouseDown pada Image : var w:TColor; begin Image1.Canvas.Pixels[x,y] := random(w); end;

2. Membuat garis dengan menggunakan kumpulan titik.

Kode Program dengan delphi : Perintah pada Even-OnClick pada tombol Gambar : var a,b : integer; begin b:= 0; for a := 0 to 100 do begin image1.Canvas.Pixels[a,b] := clred; b:= b+1; end; end;

D. Tugas Praktikum Dengan menggunakan perintah titik, buatlah objek 2D sebagai berikut : •

Bujur Sangkar

•

Segitiga sama kaki

•

Segitiga sama sisi

•

Bintang

•

Pentagon

BAB III Membuat Geometri Dasar A. Tujuan Mahasiswa dapat membuat berbagai bentuk geometri dasar seperti garis, kotak, lingkaran dengan menggunakan kontrol pada delphi. B. Dasar Teori Pada bab sebelumnya telah dijelaskan bagaimana sebuah titik membentuk suatu bidang tertentu. Pada pemrograman Delphi dapat dibangun bentukbentuk bidang tertentu secara langsung tanpa merangkaikan titik. Obyek Canvas tetap digunakan untuk menempatkan gambar yang akan dibuat. Selain menempatkan gambar, obyek canvas juga memiliki properti untuk merubah warna, ukuran garis, jenis font dll. Beberapa perintah dalam membuat bentuk geometri dasar : •

Garis Canvas.MoveTo(x,y) : menempatkan posisi awal garis Canvas.LineTo(x,y) : menempatkan posisi akhir garis

•

Kotak x1,y1 x2,y2 Canvas.Rectangle(x1,y1,x2,y2); Ket : x1,y1 : titik awal kotak x2,y2 : titik akhir kotak

•

Lingkaran x1,y1

x2,y2 Canvas.Ellipse(x1,y1,x2,y2); C. Uji Coba 1. Membuat garis koordinat pada canvas.

Kode Program dengan delphi : Perintah pada Even-OnClick pada tombol Gambar : begin with Image1 do begin // membuat garis horisontal Canvas.MoveTo(0,round(Height/2)); Canvas.lineto(width,round(Height/2)); // membuat garis vertikal Canvas.MoveTo(round(Width/2),0); Canvas.lineto(round(Width/2),Height); end; end;

2. Membuat lingkaran/elipse sebesar canvas.

Kode Program dengan delphi : Perintah pada Even-OnClick pada tombol Gambar : begin with Image1 do begin Canvas.Ellipse(0,0,Width,Height); end; end;

3. Menggambar kotak dimana panjang dan lebarnya adalah setengah dari canvas.

Kode Program dengan delphi : Perintah pada Even-OnClick pada tombol Gambar : begin with Image1 do begin Canvas.Rectangle(round(Width/3),round(Height/3),+ round(Width*2/3),round(Height*2/3)); end; end;

D. Tugas Praktikum Dengan menggunakan perintah geometri dasar, buatlah gambar seperti di bawah ini :

BAB III Membuat Geometri Dasar (2) A. Tujuan Mahasiswa dapat membuat berbagai bentuk geometri dasar lain seperti seperti Kurva, Busur, Juring dll dengan menggunakan kontrol pada delphi. B. Dasar Teori  Menggambar Busur Sintaks : Arc (X1, Y1, X2, Y2, X3, Y3, X4, Y4) Semua parameter bertipe integer; Keterangan: X1, Y1 menyatakan koordinat kiri atas. X2, Y2 menyatakan koordinat kanan bawah. X3, Y3 menyatakan koordinat awal penggambaran. X4, Y4 menyatakan koordinat akhir penggambaran. (X1, y Y1)

(X3, y Y4)

(X4, y Y4) (X2, y Y2)

 Menggambar Tembereng Sintaks : Chord (X1, Y1, X2, Y2, X3, Y3, X4, Y4) Semua parameter bertipe integer; Keterangan: X1, Y1 menyatakan koordinat kiri atas. X2, Y2 menyatakan koordinat kanan bawah. X3, Y3 menyatakan koordinat awal penggambaran. X4, Y4 menyatakan koordinat akhir penggambaran. (X1, y Y1)

(X3, y Y4)

(X4, y Y4) (X2, y Y2)  Menggambar Juring Sintaks : Pie (X1, Y1, X2, Y2, X3, Y3, X4, Y4) Semua parameter bertipe integer; Keterangan: X1, Y1 menyatakan koordinat kiri atas. X2, Y2 menyatakan koordinat kanan bawah. X3, Y3 menyatakan koordinat awal penggambaran. X4, Y4 menyatakan koordinat akhir penggambaran.

(X1, y Y1)

(X3, y Y4)

(X4, y Y4) (X2, y Y2)  Mengambar kotak dengan sudut tumpul Sintaks : Rectangle(X1,Y1,X2,Y2) Semua parameter bertipe integer; Keterangan : X1, Y1 menyatakan koordinat kiri atas. X2, Y2 menyatakan koordinat kanan bawah. X3, Y3 Menyatakan tinggi dan lebar sudut (X1, y Y1)

X3 Y3

(X2, y Y2)

 Menggambar segi banyak Sintaks : Polygon(Points); Points bertipe array of Tpoint Sebagai contoh: Canvas.Polygon([Point(100, 20), Point(50, 100), Point(150, 100)]);

 Menggambar garis yang menghubungkan beberapa titik Sintaks : PolyLine(Points); Points bertipe array of Tpoint Sebagai contoh: Canvas.Polyline([Point(100,20),Point(50,100), Point(150, 100)]);

 Menggambar Kurva Bezier Sintaks : PolyBesier(Points) Points bertipe array of Tpoints Kurva besier paling tidak ditentukan oleh 4 titik. Titik pertama dan titik keempat digunakan sebagai titik awal dan titik akhir kurva yang pertama. Titik kedua dan titik ketiga dipakai sebagai kontrol untuk membentuk kurva. Pada penggambaran kurva berikutnya, titik akhir kurva sebelumnya akan dipakai sebagai titik awal. Kedua titik berikutnya sebagai kontrol kurva. Contoh: procedure TForm1.FormClick(Sender: TObject); begin Canvas.PolyBezier([Point(10,100), Point(50,20), Point(70,120), Point(100,150), Point(120,120), Point(160, 90), Point(250,140)]); Canvas.PolyBezier([Point(10,100), Point(50,80), Point(100,280), Point(250,140)]); end;

C. Tugas Praktikum Dari uji coba yang dilakukan di atas. Lakukan penggabungan dalam satu form seperti pada gambar di bawah ini.

BAB III Mengkostumisasi Geometri A. Tujuan Mahasiswa dapat mengkostumisasi berbagai bentuk geometri, sehingga tampilan geometri menjadi semakin menarik B. Dasar Teori 1.

Mengatur Warna Kurva Bagian dalam bentuk-bentuk yang dihasilkan oleh metode-metode penggambaran kurva seperti Rectangle, Ellipse, Pie, Chord dan Polygon. Sintaks : Brush.Color := warna; Sebagai contoh : Canvas.Brush.Color := clLime; Canvas.Rectangle(10, 10, 100, 100); Akan menghasilkan kotak dengan warna isi (fill) hijau.

2.

Mengarsir Kurva Sintaks : Brush.Style := Arsiran Nilai Arsiran berupa konstata, dengan daftar sebagai berikut : Nilai Kostanta

Model Arsiran

bsClear

Tanpa Arsiran

bsSolid bsHorisontal bsVertical bsFDiagonal

bsBDiagonal bsCross bsDiagCross Sebagai contoh : Canvas.Brush.Style := bsVertical; Canvas.Rectangle(10, 10, 100, 100); Menghasilkan kotak dengan model arsiran vertikal. 3.

Mengarsir dengan Bitmap. Pengarsiran dapat dilakukan dengan menggunakan file bitmap. Gambar yang digunakan harus tidak melebih 8 X 8. Gambar anda dapat anda buat menggunakan Paint misalnya sebagai contoh :

Kemudian gambar disimpan dengan nama Arsir.bmp Contoh Pengkodean : procedure TForm1.FormClick(Sender: TObject); begin Canvas.Brush.Bitmap := TBitmap.Create; Canvas.Brush.Bitmap.LoadFromFile('Arsir.bmp'); Canvas.Ellipse(50,50,350,150); Canvas.Brush.Bitmap.free end;

4.

Mengarsir dengan Bitmap.

Suatu kurva tertutup dapat diisi warna tentu dengan metode Floodfil. Sintaks : Floodfill (X,Y,Color, FillStyle) Keterangan: X,Y Color FillStyle

menyatakan koordinat yang mewakili bagian dalam kurva. menyatakan warna isi. menyatakan cara mengarsir, parameter dapat diisi: fsSurface, efeknya area yang diwakil oleh titik (X,Y) dan Sebelah-belahnya yang berwarna Color akan diganti dengan warna Brush.Color. fsBorder, efeknya area yang diwakili oleh titik(X,Y) yanng tidak berwarna Color akan diganti Brush.Color.

(X,Y)

(X,Y)

C. Tugas Praktikum 1.

Dari uji coba yang dilakukan di atas. Lakukan penggabungan dalam satu form seperti pada gambar di bawah ini.

2.

Buatlah Gambar Rumah Seperti di bawah dengan warna dan bentuk arsiran bebas.

BAB IV Transformasi A. Tujuan Mahasiswa dapat mempelajari dan membuat macam-macam tranformasi geometri 2D. B. Dasar Teori Ada beberapa macam tipe transformasi 2D yaitu :  Translasi (pergeseran)  Skala  Rotasi  Mirror (pencerminan) Translasi / Pergeseran Sebuah titik dapat digeser atau ditranslasikan dengan persamaan sebagai berikut : X’ = x1 + Tx Y’ = y1 + Ty Ket : x1,y1

: koordinat titik awal

X’,Y’

: koordinat titik hasil

Tx

: faktor perpindahan ke arah X (horisontal)

Ty

: faktor perpindahan ke arah Y (vertikal)

Skala Sebuah objek dapat diperbesar atau diperkecil dengan persamaan sebagai berikut : X’ = Sx * x Y’ = Sy * y

Ket : Sx

: faktor pembesaran horizontal

Sy

: faktor pembesaran vertical

Bila faktor pembesaran vertikal dan horizontal sama maka Sx = Sy. Rotasi Sebuah titik dapat digeser atau ditranslasikan dengan persamaan sebagai berikut : X’ = x.cos Θ – y.sin Θ Y’ = x.sin Θ + y.cos Θ Ket : x,y

: koordinat titik asal

X’,Y’

: koordinat hasil perputaran

Θ

: sudut putar. Dinyatakan dalam radian, maka tranformasinya Θ = (sudut_derajat/180* Θ)dengan Θ = 22/7

Mirror(pencerminan) Sebuah titik dapat dicerminkan terhadap sumbu x atau sumbu y. persamaan untuk percerminan terhadap sumbu x : X’ = x Y’ = - y persamaan untuk percerminan terhadap sumbu y : X’ = - x Y’ = y Ket : x,y

: koordinat titik asal

X’,Y’

: koordinat hasil pencerminan

C. Uji Coba

Kode Program dengan delphi : Perintah pada Even-OnClick pada tombol Geser X : procedure TForm1.gsrxClick(Sender: TObject); begin PaintBox1.Refresh; x1 := x1+ strtoint(tx.Text); x2 := x2+ strtoint(tx.Text); PaintBox1.canvas.moveto(X1,Y1); paintbox1.Canvas.LineTo(x2,Y2); end;

D. Tugas Praktikum Buatlah program untuk trasnformasi seperti pada gambar berikut ini :

BAB V Windows dan Viewport Sistem koordinat windows :

0,0

Y

Sistem Koordinat Viewport(layar)

0,0

Y

X

X

Transformasi Window ke Viewport / Viewport ke Window Data window : Xwmin, Xwmax Ywmin, Ywmax Data Viewport : Xvmin, Xvmax Yvmin, Yvmax P(xw, yw)  P’ (xv, yv) P’(xv, yv)  P (xw, yw) Persamaan transofmasi window ke viewport Xw – Xwmin Xwmax - Xwmin