PIXEL, WARNA, SISTEM KOORDINAT & BAHASA PROGRAM

Presentasi berjudul: "PIXEL, WARNA, SISTEM KOORDINAT & BAHASA PROGRAM"— Transcript presentasi:

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

2 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

3 Misalnya warna merah ditulis dengan $000000FF (32 bit).
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

4 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

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

6 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

7 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

8 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

9 Canvas.Arc (x1, y1,x2,y2,x3,y3,x4,y4);  x3,y3,x4,y4 = batas arc.
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

10 Canvas.TextOut(x, y,string); Fungsi pembulatan integer:
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

11 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

12 Menggambar lingkaran dengan garis putus-putus
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

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

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

15 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

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

17 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

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