MODUL GRAFIKA

KOMPUTER
DiAjukan Untuk Memenuhi Tugas Mata
Kuliah Grafika Komputer
Nama Dosen Pembimbing Pak M.Amin
DI
S
U
S
U
N
OLEH:
Jamudthar Sinaga
12210103
SK-4B

Sekolah Tinggi Manajemen Informatika

dan Komputer

" STMIK Royal Kisaran "

2016/2017
KATA PENGANTAR
Pertama-tama Saya mengucapkan syukur kepada Tuhan Yang Maha
Esa, karena berkatNya lah akhirnya Saya dapat menyelesaikan ModuL
GRAFIKA KOMPUTER ini, Yang Dimana Membahas mengenai Sumbuh
x
dan
y
Untuk
Membuat
Atau
Mengambar
Garis
Horizontal,Vertical,Lingkaran,Segitiga Dan juga Kotak Di Dalam Sebuah
Program Sofware Delphi7.
Adapun pembuatan Modul ini ditujukan untuk penyelesaian tugas untuk
mata kuliah Grafika Kmputer Program studi SISTEM KOMPUTER, Dan
juga sebagai pengantar kepada Saya Sendiri untuk lebih mengerti tentang
GRAFIKA KOMPUTER.
Tak ada gading yang tak retak, Modul ini masih penuh kekurangan dan
kesalahan maka Saya berharap para pembaca dapat memberikan saran dan
petunjuk agar Modul ini menjadi lebih berisi, semoga Modul ini dapat
bermanfaat dan berkenan di hati para pembaca, Terutama Buat Dosen
Pembimbing saya Pak.Amin.
Kisaran, Mei 2016

Penyusun
Jamudthar Sinaga
12210103

DAFTAR ISI
Kata Pengantar 1
Daftar Isi ................................. 2
Bab I Pendahuluan .......................................3
1.1 Latar Belakang .. 3
1.2 Maksud dan Tujuan 3
Bab II Pembahasan ..........4
2.1 Pertemuan Pertama.4
2.2 Pertemuan Ke Dua.4
2.3 Pertemuan Ke Tiga.4
2.4 Pertemuan Ke Empat.4
2.5 Pertemuan Ke Lima...4
2.6 Pertemuan Ke Enam..4
2.7 Pertemuan Ke Tujuh.4
2.8 Pertemuan Ke Delapan.4
2.9 Pertemuan Ke Sembilan4
Bab III Penutup ..5
kesimpulan dan saran .................................6

Daftar pustaka .....................7

BAB 1 Pendahuluan
Menggambar di Delphi dilakukan dengan memanipulasi canvas. Canvas dapat
dianalogikan sebagai sebuah canvas pelukis yang dapat digambar sesuai dengan
kehendak pelukisnya.
1.1 Latar Belakang
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.
1.2 Maksud Dan Tujuan
1. Mahasiswa dapat memahami objek dasar suatu gambar.

2. Mahasiswa dapat membuat berbagai bentuk geometri dasar menggunakan titik

dengan kontrol pada delphi.

Bab II Pembahasan
2.1 Membuat Garis

Sistem Koordinat Canvas

Aturan koordinat pada canvas adalah sebagai berikut:
Image.Canvas

Arah koordinat x
membesar
Titik (0,0)

Arah koordinat y membesar

Semua koordinat bernilai positif dan merupakan bilangan bulat (tidak ada pecahan)

Berbagai Method Canvas untuk Menggambar

Objek canvas memiliki beberapa method lain untuk menggambar:
Nama Method
Arc
Ellipse
MoveTo
LineTo
Rectangle

Keterangan
Menggambar lengkungan
Menggambar lingkaran/ellips.
Menggeser posisi
Menggambar garis (digunakan bersama
MoveTo)
Membuat kotak

RoundRect

Membuat kotak yang memiliki sudut

melengkung

Polygon

Menggambar poligon

Berikut akan kita bahas secara lebih rinci beberapa diantaranya.

Rectangle
Rectangle digunakan untuk membuat kotak. Method Rectangle mempunyai empat
parameter (X1,Y1,X2,Y2) . (X1,Y1) menyatakan koordinat kiri-atas kotak dan
(X2,Y2) koordinat kanan-bawah kotak.
(X1,Y1)

(X2,Y2)

MoveTo dan LineTo

