Transcript BAB I

BAB I
PIXEL, WARNA, SISTEM KOORDINAT & BAHASA
PROGRAM
Program S1 Teknik Informatika
Sekolah Tinggi Teknologi Nurul Jadid
Oleh :
Moh. Furqan, S. Kom.
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.
2
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).
3
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.
4
Komputer Grafik
(0,0)
monitor
Ymon
P(x,y)
Xmax div 2
Xhum
(0,0) human
Ymax div 2
Konversi koordinat monitor dengan human
Xmon = Xmax div 2 + Xhum
Ymon = Ymax div 2 - Yhum
5
Komputer Grafik
Yhum
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;
6
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);
7
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);
8
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(xn,yn)]);
Garis bersambung (polyline):
Canvas.Polyline([Point(x1,
y1),
Point(xn,yn)]);
Point(x2,y2)…,
Point(x2,y2)…,
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;