Oleh : Moh. Furqan, S. Kom.

BAB I PIXEL, WARNA, SISTEM KOORDINAT & BAHASA PROGRAM Oleh : Moh. Furqan, S. Kom. Program S1 Teknik Informatika Sekolah Tinggi Teknologi Nurul Jadid

Pixel dan warna Pixel : picture element merupakan elemen dasar dan ukuran terkecil grafik. Pixel dinyatakan sebagai fungsi integer positif f(x,y), x menyatakan koordinat mendatar dan y koordinat vertical. Jika ditemukan bilangan tidak integer maka harus dibulatkan (trunc) menjadi bilangan integer. Misal pixel P(2.5, 3.4) ditulis P(trunc(2.5), trunc(3.4)). Ukuran pixel baku (hitam putih) adalah 1 bit. Ukuran pixel bergantung pada konfigurasi warna monitor. Konfigurasi warna mengikuti rumus 2n dimana n banyaknya bit yang menyusun warna tersebut dan 1 pixel mempunyai ukuran n bit. Komputer Grafik

Misal konfigurasi warna monitor 16 warna (24), maka 1 pixel mempunyai ukuran 4 bit. Sistem monitor terbaru adalah RGB (Red Green Blue) 16 Mega bit (224), sehingga 1 pixel ukuran 24 bit atau 3 byte. Warna dapat ditulis dengan awalan ‘cl’ (clRed, clGreen, clWhite, …) atau menuliskan konfigurasi bit penyusun dalam bilangan hexa. Misalnya warna merah ditulis dengan $000000FF (32 bit). Komputer Grafik

Sistem Koordinat Sistem koordinat kartesius tangan kanan dengan bilangan real. Nilai x positif berarah ke kanan dan nilai y positif berarah ke atas ditinjau dari titik (0,0). Monitor mempunyai sistem koordinat kartesius tangan kiri dengan bilangan integer positif dengan titik (0,0) terletak di pojok kiri atas monitor. Nilai x bergerak ke kanan dan nilai y bergerak ke bawah. sistem ini di batasi oleh nilai x dan y maksimum sesuai dengan resolusi monitor. Agar monitor dapat menampilkan keadaan grafik sesuai sistem koordinat kartesius tangan kanan maka harus dilakukan konversi. Komputer Grafik

(0,0) monitor Ymon Konversi koordinat monitor dengan human P(x,y) Xhum Xmax div 2 Yhum (0,0) human Ymax div 2 Xmon = Xmax div 2 + Xhum Ymon = Ymax div 2 - Yhum Komputer Grafik

Bahasa Program Bahasa yang digunakan adalah Delphi versi 7. Perintah dasar grafik dalam delphi adalah : • Lebar layar maksimum Xmax := ClientWidth • Tinggi layar maksimum Ymax := ClientHeight • Menggambar titik dengan warna Canvas.pixels[x,y] := warna; • contoh menggambar titik (20,50) berwarna merah Canvas.pixels[20,50] := clRed; Komputer Grafik

Menggambar sumbu koordinat berwarna: sumbu x (merah) For x := 0 to ClientWidth do Canvas.Pixels[x, ClientHeight div 2] := clRed; sumbu y (biru) For y := 0 to ClientHeight do Canvas.Pixels[ClientWidth div 2, y] := clBlue; • Contoh : Program • Menggambar sumbu koordinat berwarna putih: sumbu x: Canvas.MoveTo(0, ClientHeight div 2); Canvas.LineTo(ClientWidth, ClientHeight div 2); sumbu y: Canvas.MoveTo(ClientWidth div 2, 0); Canvas.LineTo(ClientWidth div 2, ClientHeight); Komputer Grafik

Menggambar garis putih dari titik (x1,y1) ke titik (x2,y2) : Canvas.MoveTo(x1, y1); Canvas.LineTo(x2, y2); • Contoh : Program • Menggambar kurva : Persegi empat: Canvas.Rectangle(x1, y1,x2,y2); Persegi empat tumpul sudut: Canvas.RoundRect(x1, y1,x2,y2,x3,y3);  x3,y3 = lengkungan Lingkaran atau ellips: Canvas.Ellipse(x1, y1,x2,y2); Komputer Grafik