MoveTo dan LineTo digunakan secara bersama-sama untuk membuat garis. MoveTo
adalah perintah untuk memindahkan posisi menggambar tanpa membuat garis. Sedangkan
LineTo memindahkan posisi dengan menggambar garis.
Contoh:
with
image1.Canvas do
begin
MoveTo(50,50);
LineTo(100,100);
MoveTo(150,150);
LineTo(200,200);

//pindahkan posisi ke koordinat 50,50

//buat garis yang menghubungkan titik (50,50) ke (100,100)
//pindahkan posisi ke(150,150). Tdk ada garis yg digambar!
//buat garis dari (150,150) ke (200,200)

end;
Hasilnya adalah sebagai berikut:
(50,50)
(100,100)
(150,150)
(200,200)

Membuat Garis Horizontal

canvas.pen.Color:=clGreen;
canvas.pen.Width:=3;

canvas.MoveTo(ClientWidth div 800,0);

canvas.LineTo(ClientWidth,ClientHeight);
end;
HasilNya

Membuat Garis Horizontal

canvas.pen.Color:=clGreen;
canvas.pen.Width:=3;
canvas.MoveTo(ClientWidth div 5,0);
canvas.LineTo(ClientWidth div 5,ClientHeight);
Hasilnya

2.2 Pertemuan Ke Dua

Membuat Segitiga
canvas.pen.Color:=clBlue;
canvas.pen.Width:=5;
canvas.MoveTo(ClientWidth div 2,0);
canvas.LineTo(ClientWidth,ClientHeight div 2);
canvas.pen.Color:=clRed;
canvas.pen.Width:=5;
canvas.MoveTo(0,ClientHeight Div 2);
canvas.LineTo(ClientWidth , ClientHeight div 2);
canvas.pen.Color:=clPurple;
canvas.pen.Width:=5;
canvas.MoveTo(Clientwidth div 2,0);
canvas.LineTo(ClientWidth div 100,clientheight div 2);
end;
end.

Hasilnya

2.3 Pertemuan Ke Tiga

Membuat Combinasi Garis

canvas.pen.Color:=clYellow;
canvas.pen.Width:=5;
canvas.MoveTo(0,ClientHeight);
canvas.LineTo(ClientWidth div 4, ClientHeight);
canvas.pen.Color:=clBlue;
canvas.pen.Width:=5;
canvas.MoveTo(ClientWidth Div 4,ClientHeight div 4);
canvas.LineTo(ClientWidth div 4, ClientHeight);
end;

Hasilnya

Dan
canvas.pen.Color:=clGreen;

canvas.pen.Width:=5;
canvas.MoveTo(0,ClientHeight Div 4);
canvas.LineTo(ClientWidth div 4, ClientHeight div 4);
canvas.pen.Color:=clGreen;
canvas.pen.Width:=5;
canvas.MoveTo(0,ClientHeight);
canvas.LineTo(0,ClientHeight div 4);
canvas.pen.Color:=clGreen;
canvas.pen.Width:=5;
canvas.MoveTo(0,ClientWidth Div 2);
canvas.LineTo(ClientWidth div 4, ClientHeight div 4);

Hasilnya

2.4 Pertemuan Ke Empat

canvas.pen.Color:=clGreen;
canvas.pen.Width:=3;
canvas.MoveTo(ClientWidth div 2+ClientWidth div 4,ClientHeight div
2+ClientHeight Div 2);
canvas.LineTo(ClientWidth, ClientHeight div 2+ClientHeight div 4);
canvas.pen.Color:=clGreen;
canvas.pen.Width:=3;
canvas.MoveTo(ClientWidth div 2+ClientWidth div 4,ClientHeight div
2+ClientHeight Div 4);
canvas.LineTo(ClientWidth, ClientHeight div 2+ClientHeight div 4);
canvas.pen.Color:=clGreen;
canvas.pen.Width:=3;
canvas.MoveTo(0,0);
canvas.LineTo(ClientHeight,ClientWidth);
canvas.pen.Color:=clGreen;
canvas.pen.Width:=3;
canvas.MoveTo(ClientWidth div 2+ClientWidth div 4,ClientHeight div
2+ClientHeight Div 2);
canvas.LineTo(ClientWidth, ClientHeight);
end;
Hasilnya

2.5 Pertemuan Ke Lima

canvas.pen.Color:=clGreen;
canvas.pen.Width:=3;
canvas.MoveTo(0,ClientWidth div 120);
canvas.LineTo(ClientWidth, ClientHeight);
canvas.pen.Color:=clGreen;
canvas.pen.Width:=3;
canvas.MoveTo(0,ClientHeight div 4);
canvas.LineTo(ClientWidth, ClientHeight div 4);
end;
Hasilnya

