Program S1 Teknik InformatikaSekolah Tinggi Teknologi Nurul Jadid

BAB IPIXEL, WARNA, SISTEM KOORDINAT & BAHASA PROGRAM

Oleh :Moh. Furqan, S. Kom.

Pixel dan warna

Komputer Grafik2

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 Grafik3

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).

Sistem Koordinat

Komputer Grafik4

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 Grafik5

Konversi koordinat monitor dengan human

(0,0) monitor

(0,0) human

P(x,y)Xmax div 2

Ymax div 2

XhumYhum

Ymon

Xmon = Xmax div 2 + XhumYmon = Ymax div 2 - Yhum

Bahasa Program

Komputer Grafik6

Bahasa yang digunakan adalah Delphi versi 7.Perintah dasar grafik dalam delphi adalah :

Lebar layar maksimumXmax := ClientWidth

Tinggi layar maksimumYmax := ClientHeight

Menggambar titik dengan warna Canvas.pixels[x,y] := warna;

contoh menggambar titik (20,50) berwarna merahCanvas.pixels[20,50] := clRed;

Komputer Grafik7

Menggambar sumbu koordinat berwarna:sumbu x (merah)

For x := 0 to ClientWidth doCanvas.Pixels[x, ClientHeight div 2] := clRed;

sumbu y (biru)For y := 0 to ClientHeight doCanvas.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 Grafik8

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);

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 PenWarna

Canvas.Pen.Color := warna;Lebar

Canvas.Pen.Width := n; (n = integer) Style garis

Canvas.Pen.Style := style;style : psSolid, psDash, psDot,

psDashDot, psDashDotDotMode

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 BrushBrush 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 BrushBentuk 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 BrushContoh 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 GrafikPerintah 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 teksMengubah 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 GrafikMengubah 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 OtomatisMembuat 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 xfor x := 0 to ClientWidth doCanvas.Pixels[x, ClientHeight div 2]:= clRed;//sumbu yfor y := 0 to ClientHeightdoCanvas.Pixels[ClientWidth div 2,y]:= clBlue;

End;