Menggambar kurva : Busur: Canvas.Arc (x1, y1,x2,y2,x3,y3,x4,y4);  x3,y3,x4,y4 = batas arc. Juring: Canvas.Pie(x1, y1,x2,y2,x3,y3,x4,y4); Tembereng: Canvas.Chord(x1, y1,x2,y2,x3,y3,x4,y4); Segi banyak (poligon): Canvas.Polygon([Point(x1, y1), Point(x2,y2)…, Point(xn,yn)]); Garis bersambung (polyline): Canvas.Polyline([Point(x1, y1), Point(x2,y2)…, Point(xn,yn)]); Komputer Grafik 9

Menampilkan String : Canvas.TextOut(x, y,string); • Fungsi pembulatan integer: Trunc(x), atau Round(x); • Mengubah sudut derajat menjadi sudut radian: SdtRadian := SdtDerajat/ClientWidth * 2 * PI; • Mengubah warna layar: Form1.Color := warna; • Contoh : Program Komputer Grafik 10

Penggunaan Pen • Warna Canvas.Pen.Color := warna; • Lebar Canvas.Pen.Width := n; (n = integer) • Style garis Canvas.Pen.Style := style; style : psSolid, psDash, psDot, psDashDot, psDashDotDot • Mode Canvas.Pen.Mode := mode; Mode : pmCopy, pmMask

Contoh : • Menggambar lingkaran dengan garis putus-putus Canvas.Pen.Color := clBlue; Canvas.Pen.Style := psDash; Canvas.Pen.Width := 2; Canvas.Pen.Mode := pmCopy; Canvas.Ellipse(10,10,50,50); Contoh : Program

Penggunaan Brush • Brush masuk dalam kelas TBrush dengan 3 properti, yaitu: • Warna Canvas.Brush.Color := clBlue; • Style, membuat arsiran : Canvas.Brush.Style := style; style : bsSolid, bsBDiagonal, bsFDiagonal, bsHorizontal, bsVertical, bsCross, bsDiagCross, bsClear. • Bitmap : membentuk brush (kuas) sendiri yang disimpan dalam file .bmp.

Penggunaan Brush • Bentuk procedurenya adalah : Procedure TForm1.FormPaint(Sender : TObject); Var Kuas : TBrush; Begin Kuas := TBrush.Create; Kuas .Bitmap := TBitmap.Create; Kuas.Bitmap.LoadFromFile(‘Latar.bmp’); Canvas.Brush.Assign(kuas); Kuas.Free End;

Penggunaan Brush • Contoh Program penggunaan brush : Procedure TForm1.FormPaint(Sender : TObject); Var Kuas : TBrush; Begin {menggambar kotak di kiri atas warna merah, penuh} Canvas.Brush.Color := clRed; Canvas.Brush.Style := bsSolid; Canvas.Rectangle(0,0,ClientWidth div 2, ClientHeight div 2) End; Contoh : Program

Menulis Teks Dalam Mode Grafik • Perintah pokok adalah TextOut(String). Canvas.TextOut(50,50.’STTNJ’) • Untuk mengukur lebar dan tinggi teks digunakan perintah: X := Canvas.TextWidth(String)  lebar teks Y := Canvas.TextHeight(String)  Tinggi teks • Mengubah warna teks: Canvas.Font.Color := warna; • Mengubah tinggi teks : Canvas.Font.Size := tinggi; • Mengubah tipe/jenis teks : Canvas.Font.Name := nama huruf;

Menulis Teks Dalam Mode Grafik • Mengubah style teks: Canvas.Font.Style := [style]; style : fsBold, fsItalic, fsUnderline, fsStrikeOut • Contoh menampilkan string STTNJ dengan warna, style dan ukuran: Canvas.Font.Color:= clRed; Canvas.Font.Size := 20; Canvas.Font.Style := [fsBold]; Canvas.Font.Name := ‘Times New Roman’; Canvas.TextOut(50,50,’STTNJ’); Contoh : Program

Membuat Sistem Koordinat Otomatis • Membuat koordinat dapat dibuat secara otomatis, dengan cara masuk ke modus Form1, pilih event dan pilih OnPaint : Procedure TForm1.FormPaint(Sender:TObject); var x,y : integer; Begin //sumbu x for x := 0 to ClientWidth do Canvas.Pixels[x, ClientHeight div 2]:= clRed; //sumbu y for y := 0 to ClientHeightdo Canvas.Pixels[ClientWidth div 2,y]:= clBlue; End;

Oleh : Moh. Furqan, S. Kom.