2.6 Pertemuan Ke Enam

canvas.pen.Color:=clGreen;
canvas.pen.Width:=3;
canvas.MoveTo(0,ClientHeight div 5);
canvas.LineTo(ClientWidth div 5, ClientHeight);
Hasilnya

Dan
canvas.pen.Color:=clGreen;
canvas.pen.Width:=3;
canvas.MoveTo(0,ClientWidth div 5);
canvas.LineTo(ClientWidth, ClientHeight div 5);
Hasilnya

2.7 Pertemuan Ke Tujuh

Elipse

Ellipse digunakan untuk menggambar lingkaran dan elips.

Contoh:
Image1.Canvas.Rectangle(10,10,100,100);
Image1.Canvas.Ellipse(10,10,100,100);

Akan menghasilkan:

(10,10)

(100,100)

Dari potongan program diatas, dapat dilihat bahwa perintah Ellipse memiliki parameter yang
sama dengan rectangle (x1,y1, x2, y2). Ellipse akan menggambar lingkaran sesuai dengan
kotak yang dibentuk oleh koordinat tersebut. Untuk membuat lingkaran sempurna, Anda
harus membentuk koordinat kotak yang berbentuk bujur sangkar (semua sisinya sama
panjang).
Coba tukar kedua baris pada program diatas, sehingga lingkaran digambar terlebih dulu.
Image1.Canvas.Rectangle(10,10,100,100);
Image1.Canvas.Ellipse(10,10,100,100);

Apa hasilnya? lingkaran tidak muncul. Ini disebabkan setelah lingkaran digambar,
lingkaran tersebut tertimpa oleh gambar kotak. Delphi menggambar di Canvas sesuai
dengan urutan pada kode program.

Arc
Gunakan Arc untuk menggambar lengkungan.
Method Arc membutuhkan enam parameter (X1, Y1, X2, Y2, X3, Y3, X4, Y4). Empat
parameter pertama (x1,y1) dan (x2,y2) sama dengan parameter Method Ellipse yaitu
mendefinisikan kotak. Lengkungan digambar mulai dari titik awal ke titik akhir berlawanan
dengan jarum jam. Titik awal adalah titik potong antara ellips dengan garis yang
menghubungkan antara pusat ellips dengan X3,Y3 . Titik akhir adalah titik potong antara
ellips dengan garis yang menghubungkan antar pusat lingkaran dengan X4,Y4.
Contoh:
with image1.Canvas do

begin
Rectangle(10,10,100,100);

MoveTo(45,45); //titik pusat ellips

LineTo(10,50); //titik mulai
MoveTo(45,45); //titik pusat ellips
LineTo(100,50); //titik akhir
Arc(10,10,100,100,10,50,100,50); //lengkungan
end;

Akan menghasilkan:
(45,45) pusat ellips

(10,50) titik awal

(100,50) titik akhir

Untuk membuat lingkaran yang melengkung cembung

pindahkan titik
awal ke sebelah kanan dan titik akhir ke sebelah kiri. Ingat lengkungan digambar
dari titik awal ke titik akhir berlawanan dengan jarum jam.

RoundRect
Gunakan RoundRect untuk menggambar kotak (seperti rectangle) tetapi dengan
ujung-ujung tumpul.
Contoh:
image1.Canvas.RoundRect(10,10,100,100,20,20);

Akan menghasilkan:

RoundRect menggunakan enam parameter (X1, Y1, X2, Y2, X3, Y3). Empat
parameter pertama X1,Y1 dan X2,Y2 sama fungsinya dengan Rectangle, yaitu
menyatakan sudut kiri atas dan sudut kanan bawah. Parameter X3, Y3 digunakan
untuk mengatur lengkungan sudut. Sudut melengkung pada RoundRect sama dengan
lengkungan ellips yang memiliki lebar X3 dan tinggi Y3.

Polygon
Poligon pada prinsipnya sama dengan kombinasi moveto dan lineto.
Misalnya kita ingin menggambar sebuah segitiga berwarna merah. Dengan polygon
kodenya sebagai berikut:
Image1.Canvas.Brush.Color:=clRed;
Image1.Canvas.Polygon([Point(10,10),Point(100,100),Point(50,100)]);

Hasilnya akan muncul sebagai berikut:

Parameter method polygon adalah array bertipe point, oleh karena itu pada contoh
diatas digunakan kurung siku.
Mengapa tidak menggunakan Moveto dan LineTo saja? Alasan pertama, method
Polygon lebih ringkas. Alasan kedua, property Brush (color,style dsb) tidak dapat
digunakan jika kita menggunakan MoveTo dan LineTo.

Selain method yang sudah dibahas di atas (rectangle, ellipse, arc,

roundrect, moveto,lineto,polygon) terdapat beberapa method lain seperti:
Chord, FocusRect, Pie, PolyBezier dan Polyline. Silahkan pelajari
melalui fasilitas Help pada Delphi.

Brush dan Pen

Brush dan Pen adalah property dari Canvas yang mendefinisikan bagaimana
sebuah objek digambar.
Property adalah variabel yang dimiliki sebuah objek. Bedakan dengan method yang
merupakan fungsi/prosedur objek.
Jika kita analogikan manusia sebagai objek, maka contoh property untuk objek
manusia adalah: nama, umur dsb. Sama dengan method, property juga ditulis dengan
notasi titik: manusia.nama, manusia.umur.

Cobalah lihat kotak dibawah. Garis merah yang membentuk kotak didefinisikan oleh
objek Pen. Sedangkan isinya yang berwarna biru didefinisikan oleh objek Brush.

Dalam Delphi, kita tuliskan sebagai berikut:

Image1.Canvas.Pen.Color = clRed;
Image1.Canvas.Brush.Color = clBlue;
Image1.Canvas.Rectangle(10,10,100,100);

Dapat kita lihat bersama bahwa Pen dan Brush memiliki property Color. Ini adalah
contoh property bertingkat (nested). Objek Image1 memiliki property Canvas,
Canvas memiliki property Pen dan akhirnya Pen memiliki property Color.
Jika kode di atas ditambahkan kode untuk menggambar lingkaran.
Image1.Canvas.Pen.Color = clRed; //warna pen
Image1.Canvas.Brush.Color = clBlue; //warna brush
Image1.Canvas.Rectangle(10,10,100,100);
Image1.Canvas.Ellipse(200,10,300,100); //tambahkan membuat lingkaran

Hasilnya adalah sebagai berikut.

Terlihat bahwa brush dan pen lingkaran juga mengikuti brush dan pen kotak. Artinya
sekali diubah, Brush dan Pen berlaku untuk semua proses menggambar yang
berlangsung berikutnya.
Contoh berikut akan memperjelas hal ini
with image1.Canvas do
begin
Brush.Color:=clRed; //brush warna merah
Brush.Style:=bsCros
s;
//bentuknya kotak
Pen.Style:=psDot;
//pen-nya berbentuk titik-titik
Rectangle(10,10,100,100);
Brush.Style:=bsHorizontal; //bentuk brush garis-garis
horizontal
Pen.Width:=5;
//lebar pen 5 points
Pen.Style:=psSolid;
//pen-nya berbentuk garis solid
Ellipse(200,10,300,100);

end;

Hasilnya sebagai berikut:

Ini terjadi karena setelah kotak digambar, brush dan pen diubah sehingga akan
langsung berpengaruh terhadap gambar lingkaran.

Brush.Style dapat diisi dengan nilai-nilai:

Sedangkan Pen.Style dapat diisi dengan nilai-nilai:

psSolid: garis solid.
psDash : garis yang terdiri atas garis putus-putus
psDot: garis yang dibentuk oleh titik.
psDashDot: garis yang dibentuk dari urutan garis dan titik.
psDashDotDot : Kombinasi garis-titik-titik
psClear: Tidak terlihat (bedakan dengan garis berwarna putih)

Khusus untuk Brush.Style yang bernilai bsClear dapat kita analogikan

sebagai kaca transparan.
Kode berikut akan menghasilkan gambar bertumpuk:
Image1.Canvas.Rectangle(10,10,100,100);
Image1.Canvas.Ellipse(10,10,150,150);

Ubah brush.style menjadi bsClear sebelum menggambar lingkaran

Image1.Canvas.Rectangle(10,10,100,100);
Image1.Canvas.Brush.Style:=bsClear;
Image1.Canvas.Ellipse(10,10,150,150);

maka gambar lingkaran akan transparan

Mewarnai Daerah dengan FloodFill

FloodFill dapat digunakan untuk mewarnai suatu daerah yang dibatasi oleh garis.
FloodFill ini bermanfaat saat Brush tidak dapat digunakan, misalnya pada bentuk
yang dibuat oleh MoveTo dan LineTo. Floodfill juga dapat dimanfaatkan untuk
mewarnai Canvas.
Misalkan kita akan mewarnai daerah yang dibentuk oleh sebuat kotak.
with Image1.Canvas do
begin
Rectangle(10,10,100,100);
//buat kotak
Brush.Color:=clRed;
//warna merah
Canvas.Brush.Style:=bsHorizontal; //garis horizontal
Canvas.FloodFill(15,15,clBlack,fsBorder); //isi warna dg patokan 15,15

end;

Hasilnya akan muncul sebagai berikut:

Sesuai dengan namanya, FloodFill membanjiri daerah sesuai dengan Brush yang
digunakan. Pada kode Canvas.FloodFill(15,15,clBlack,fsBorder); banjir
dimulai pada koordinat (15,15) yang terletak didalam kotak, banjir warna tersebut akan
dibatasi oleh garis warna hitam.
Apa yang terjadi jika kita ubah koordinatnya menjadi (9,9) yang berada di luar
lingkaran? Kode Canvas.FloodFill(9,9,clBlack,fsBorder); akan
menghasilkan:

Mengapa? karena Floodfill membanjiri mulai pada posisi 9,9 yang berada diluar kotak
dan terbendung dengan daerah yang dibatasi garis hitam.
sendiri fitur TeeChart yang lain.

2.8 Pertemuan Ke Delapan

canvas.pen.Color:=clGreen;
canvas.pen.Width:=3;
canvas.Brush.Color:=clRed;
canvas.RoundRect(15,15,ClientWidth div 2-15,ClientHeight div 2-15,30,30);
canvas.pen.Color:=clGreen;
canvas.pen.Width:=5;
canvas.Brush.Color:=clRed;
canvas.Ellipse(ClientWidth div 2+15,ClientHeight div 2+15,ClientWidth
-15,ClientHeight);
end;
Hasilnya

2.9 Pertemuan Ke Sembilan

canvas.pen.Color:=clGreen;
canvas.pen.Width:=3;
canvas.Brush.Color:=clRed;
canvas.RoundRect(200,130,ClientWidth div 2,ClientHeight -75,7,7);
canvas.Pen.color:=clRed;
canvas.pen.Width:=5;
canvas.Brush.Color:=clGreen;
canvas.Ellipse(200,130,ClientWidth div 2, ClientHeight -75);
end;
Hasilnya

Bab III Penutup

Demikianlah yang dapat Saya sampaikan mengenai materi yang menjadi

bahasan dalam modul ini, tentunya banyak kekurangan dan kelemahan kerena
terbatasnya pengetahuan kurangnya rujukan atau referensi yang Saya peroleh
hubungannya dengan modul ini ,Saya Berharap Bagi Pembaca Memberikan
Saran Dan Kritik Agar Dalam Pembuatan Modul Kedepannya, Lebih baik Lagi,,
Terima kasih

Kesimpulan
1.
-

Berdasarkan pembahasan yang telah dikaji, maka dapat disimpulkan:

Pengertian grafika komputer:
Grafika komputer adalah bidang dari komputasi visual dimana penggunaan komputer akan
menghasilkan gambar visual secara sintetis dan mengintegrasikan atau mengubah informasi

mengenai ruang dan visual yang dicontohkan dari dunia nyata (Wikipedia).
Grafis komputer adalah suatu bidang ilmu yang mempelajari bagaimana membangun grafik
(gambar) baik 2D maupun 3D yang kelihatan nyata dengan menggunakan komputer. Salah

2.
1.
2.
3.
4.
5.
6.
7.
8.
9.

satu bidang grafika komputer yang sangat terkenal adalah desain grafis (Nana Ramadijanti).
Penerapan Grafika Komputer Pada Berbagai bidang Kehidupan antara lain:
Dalam bidang sains, teknologi dan bisnis
Dalam bidang kartografi
Pembuatan sebuah film
Dalam Computer Aided Design (CAD)
Dalam process control
Dalam bidang otomasi kantor dan publikasi elektronis
Dalam bidang seni dan komersial
Dalam bidang antarmuka grafis
Game

Saran
Dari pemaparan di atas maka penulis menyarankan kepada pembaca agar lebih
memperdalam lagi ilmu tentang grafika komputer untuk menghasilkan suatu grafik atau
gambar yang menarik

Daftar pustaka
http://ariatmancool.blogspot.co.id/2013/05/makalahtentang-grafika-komputer.html