MODUL PERKULIAHAN

KOMPUTER

GRAFIK

Pertemuan ke-1 Sistem Koordinat

Fakultas ProgramStudi TatapMuka KodeMK DisusunOleh IlmuKomputer TeknikInformatika 01 15011 TimDosen

Abstract Kompetensi Ilmu computer saat ini sedang berkembang dengan sangat pesat. Kemajuan dalam bidang ilmu computer ditunjukkan dari berbagai aspek, seperti pada bidang penelitian. Penelitian ini berfokus pada tujuan dan manfaat mempelajari penelitian tersebut.

Dalam pembahasan kali ini dalam pertemuan pertama matakuliah Komputer Grafik akan membahas tentang sistem koordinat.

13 2 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Pendahuluan

Komputer Grafik berkaitan dengan semua aspek dalam pembuatan gambar di

komputer. Aspek aspek tersebut antara lain adalah aspek perangkat keras komputer

(hardware), perangkat lunak (software), serta aplikasi-aplikasi. Sistem grafika

sederhana terdiri dari peralatan masukan (input devices), prosesor, memori, frame

buffer, dan peralatan luaran (output devices). Ilustrasi sistem grafika sederhana

dapat dilihat pada Gambar 1.1. Salah satu peralatan luaran yang lama digunakan

adalah tabung sinar katoda atau CRT (Cathode Ray Tube), yang dapat digunakan

untuk menampilkan isi dari frame buffer.

Gambar 1.1 Sistem grafis sederhana

Sejarah pengembangan grafika komputer berawal dari era tahun 1950an. Pada saat

itu komputer masih sangat sederhana. Teknologi grafika komputer saat itu baru

mampu menampilkan tampilan grafis sederhana menggunakan A/D converter.

Kemudian pada era 1960-1970, mulai dikenal apa yang disebut dengan gambar

wireframe, yakni garis-garis pembentuk objek.

13 3 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Belakangan, pengelolaan grafik menggunakan computer dapat dilakukan dengan

menggunakan aplikasi dimana rancangan gambar dalam bentuk fungsi-fungsi yang

telah membentuk visual telah tersedia. Pengelolaan grafik juga dapat menggunakan

compiler pengelola grafis. Inipun terbagi menjadi 2 kategori, kategori pertama adalah

pengelola grafis primitive yang berbasis console, dan kategori kedua adalah

pengelola grafis wizard yang berbasis graphical user interface.

Model pertama belakangan muncul dalam bentuk aplikasi pengelola grafis interaktif

yang digagas oleh Ivan Sutherland dalam tesis PhD-nya di MIT. Interaktif disini

berarti ada interaksi antara manusia dengan mesin. Lebih spesifik lagi, dalam

sebuah perulangan (loop), mesin akan menampilkan sesuatu, manusia

menggerakkan sebuah alat input (misalnya sebuah light pen), selanjutnya komputer

menghasilkan tampilan baru berdasarkan masukan pengguna tadi. Sistem grafika

dengan tujuan khusus awalnya dibangun dengan membebaskan komputer dengan

tujuan umum dari proses pembaruan tampilan secara kontinyu. Hal ini dilakukan

dengan menggunakan display processor yang memiliki arsitektur. Didalam display

processor juga terdapat instruksi-instruksi untuk menampilkan bentuk-bentuk

primitive seperti garis dan kurva pada CRT. Kelebihan utama dari display processor

adalah bahwa instruksi-instruksi untuk membentuk sebuah gambar dapat disusun

sekali di dalam host untuk kemudian dikirim ke display processor dan disimpan di

memori display processor dalam bentuk sebuah display list. Selanjutnya display

processor akan mengeksekusi berulangkali program yang terdapat pada display list

dengan tingkat pemanggilan program yang cukup cepat untuk menghindari adanya

delay, dengan tidak membebani host sehingga host dapat dibebani dengan tugas

yang lain. Pada era 1970-1980, mulai dikenal standard dalam grafika komputer.

Selain itu, raster graphics menjadi metode yang paling umum saat itu. Workstation

dan personal computer (PC) juga menjadi platform yang umum untuk sebuah sistem

grafika. Pada raster graphics, gambar dihasilkan oleh sebuah array (raster) dari

elemen-elemen gambar (piksel) dalam frame buffer.

13 4 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

OpenGL

OpenGL adalah API yang dikenalkan oleh SGI (Silicon Graphics Inc) kali pertama

pada tahun 1980-an. Awalnya OpenGL diciptakan untuk mendukung proses

rendering pada hanya digunakan untuk mendukung proses rendering yang dilakukan

oleh komputer graphic produksi SGI. Namun akhirnya, OpenGL dijadikan standar

oleh berbagai perusahaan software dan hardware.

Selain itu, satu lagi yang menjadi kelebihan OpenGL adalah fleksibilitas. OpenGL

dapat digunakan hampir pada semua operating system, mulai dari Windows, Linux,

sampai Mac OS X. Salah satu contoh Game 3D yang menggunakan OpenGL

sebagai API adalah Quake.

Berikut adalah contoh program primitive dengan OpenGL berbasis console:

#include

#include

#include

main()

{

char s[5];

int data[] = {10,12,15,20,8,5,18,25,20,10};

int grDriver = DETECT, grMode, grErr;

initgraph(&grDriver, &grMode, "C:\\bc5\\BGI");

grErr = graphresult();

if (grErr != grOk) {

printf("BGI error: %s\n",

grapherrormsg(grErr));

return grErr;

13 5 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

}

unsigned xMax = getmaxx();

unsigned yMax = getmaxy();

setfillstyle(SOLID_FILL, WHITE);

bar(0, 0, xMax, yMax);

setcolor(GREEN);

ellipse(250, 80, 0, 360, 100, 30);

setcolor(BLUE);

settextstyle(SANS_SERIF_FONT, HORIZ_DIR, 2);

outtextxy(180, 60, "Grafik batang");

setcolor(RED);

line(50, yMax-50, xMax-50, yMax-50);

line(50, 50, 50, yMax-50);

setcolor(BLACK);

settextstyle(DEFAULT_FONT, VERT_DIR, 1);

for (int i=0; i

13 6 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

DirectX

Berbeda dengan OpenGL yang hanya digunakan sebagai interface graphics saja.

DirectX merupakan sebuah paket terdiri dari Direct3D, Direct-Sound dan DirectPlay.

Direct3D adalah API untuk graphic, Direct-Sound untuk suara dan DirectPlay untuk

jaringan. DirectX dikembangkan oleh Microsoft. Saat ini keberadaan DirectX sudah

sangat luas. Namun saat ini DirectX lebih diperuntukkan pada aplikasi Windows

saja. Hal inilah yang sampai saat ini banyak disayangkan oleh para programer

graphic. Selain itu, yang menjadi kelemahan bagi DirectX adalah Anda tidak selalu

mendapatkan versi terbaru dari DirectX setiap Anda menginstal driver terbaru video

card Anda. Untuk meng-update DirectX terbaru Anda harus menginstalnya secara

tersendiri. Untungnya DirectX ini disediakan secara cuma-cuma oleh Microsoft pada

situsnya, yaitu di http://www.microsoft.com/directx .

Berikut ini adalah contoh program dengan DirectX berbasis Graphical User Interface

(AppWizard). Meskipun programnya kelihatannya panjang, tetapi sebahagian besar

adalah default. Yang ditulis hanyalah yang diblok (berwarna teks merah).

// bkarakterView.cpp : implementation of the CBkarakterView class

#include "stdafx.h"

#include "bkarakter.h"

#include "bkarakterDoc.h"

#include "bkarakterView.h"

#ifdef _DEBUG

#define new DEBUG_NEW

#undef THIS_FILE

13 7 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

static char THIS_FILE[] = __FILE__;

#endif

// CBkarakterView

IMPLEMENT_DYNCREATE(CBkarakterView, CView)

BEGIN_MESSAGE_MAP(CBkarakterView, CView)

//{{AFX_MSG_MAP(CBkarakterView)

// NOTE - the ClassWizard will add and remove mapping macros here.

// DO NOT EDIT what you see in these blocks of generated code!

//}}AFX_MSG_MAP

// Standard printing commands

ON_COMMAND(ID_FILE_PRINT, CView::OnFilePrint)

ON_COMMAND(ID_FILE_PRINT_DIRECT, CView::OnFilePrint)

ON_COMMAND(ID_FILE_PRINT_PREVIEW, CView::OnFilePrintPreview)

END_MESSAGE_MAP()

/////////////////////////////////////////////////////////////////////////////

// CBkarakterView construction/destruction

CBkarakterView::CBkarakterView()

{

// TODO: add construction code here

}

CBkarakterView::~CBkarakterView()

13 8 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

{

}

BOOL CBkarakterView::PreCreateWindow(CREATESTRUCT& cs)

{

// TODO: Modify the Window class or styles here by modifying

// the CREATESTRUCT cs

return CView::PreCreateWindow(cs);

}

/////////////////////////////////////////////////////////////////////////////

// CBkarakterView drawing

void CBkarakterView::OnDraw(CDC* pDC)

{

CBkarakterDoc* pDoc = GetDocument();

ASSERT_VALID(pDoc);

// TODO: add draw code for native data here

CString NamaKk=" Nama : Faisal Abdurrahman";

CString NimKk=" NIM : 41512120043";

CString NamaWk=" Nama : Arif Mustakim";

CString NimWk=" NIM : 41512120190";

CString topic=" Membuat Segitiga";

pDC->TextOut(30,50,NamaKk);

pDC->TextOut(30,70,NimKk);

pDC->TextOut(30,90,NamaWk);

pDC->TextOut(30,110,NimWk);

13 9 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

pDC->TextOut(30,130,topic);

CFont slogan1;

CFont slogan2;

CFont slogan3;

slogan1.CreateFont(20,10,0,0,0,FALSE,FALSE,FALSE,0,0,0,0,0,"Arial");

CFont *myslog1=pDC->SelectObject(&slogan1);

CString slog1 = "Hidup itu adalah Perjuangan";

pDC->SetBkMode(TRANSPARENT);

pDC->SetTextColor(RGB(255,255,0));

pDC->TextOut(300,300,slog1);

slogan2.CreateFont(20,10,2950,0,0,FALSE,FALSE,FALSE,0,0,0,0,0,"Arial");

CFont *myslog2=pDC->SelectObject(&slogan2);

CString slog2 = "Hidup itu adalah Perjuangan";

pDC->SetBkMode(TRANSPARENT);

pDC->SetTextColor(RGB(0,255,0));

pDC->TextOut(460,50,slog2);

slogan3.CreateFont(20,10,600,0,0,FALSE,FALSE,FALSE,0,0,0,0,0,"Arial");

CFont *myslog3=pDC->SelectObject(&slogan3);

CString slog3 = "Hidup itu adalah Perjuangan";

pDC->SetBkMode(TRANSPARENT);

pDC->SetTextColor(RGB(255,0,0));

pDC->TextOut(300,300,slog3);

}

/////////////////////////////////////////////////////////////////////////////

13 10 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

// CBkarakterView printing

BOOL CBkarakterView::OnPreparePrinting(CPrintInfo* pInfo)

{

// default preparation

return DoPreparePrinting(pInfo);

}

void CBkarakterView::OnBeginPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/)

{

// TODO: add extra initialization before printing

}

void CBkarakterView::OnEndPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/)

{

// TODO: add cleanup after printing

}

/////////////////////////////////////////////////////////////////////////////

// CBkarakterView diagnostics

#ifdef _DEBUG

void CBkarakterView::AssertValid() const

{

CView::AssertValid();

}

13 11 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

void CBkarakterView::Dump(CDumpContext& dc) const

{

CView::Dump(dc);

}

CBkarakterDoc* CBkarakterView::GetDocument() // non-debug version is inline

{

ASSERT(m_pDocument->IsKindOf(RUNTIME_CLASS(CBkarakterDoc)));

return (CBkarakterDoc*)m_pDocument;

}

#endif //_DEBUG

/////////////////////////////////////////////////////////////////////////////

// CBkarakterView message handlers

Sistem Koordinat

Sistem Koordinat merupakan kerangka untuk menentukan posisi dari sebuah objek.

Selama ini dikenal beberapa sistem koordinat, diantaranya adalah sistem:

Koordinat Cartesian

Koordinat Bola

Koordinat Silinder

Koordinat Layar

1 Sistem Koordinat Cartesian

Dalam dua dimensi, terdiri dari sumbu X (absis) dan sumbu Y (ordinat)

Terbagi dalam 4 kuadran

1. Kuadran I meliputi X Positif dan Y Positif

2. Kuadran II meliputi X Negative dan Y Positif

3. Kuadran III meliputi X negative dan Y negative

13 12 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

4. Kuadran IV meliputi X Positif dan Y negative

Digambarkan sebagai berikut : y

II I x

III IV

:

Dalam 3 Dimensi, terdiri dari sumbu X,sumbu Y dan sumbu Z

Terbagi dalam 8 kuadran

1. Kuadran I meliputi X Positif dan Y Positif dan Z positif

2. Kuadran II meliputi X Negative dan Y Positif dan Z positif

3. Kuadran III meliputi X negative dan Y negative dan Z Positif

4. Kuadran IV meliputi X Positif dan Y negative dan Z Positif

5. Kuadran V meliputi X Positif dan Y positif dan Z negative

6. Kuadran VI meliputi X Negatif dan Y Positif dan Z Negatif

7. Kuadran VII meliputi X Negatif dan Y negative dan Z Negatif

8. Kuadran IV meliputi X Positif dan Y negative dan Z Negatif

Digambarkan sebagai berikut : z

y x

13 13 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

2 Sistem Koordinat Bola Hanya dikenal dalam ruang tiga dimensi (3D).

Terdiri dari sumbu X, sumbu Y, sumbu Z, dua parameter sudut, Yaitu Phi dan

Theta serta satu parameter jari-jari r.

3 Sistem Koordinat Silinder Hanya dikenal dalam ruang tiga dimensi (3D).

Terdiri dari sumbu X, sumbu Y, sumbu Z, satu parameter sudut phi, serta satu

parameter jari-jari (r).

4 System Koordinat Layar

Sistem koordinat yang digunakan pada layar monitor.

Konsep sama dengan koordinat Cartesian, tetapi tanda pada sumbu Z dibalik

(untuk 3D) atau tanda pada sumbu Y dibalik (pada 2D).

Digambarkan sebagai berikut :

- Untuk gambar 2 dimensi -

Y(-) X(-) (0,0) X(+) Y(+)

- Untuk gambar 3 dimensi

13 14 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

A. PRAKTIKUM

1. Membangkitkan Sebuah Titik Langkah-langkah:

Tentukan proyeksi ke arah sumbu-x (x1)

Tentukan proyeksi ke arah sumbu-y (y1)

Gunakan kata kunci MoveTo(x1,y1) untuk menempatkan titik pada

koordinat (x1,y1).

Program

int x1=100, y1=100;

pDC->MoveTo(x1,y1);

2. Membangkitkan Garis Langkah-langkah:

Tentukan koordinat titik tujuan dalam proyeksi arah sumbu-x (x2)

Tentukan koordinat titik tujuan dalam proyeksi arah sumbu-y (y2)

Gunakan kata kunci LineTo(x2, y2) untuk menarik garis dari titik (x1,

y1)

Program:

(Lanjutan dari program sebelumnya)

int x2=400, y2=300;

pDC->LineTo(x2, y2);

13 15 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Hasil

Latihan:

Lanjutkan program di atas (membuat garis) sehingga diperoleh bentuk tertentu yang

beraturan, misalnya bentuk diamond atau belah ketupat.atau segitiga siku-siku.

DAFTAR PUSTAKA 1. Janner Simarmata, Tintin Chandra (2007), Grafika Komputer, Andi,

Yogyakarta 2. Abdul Kadir (2014), Panduan Pemrograman Visual C++, Andi, Yogyakarta 3. F.S.Hill, Jr.(2001), COMPUTER GRAPHICS Using Open GL, Second Edition,

Prentice Hall, New York 4. www.academia.edu/4870575/Bahan_Ajar_Mata_Kuliah_Grafika_Komputer (diakses

pada Tanggal 23 September 2016)

MODUL PERKULIAHAN

KOMPUTER

GRAFIK

Pertemuan ke-2 Membangkitkan Karakter

Fakultas ProgramStudi TatapMuka KodeMK DisusunOleh IlmuKomputer TeknikInformatika 02 15011 TimDosen

Abstract Kompetensi Ilmu computer saat ini sedang berkembang dengan sangat pesat. Kemajuan dalam bidang ilmu computer ditunjukkan dari berbagai aspek, seperti pada bidang penelitian. Penelitian ini berfokus pada tujuan dan manfaat mempelajari penelitian tersebut.

Dalam pembahasan kali ini dalam pertemuan pertama matakuliah Komputer Grafik akan membahas tentang cara atau metode untuk menempatkan string pada koordinat layar dan mengatur style dan tata letak karakter dan atau string.

13 2 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Pendahuluan

Komputer Grafik berkaitan dengan semua aspek dalam pembuatan gambar di

komputer. Aspek aspek tersebut antara lain adalah aspek perangkat keras komputer

(hardware), perangkat lunak (software), serta aplikasi-aplikasi. Sistem grafika

sederhana terdiri dari peralatan masukan (input devices), prosesor, memori, frame

buffer, dan peralatan luaran (output devices). Ilustrasi sistem grafika sederhana

dapat dilihat pada Gambar 1.1. Salah satu peralatan luaran yang lama digunakan

adalah tabung sinar katoda atau CRT (Cathode Ray Tube), yang dapat digunakan

untuk menampilkan isi dari frame buffer.

Gambar 1.1 Sistem grafis sederhana

Sejarah pengembangan grafika komputer berawal dari era tahun 1950an. Pada saat

itu komputer masih sangat sederhana. Teknologi grafika komputer saat itu baru

mampu menampilkan tampilan grafis sederhana menggunakan A/D converter.

Kemudian pada era 1960-1970, mulai dikenal apa yang disebut dengan gambar

wireframe, yakni garis-garis pembentuk objek.

13 3 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Belakangan, pengelolaan grafik menggunakan computer dapat dilakukan dengan

menggunakan aplikasi dimana rancangan gambar dalam bentuk fungsi-fungsi yang

telah membentuk visual telah tersedia. Pengelolaan grafik juga dapat menggunakan

compiler pengelola grafis. Inipun terbagi menjadi 2 kategori, kategori pertama adalah

pengelola grafis primitive yang berbasis console, dan kategori kedu adalah

pengelola grafis wizard yang berbasis graphical user interface.

Model pertama belakangan muncul dalam bentuk aplikasi pengelola grafis interaktif

yang digagas oleh Ivan Sutherland dalam tesis PhD-nya di MIT. Interaktif disini

berarti ada interaksi antara manusia dengan mesin. Lebih spesifik lagi, dalam

sebuah perulangan (loop), mesin akan menampilkan sesuatu, manusia

menggerakkan sebuah alat input (misalnya sebuah light pen), selanjutnya komputer

menghasilkan tampilan baru berdasarkan masukan pengguna tadi. Sistem grafika

dengan tujuan khusus awalnya dibangun dengan membebaskan komputer dengan

tujuan umum dari proses pembaruan tampilan secara kontinyu. Hal ini dilakukan

dengan menggunakan display processor yang memiliki arsitektur. Didalam display

processor juga terdapat instruksi-instruksi untuk menampilkan bentuk-bentuk

primitive seperti garis dan kurva pada CRT. Kelebihan utama dari display processor

adalah bahwa instruksi-instruksi untuk membentuk sebuah gambar dapat disusun

sekali di dalam host untuk kemudian dikirim ke display processor dan disimpan di

memori display processor dalam bentuk sebuah display list. Selanjutnya display

processor akan mengeksekusi berulangkali program yang terdapat pada display list

dengan tingkat pemanggilan program yang cukup cepat untuk menghindari adanya

delay, dengan tidak membebani host sehingga host dapat dibebani dengan tugas

yang lain. Pada era 1970-1980, mulai dikenal standard dalam grafika komputer.

Selain itu, raster graphics menjadi metode yang paling umum saat itu. Workstation

dan personal computer (PC) juga menjadi platform yang umum untuk sebuah sistem

grafika. Pada raster graphics, gambar dihasilkan oleh sebuah array (raster) dari

elemen-elemen gambar (piksel) dalam frame buffer.

13 4 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Menempatkan String

Identitas sebuah gambar dapat diketahui dengan berbagai macam cara, salah

satunya dengan cara menuliskannya pada layar. Pesan-pesan dan informasi apapun

yang dituliskan pada layar seringkali harus dibuat menarik sehingga mendapatkan

perhatian dan rasa ingin tahu pemirsanya.

Pada bagian ini akan dibahas tentang bagaimana menempatkan sebuah string

(informasi) pada koordinat layar. Selain itu, akan juga dibahas bagaimana mengatur

jenis font untuk sebuah string yang akan ditempatkan pada koordinat layar,

bagaimana mengatur tataletaknya, bagaimana mengatur warna karakternya,

bagaimana mengatur latar-belakangnya, dan bagaimana mengatur style

karakternya.

String diperlukan dalam computer grafik untuk labeling. Pada gambar-gambar yang

dihasilkan senantiasa disertai dengan keterangan tekstual di halaman gambar

dengan maksud untuk memperjelas maksud dan tujuan gambar. Labeling akan

memperkaya informasi yang disampaikan secara tersirat oleh gambar. Akan tetapi,

meskipun labeling/string selama ini dikenal sebagai besaran karakter, tetapi

dilingkungan computer grafis, string tetaplah dipandang sebagai grafis (raster/pixel)

dimana domain informasinya membentuk sebuah empat persegi panjang

sebagaimana domain-domain informasi grafis lainnya.

1. Menempatkan String pada Koordinat Layar

Bentuk umum :

CString nama_objek = nilai_string;

Contoh :

CString namaku = Nama: Frida Astuti Dianita Putri;

13 5 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Untuk menempatkan string pada posisi tertentu dilembar/halaman output digunakan

fungsi TextOut() yang bentuk umumnya sebagai berikut :

TextOut(Koordinat, nama_objek); Contoh :

pDC->TextOut(100,100,namaku);

2. Penempatan string dengan modifikasi Class : CFont

Method : CreateFont(a, b, c, d, e, f, g, h, i, j, k, l, m, n)

Dengan nilai argumen-argumen:

a = tinggi font

b = lebar font

c = sudut putar (30o ditulis 300)

d = default

e = ketebalan font

f = argumen logik untuk style ITALIC (bernilai: TRUE atau FALSE)

g = argumen logik untuk style UNDERLINE (garis bawah)

h = argumen logik untuk style STRIKETHROUGH (garis tengah)

i = default

j = default

k = default

l = default

m = default

n = jenis font

Contoh 1:

CFont kalimat;

Kalimat.CreateFont(0,0,0,0,0,FALSE,FALSE,FALSE,0,0,0,0,0,Arial);

CFont *fontDefault= pDC->SelectObject (&kalimat);

CString kalimatku = Nama: Frida Astuti Dianita Putri;

pDC->TextOut(200,200,kalimatku);

13 6 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

CFont VisualCpp;

VisualCpp.CreateFont(60,20,450,0,FW_BOLD,FALSE,FALSE,FALSE,0,0,0,0,0,Arial);

CFont*appwizard=pDC->SelectObject(&VisualCpp);

pDC->TextColor(RGB(0,0,0));

pDC->SetBkMode(TRANSPARENT);

pDC->TextOut(50,400,mystring);

CString mystring=APPWIZARD VISUAL C++;

CFont Silang;

Silang.CreateFont(60,20,3150,0,FW_BOLD,FALSE,FALSE,FALSE,0,0,0,0,0,Arial);

CFont*silangnya=pDC->SelectObject(&Silang);

pDC->SetTextColor(RGB(0,0,255));

pDC->TextOut(100,100,mystring);

Untuk memberi warna pada huruf digunakan fungsi/method:

SetTextColor (RGB(R,G,B));

Untuk memberikan efek transfaran digunakan fungsi/method:

SetBkMode(TRANSPARENT);

Contoh 2:

Contoh 3: Menyajikan string membentuk jari-jari

// jejariView.cpp : implementation of the CJejariView class

#include "stdafx.h"

#include "jejari.h"

#include "jejariDoc.h"

#include "jejariView.h"

#ifdef _DEBUG

#define new DEBUG_NEW

13 7 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

#undef THIS_FILE

static char THIS_FILE[] = __FILE__;

#endif

/////////////////////////////////////////////////////////////////////////////

// CJejariView

IMPLEMENT_DYNCREATE(CJejariView, CView)

BEGIN_MESSAGE_MAP(CJejariView, CView)

//{{AFX_MSG_MAP(CJejariView)

// NOTE - the ClassWizard will add and remove mapping

macros here.

// DO NOT EDIT what you see in these blocks of generated

code!

//}}AFX_MSG_MAP

// Standard printing commands

ON_COMMAND(ID_FILE_PRINT, CView::OnFilePrint)

ON_COMMAND(ID_FILE_PRINT_DIRECT, CView::OnFilePrint)

ON_COMMAND(ID_FILE_PRINT_PREVIEW,

CView::OnFilePrintPreview)

END_MESSAGE_MAP()

/////////////////////////////////////////////////////////////////////////////

// CJejariView construction/destruction

CJejariView::CJejariView()

{

// TODO: add construction code here

}

CJejariView::~CJejariView()

{

13 8 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

}

BOOL CJejariView::PreCreateWindow(CREATESTRUCT& cs)

{

// TODO: Modify the Window class or styles here by modifying

// the CREATESTRUCT cs

return CView::PreCreateWindow(cs);

}

/////////////////////////////////////////////////////////////////////////////

// CJejariView drawing

void CJejariView::OnDraw(CDC* pDC)

{

CJejariDoc* pDoc = GetDocument();

ASSERT_VALID(pDoc);

// TODO: add draw code for native data here

CRect aK;

GetClientRect(aK);

CFont font;

for(int sudut=0; sudutSelectObject(&font);

pDC->TextOut(aK.right/2,aK.bottom/2,"Selamat Belajar Visual C++");

pDC->SelectObject(fontBawaan);

font.DeleteObject();

}

}

/////////////////////////////////////////////////////////////////////////////

13 9 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

// CJejariView printing

BOOL CJejariView::OnPreparePrinting(CPrintInfo* pInfo)

{

// default preparation

return DoPreparePrinting(pInfo);

}

void CJejariView::OnBeginPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/)

{

// TODO: add extra initialization before printing

}

void CJejariView::OnEndPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/)

{

// TODO: add cleanup after printing

}

/////////////////////////////////////////////////////////////////////////////

// CJejariView diagnostics

#ifdef _DEBUG

void CJejariView::AssertValid() const

{

CView::AssertValid();

}

void CJejariView::Dump(CDumpContext& dc) const

{

CView::Dump(dc);

}

CJejariDoc* CJejariView::GetDocument() // non-debug version is inline

{

13 10 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

ASSERT(m_pDocument->IsKindOf(RUNTIME_CLASS(CJejariDoc)));

return (CJejariDoc*)m_pDocument;

}

#endif //_DEBUG

/////////////////////////////////////////////////////////////////////////////

// CJejariView message handlers

Outputnya adalah sebagai berikut:

Latihan:

1. Kerjakan contoh 1, contoh 2, dan contoh 3.

2. Perlihatkan hasil untuk program berikut ini:

13 11 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

3. //Program : 2.3

CString Namaku=" Nama : Herdi Sutrisno";

CString Nimku=" NIM : 2010230085";

CString topic=" Membuat Segitiga";

pDC->TextOut(30,50,Namaku);

pDC->TextOut(30,70,Nimku);

pDC->TextOut(30,90,topic);

CFont slogan1;

CFont slogan2;

CFont slogan3;

slogan1.CreateFont(20,10,0,0,0,FALSE,FALSE,FALSE,0,0,0,0,0,"Arial"

);

CFont *myslog1=pDC->SelectObject(&slogan1);

CString slog1 = "Hidup itu adalah Perjuangan";

pDC->SetBkMode(TRANSPARENT);

pDC->SetTextColor(RGB(255,255,0));

pDC->TextOut(300,300,slog1);

slogan2.CreateFont(20,10,650,0,0,FALSE,FALSE,FALSE,0,0,0,0,0,"Ari

al");

CFont *myslog2=pDC->SelectObject(&slogan2);

CString slog2 = "Hidup itu adalah Perjuangan";

pDC->SetBkMode(TRANSPARENT);

pDC->SetTextColor(RGB(0,255,0));

pDC->TextOut(460,50,slog2);

slogan3.CreateFont(20,10,600,0,0,FALSE,FALSE,FALSE,0,0,0,0,0,"Ari

al");

CFont *myslog3=pDC->SelectObject(&slogan3);

CString slog3 = "Hidup itu adalah Perjuangan";

pDC->SetBkMode(TRANSPARENT);

pDC->SetTextColor(RGB(255,0,0));

pDC->TextOut(300,300,slog3);

13 12 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

4. Buatlah program untuk mendapatkan hasil berikut ini:

DAFTAR PUSTAKA

1. Janner Simarmata, Tintin Chandra (2007), Grafika Komputer, Andi, Yogyakarta

2. Abdul Kadir (2014), Panduan Pemrograman Visual C++, Andi, Yogyakarta 3. F.S.Hill, Jr.(2001), COMPUTER GRAPHICS Using Open GL, Second Edition,

Prentice Hall, New York 4. www.academia.edu/4870575/Bahan_Ajar_Mata_Kuliah_Grafika_Komputer (diakses

pada Tanggal 23 September 2016)

MODUL PERKULIAHAN

KOMPUTER

GRAFIK

Pertemuan ke-3 Bentuk-Bentuk Dasar Geometri

Fakultas ProgramStudi TatapMuka KodeMK DisusunOleh IlmuKomputer TeknikInformatika 03 15011 TimDosen

Abstract Kompetensi Ilmu computer saat ini sedang berkembang dengan sangat pesat. Kemajuan dalam bidang ilmu computer ditunjukkan dari berbagai aspek, seperti pada bidang penelitian. Penelitian ini berfokus pada tujuan dan manfaat mempelajari penelitian tersebut.

Dalam pembahasan kali ini dalam pertemuan ketiga matakuliah Komputer Grafik akan membahas tentang cara atau metode untuk membuat bangun-bangun dasar geometri, seperti empat persegi panjang, lingkaran, busur, dan modifikasinya masing-masing.

13 2 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Pendahuluan

Komputer Grafik berkaitan dengan semua aspek dalam pembuatan gambar di

komputer. Aspek aspek tersebut antara lain adalah aspek perangkat keras komputer

(hardware), perangkat lunak (software), serta aplikasi-aplikasi. Sistem grafika

sederhana terdiri dari peralatan masukan (input devices), prosesor, memori, frame

buffer, dan peralatan luaran (output devices). Ilustrasi sistem grafika sederhana

dapat dilihat pada Gambar 3.1. Salah satu peralatan luaran yang lama digunakan

adalah tabung sinar katoda atau CRT (Cathode Ray Tube), yang dapat digunakan

untuk menampilkan isi dari frame buffer.

Gambar 3.1 Sistem grafis sederhana

Sejarah pengembangan grafika komputer berawal dari era tahun 1950an. Pada saat

itu komputer masih sangat sederhana. Teknologi grafika komputer saat itu baru

mampu menampilkan tampilan grafis sederhana menggunakan A/D converter.

Kemudian pada era 1960-1970, mulai dikenal apa yang disebut dengan gambar

wireframe, yakni garis-garis pembentuk objek.

Belakangan, pengelolaan grafik menggunakan computer dapat dilakukan dengan

menggunakan aplikasi dimana rancangan gambar dalam bentuk fungsi-fungsi yang

13 3 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

telah membentuk visual telah tersedia. Pengelolaan grafik juga dapat menggunakan

compiler pengelola grafis. Inipun terbagi menjadi 2 kategori, kategori pertama adalah

pengelola grafis primitive yang berbasis console, dan kategori kedu adalah

pengelola grafis wizard yang berbasis graphical user interface.

Model pertama belakangan muncul dalam bentuk aplikasi pengelola grafis interaktif

yang digagas oleh Ivan Sutherland dalam tesis PhD-nya di MIT. Interaktif disini

berarti ada interaksi antara manusia dengan mesin. Lebih spesifik lagi, dalam

sebuah perulangan (loop), mesin akan menampilkan sesuatu, manusia

menggerakkan sebuah alat input (misalnya sebuah light pen), selanjutnya komputer

menghasilkan tampilan baru berdasarkan masukan pengguna tadi. Sistem grafika

dengan tujuan khusus awalnya dibangun dengan membebaskan komputer dengan

tujuan umum dari proses pembaruan tampilan secara kontinyu. Hal ini dilakukan

dengan menggunakan display processor yang memiliki arsitektur. Didalam display

processor juga terdapat instruksi-instruksi untuk menampilkan bentuk-bentuk

primitive seperti garis dan kurva pada CRT. Kelebihan utama dari display processor

adalah bahwa instruksi-instruksi untuk membentuk sebuah gambar dapat disusun

sekali di dalam host untuk kemudian dikirim ke display processor dan disimpan di

memori display processor dalam bentuk sebuah display list. Selanjutnya display

processor akan mengeksekusi berulangkali program yang terdapat pada display list

dengan tingkat pemanggilan program yang cukup cepat untuk menghindari adanya

delay, dengan tidak membebani host sehingga host dapat dibebani dengan tugas

yang lain. Pada era 1970-1980, mulai dikenal standard dalam grafika komputer.

Selain itu, raster graphics menjadi metode yang paling umum saat itu. Workstation

dan personal computer (PC) juga menjadi platform yang umum untuk sebuah sistem

grafika. Pada raster graphics, gambar dihasilkan oleh sebuah array (raster) dari

elemen-elemen gambar (piksel) dalam frame buffer.

13 4 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Bentuk-Bentuk Dasar Geometri

Sebuah objek gambar bisa jadi seluruhnya atau sebagian terdiri atau tersusun dari

beberapa bangun dasar geometri. Rangkaian bangun-bangun dasar geometri ini

disusun sedemikian dengan posisi yang tepat sehingga membentuk sebuah objek

bangunan atau gambar yang bisa dikenal, dipahami, dan didefinisikan.

Beberapa bangun dasar yang dimaksud adalah empat persegi panjang

(modifikasinya bisa bujursangkar, dan pojok-pojok melengkung), elips (modifikasinya

bisa lingkaran), busur dengan ujung-ujung terbuka, busur dengan ujung-ujung

terhubung satu sama lain, atau busur dengan ujung-ujung terhubung ke pusat

lingkaran atau elips. Bangun-bangun dasar ini secara bentuk sebenarnya hanya

mengacu kepada satu kerangka bangun, yaitu kerangka bangun empat persegi

panjang (rectangle).

1. Merancang Bangun Empat Persegi Panjang Kata kunci untuk bangun empat persegi panjang adalah Rectangle(). Secara umum penggunaan kata kunci (method) adalah sebagai berikut:

Rectangle(x1, y1, x2, y2);

Yaitu sebuah function dengan empat argumen yang sesungguhnya merupakan

proyeksi dari dari titik koordinat. Satu titik koordinat pertama diwakili oleh pasangan

berindeks 1 yaitu (x1,y1) sebagai koordinat titik pojok kiri atas, dan satu titik kedua

diwakili oleh pasangan berindeks 2 yaitu (x2,y2) sebagai koordinat titik pojok

diagonal dari titik koordinat pertama.

13 5 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

(x1,y1) (x1,y1)

(x2,y2) (x2,y2)

(a) (b)

Gambar 3.2. (a) Kerangka bangun empat persegi panjang. (b) Setelah dikenakan

method Rectangle()

Jika R adalah rasio fraksi tinggi (arah y) terhadap fraksi panjang (arah x), dan

diformulasikan sebagai:

xy

xxyyR

1212

Untuk R > 1, maka bangun yang diperoleh adalah empat persegi panjang tegak,

untuk R = 1, maka bangun yang diperoleh adalah bujur sangkar, dan untuk R < 1,

maka bangun yang diperoleh adalah empat persegi panjang rebah.

2. Merancang Bangun Empat Persegi Panjang dengan Pojok-Pojok Melengkung

Kata kunci untuk rancangan bangun empat persegi panjang dengan pojok-pojok

melengkung adalah RoundRect(). Secara umum, bentuk penggunaan method adalah sebagai berikut:

RoundRect(x1,y1,x2,y2,x3,y3);

Yaitu sebuah function dengan enam argumen. Dua argumen pertama merupakan

pasangan koordinat pada titik pojok kiri atas kerangka bangun. Dua argumen kedua

merupakan pasangan koordinat pada titik pojok diagonalnya. Sementara argumen

kelima menyatakan panjang kelengkungan dalam arah sumbu-x, dan argumen

13 6 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

keenam menyatakan panjang kelengkungan dalam arah-y. Perhatikan bahwa

bangun akan mengacu kepada empat persegi panjang yang diperlihatkan oleh

gambar dengan garis putus-putus (dash). Ketika dikenakan operasi RoundRect(), maka akan terbentuk kelengkungan berdasarkan nilai x3 dan nilai y3.

(x1,y1) (x1,y1) x3

y3

(x2,y2) (x2,y2)

(a) (b)

Gambar 3.3. (a) Kerangka bangun empat persegi panjang. (b). Setelah dikenakan

method RoundRect()

3. Merancang Bangun Bulatan

Kata kunci untuk rancangan bangun bulatan adalah Ellipse(). Secara umum, bentuk penggunaan method adalah sebagai berikut:

Ellipse(x1,y1,x2,y2);

Yaitu sebuah function dengan empat argumen. Dua argumen pertama merupakan

pasangan koordinat pada titik pojok kiri atas kerangka bangun. Dua argumen kedua

merupakan pasangan koordinat pada titik pojok diagonalnya. Perhatikan bahwa

bangun akan mengacu kepada empat persegi panjang yang diperlihatkan oleh

gambar dengan garis putus-putus (dash). Ketika dikenakan operasi Ellipse(), maka akan terbentuk bulatan yang mengacu kepada empat persegi panjang.

13 7 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

(x1,y1) (x1,y1)

(x2,y2) (x2,y2)

(a) (b)

Gambar 3.4. (a) Kerangka bangun empat persegi panjang. (b) Setelah dikenakan

method Ellipse()

4. Merancang Bangun Busur dengan Ujung-Ujung Terbuka

Kata kunci untuk rancangan bangun busur dengan ujung-ujung terbuka adalah

Arc(). Secara umum, bentuk penggunaan method adalah sebagai berikut:

Arc(x1,y1,x2,y2,x3,y3,x4,y4);

Yaitu sebuah function dengan delapan argumen. Dua argumen pertama merupakan

pasangan koordinat pada titik pojok kiri atas kerangka bangun. Dua argumen

berikutnya merupakan pasangan koordinat pada titik pojok diagonalnya. Dua

argumen berikutnya merupakan pasangan titik koordinat untuk ujung busur pertama,

dan dua argumen berikutnya merupakan pasangan titik koordinat untuk ujung busur

kedua. Perhatikan bahwa bangun akan mengacu kepada empat persegi panjang

yang diperlihatkan oleh gambar dengan garis putus-putus (dash). Ketika dikenakan

operasi Arc(), maka akan terbentuk busur dengan ujung-ujung terbuka.

13 8 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

(x1,y1) (x1,y1) (x3,y3)

(x4,y4)

(x2,y2) (x2,y2)

(a) (b)

Gambar 3.5. (a) Kerangka bangun empat persegi panjang. (b) Setelah dikenakan

method Arc()

5. Merancang Bangun Busur dengan Ujung-Ujung Terhubung

Kata kunci untuk rancangan bangun busur dengan ujung-ujung terhubung adalah

Chord(). Secara umum, bentuk penggunaan method adalah sebagai berikut:

Chord(x1,y1,x2,y2,x3,y3,x4,y4);

Yaitu sebuah function dengan delapan argumen. Dua argumen pertama merupakan

pasangan koordinat pada titik pojok kiri atas kerangka bangun. Dua argumen

berikutnya merupakan pasangan koordinat pada titik pojok diagonalnya. Dua

argumen berikutnya merupakan pasangan titik koordinat untuk ujung busur pertama,

dan dua argumen berikutnya merupakan pasangan titik koordinat untuk ujung busur

kedua. Perhatikan bahwa bangun akan mengacu kepada empat persegi panjang

yang diperlihatkan oleh gambar dengan garis putus-putus (dash). Ketika dikenakan

operasi Chord(), maka akan terbentuk busur dengan ujung-ujung terhubung satu sama lain dengan sebuah garis lurus.

13 9 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

(x1,y1) (x1,y1) (x3,y3)

(x4,y4)

(x2,y2) (x2,y2)

(a) (b)

Gambar 3.6 (a) Kerangka bangun empat persegi panjang. (b) Setelah dikenakan

method Chord()

6. Merancang Bangun Busur dengan Ujung-Ujung Terhubung ke Pusat

Kata kunci untuk rancangan bangun busur dengan ujung-ujung terhubung ke pusat

adalah Pie(). Secara umum, bentuk penggunaan method adalah sebagai berikut:

Pie(x1,y1,x2,y2,x3,y3,x4,y4);

Yaitu sebuah function dengan delapan argumen. Dua argumen pertama merupakan

pasangan koordinat pada titik pojok kiri atas kerangka bangun. Dua argumen

berikutnya merupakan pasangan koordinat pada titik pojok diagonalnya. Dua

argumen berikutnya merupakan pasangan titik koordinat untuk ujung busur pertama,

dan dua argumen berikutnya merupakan pasangan titik koordinat untuk ujung busur

kedua. Perhatikan bahwa bangun akan mengacu kepada empat persegi panjang

yang diperlihatkan oleh gambar dengan garis putus-putus (dash). Ketika dikenakan

operasi Pie(), maka akan terbentuk busur dengan ujung-ujung terhubung ke pusat.

13 10 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

(x1,y1) (x1,y1) (x3,y3)

(x4,y4)

(x2,y2) (x2,y2)

(a) (b)

Gambar 3.6 (a) Kerangka bangun empat persegi panjang. (b) Setelah dikenakan

method Pie()

Contoh:

// BDGeometriView.cpp : implementation of the CBDGeometriView class #include "stdafx.h" #include "BDGeometri.h" #include "BDGeometriDoc.h" #include "BDGeometriView.h" #ifdef _DEBUG #define new DEBUG_NEW #undef THIS_FILE static char THIS_FILE[] = __FILE__; #endif ///////////////////////////////////////////////////////////////////////////// // CBDGeometriView IMPLEMENT_DYNCREATE(CBDGeometriView, CView) BEGIN_MESSAGE_MAP(CBDGeometriView, CView) //{{AFX_MSG_MAP(CBDGeometriView)

13 11 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

// NOTE - the ClassWizard will add and remove mapping macros here. // DO NOT EDIT what you see in these blocks of generated code! //}}AFX_MSG_MAP // Standard printing commands ON_COMMAND(ID_FILE_PRINT, CView::OnFilePrint) ON_COMMAND(ID_FILE_PRINT_DIRECT, CView::OnFilePrint) ON_COMMAND(ID_FILE_PRINT_PREVIEW, CView::OnFilePrintPreview) END_MESSAGE_MAP() ///////////////////////////////////////////////////////////////////////////// // CBDGeometriView construction/destruction CBDGeometriView::CBDGeometriView() { // TODO: add construction code here } CBDGeometriView::~CBDGeometriView() { } BOOL CBDGeometriView::PreCreateWindow(CREATESTRUCT& cs) { // TODO: Modify the Window class or styles here by modifying // the CREATESTRUCT cs return CView::PreCreateWindow(cs); } /////////////////////////////////////////////////////////////////////////////

13 12 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

// CBDGeometriView drawing void CBDGeometriView::OnDraw(CDC* pDC) { CBDGeometriDoc* pDoc = GetDocument(); ASSERT_VALID(pDoc); // TODO: add draw code for native data here

CString NamaKk=" Nama : Faisal Abdurrahman"; CString NimKk=" NIM : 41512120043"; CString NamaWk=" Nama : Arif Mustakim"; CString NimWk=" NIM : 41512120190"; CString topic=" Merancang Lapangan Sepak Bola"; pDC->TextOut(30,40,NamaKk); pDC->TextOut(30,60,NimKk); pDC->TextOut(30,80,NamaWk); pDC->TextOut(30,100,NimWk); pDC->TextOut(30,120,topic); pDC->Rectangle(100,150,900,550); pDC->Ellipse(400,250,600,450);

} ///////////////////////////////////////////////////////////////////////////// // CBDGeometriView printing BOOL CBDGeometriView::OnPreparePrinting(CPrintInfo* pInfo) { // default preparation return DoPreparePrinting(pInfo); }

13 13 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

void CBDGeometriView::OnBeginPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/) { // TODO: add extra initialization before printing } void CBDGeometriView::OnEndPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/) { // TODO: add cleanup after printing } ///////////////////////////////////////////////////////////////////////////// // CBDGeometriView diagnostics #ifdef _DEBUG void CBDGeometriView::AssertValid() const { CView::AssertValid(); } void CBDGeometriView::Dump(CDumpContext& dc) const { CView::Dump(dc); } CBDGeometriDoc* CBDGeometriView::GetDocument() // non-debug version is inline { ASSERT(m_pDocument->IsKindOf(RUNTIME_CLASS(CBDGeometriDoc))); return (CBDGeometriDoc*)m_pDocument; } #endif //_DEBUG /////////////////////////////////////////////////////////////////////////////

// CBDGeometriView message handlers

13 14 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Outputnya adalah sebagai berikut:

Latihan:

1. Rancang koordinat untuk mendapatkan bangun-bangun dasar geometri di

atas

2. Buat program untuk memperoleh hasil berikut ini:

13 15 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

DAFTAR PUSTAKA 1. Janner Simarmata, Tintin Chandra (2007), Grafika Komputer, Andi,

Yogyakarta 2. Abdul Kadir (2014), Panduan Pemrograman Visual C++, Andi, Yogyakarta 3. F.S.Hill, Jr.(2001), COMPUTER GRAPHICS Using Open GL, Second Edition,

Prentice Hall, New York 4. www.academia.edu/4870575/Bahan_Ajar_Mata_Kuliah_Grafika_Komputer (diakses

pada Tanggal 23 September 2016)

MODUL PERKULIAHAN

KOMPUTER

GRAFIK

Pertemuan ke-4 Pewarnaan (Coloring)

Fakultas ProgramStudi TatapMuka KodeMK DisusunOleh IlmuKomputer TeknikInformatika 04 15011 TimDosen

Abstract Kompetensi Ilmu computer saat ini sedang berkembang dengan sangat pesat. Kemajuan dalam bidang ilmu computer ditunjukkan dari berbagai aspek, seperti pada bidang penelitian. Penelitian ini berfokus pada tujuan dan manfaat mempelajari penelitian tersebut.

Dalam pembahasan kali ini dalam pertemuan ketiga matakuliah Komputer Grafik akan membahas tentang cara atau metode untuk mewarnai bangun-bangun geometri yang berbentuk diagram tertutup, gais-garis, ataupun karakter-karakter dan string.

13 2 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Pendahuluan

Warna termasuk komponen utama guna melengkapi informasi yang diberikan oleh

sebuah citra. Pencitraan sebuah objek akan lebih lengkap jika disertakan warna

bawaan dari objek tersebut.

Warna adalah spektrum tertentu yang terdapat di dalam suatu cahaya sempurna (berwarna putih). Identitas suatu warna ditentukan panjang gelombang cahaya

tersebut. Sebagai contoh warna biru memiliki panjang gelombang 460 nanometer.

Panjang gelombang warna yang masih bisa ditangkap mata manusia berkisar antara

380-780 nanometer.

Dalam peralatan optis, warna bisa pula berarti interpretasi otak terhadap campuran

tiga warna primer cahaya: merah, hijau, biru yang digabungkan dalam komposisi

tertentu. Misalnya pencampuran 100% merah, 0% hijau, dan 100% biru akan

menghasilkan interpretasi warna magenta.

Dalam seni rupa, warna bisa berarti pantulan tertentu dari cahaya yang dipengaruhi

oleh pigmen yang terdapat di permukaan benda. Misalnya pencampuran pigmen

magenta dan cyan dengan proporsi tepat dan disinari cahaya putih sempurna akan

menghasilkan sensasi mirip warna merah.

Setiap warna mampu memberikan kesan dan identitas tertentu sesuai kondisi sosial

pengamatnya. Misalnya warna putih akan memberi kesan suci dan dingin di daerah

Barat karena berasosiasi dengan salju. Sementara di kebanyakan negara Timur

warna putih memberi kesan kematian dan sangat menakutkan karena berasosiasi

dengan kain kafan (meskipun secara teoritis sebenarnya putih bukanlah warna).

Di dalam ilmu warna, hitam dianggap sebagai ketidakhadiran seluruh jenis

gelombang warna. Sementara putih dianggap sebagai representasi kehadiran

seluruh gelombang warna dengan proporsi seimbang. Secara ilmiah, keduanya

bukanlah warna, meskipun bisa dihadirkan dalam bentuk pigmen.

13 3 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Tabel 4.1. Komposisi Warna Dasar

R G B Warna

0 0 0 HItam

255 0 0 Merah

0 255 0 Hijau

0 0 255 Biru

255 0 255 Magenta

255 255 0 Kuning

0 255 255 Cyan

255 255 255 Putih

Tabel 4.2 Daftar warna yang dihimpun dari artikel di Wikipedia.

Nama ContohKodewarna RGB CMYK HSV

Abuabu

#808080 128 128 128 0,0,0,128 0,0,50

Biru

#0000FF 0 0 255 255,255,0,0 240,100,100

Birulaut

#000080 0 0 128 255,255,0,127 240,100,50

Coklat

#964B00 150 75 0 0,74,150,105 30,100,59

Emas

#FFD700 255 215 0 0,40,255,0 51,100,100

Hijau

#00FF00 0 255 0 255,0,255,0 120,100,100

Hitam

#000000 0 0 0 0,0,0,255 0,0,0

Kuning

#FFFF00 255 255 0 0,0,255,0 60,100,100

13 4 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Warna-warna objek dapat disajikan dalam beberapa komposisi, antara lain adalah RGB (Red, Green, Blue) dan CMYK (Cyan, Magenta, Yellow, blacK) ataupun HSV (Hue, Saturation, Value). Bahkan ada penyajian warna dengan menggunakan komposisi NTSC (National Television System Commitee) dan ada juga yang menggunakan komposisi YCbCr.

Merancang Warna Bangun

Untuk mewarnai sebuah bangun geometri diagram tertutup, dibutuhkan class

CBrush, dan secara umum bentuk perintahnya adalah sebagai berikut:

CBrush nama_objek(RGB(nr, ng, nb));

Magenta

#FF00FF 255 0 255 0,100,0,0 300,100,100

Mawar

#FF007F 255 0 127 0,100,50,0 330,100,100

Merah

#FF0000 255 0 0 0,255,255,0 0,100,100

Merahmarun

#800000 128 0 0 0,255,255,127 0,100,50

Merahjambu

#FFC0CB 255 192 203 0,63,52,0 350,25,100

Nila

#6F00FF 111 0 255 57,100,0,0 266,100,100

Oranye

#FF7F00 255 127 0 0,50,100,0 30,100,100

Perak

#C0C0C0 192 192 192 0,0,0,63 0,0,75

Putih

#FFFFFF 255 255 255 0,0,0,0 0,0,100

Sian

#00FFFF 0 255 255 100,0,0,0 180,100,100

Ungu

#BF00FF 191 0 255 25,100,0,0 285,100,100

Violet

#8F00FF 143 0 255 44,255,0,0 274,100,100

Zaitun

#808000 128 128 0 0,0,100,50 60,100,50

13 5 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

CBrush *nama_var_pointer = pDC->SelectObject(&nama_objek);

Dengan

nr = nilai piksel untuk chanel/komponen merah

ng = nilai piksel untuk chanel/komponen hijau

nb = nilai piksel untuk chanel/komponen biru

Untuk memori 8 bit, nilai piksel berkisar antara 0 s/d 255. Nilai piksel 0 berarti

intensitas minimum (representasinya gelap atau hitam), sedangkan nilai piksel 255

berarti intensitas maksimum (representasinya bergantung kepada chanel).

Contoh:

CBrush merah(RGB(255,0,0));

CBrush *mrh=pDC->SelectObject(&merah);

Maka semua objek yang didefinisikan setelah perintah ini berupa bangun geometri

diagram tertutup akan berwarna merah karena nilai piksel untuk chanel merah

adalah maksimum, sementara nilai piksel untuk chanel hijau dan biru mainimum.

Merancang Warna Garis

Untuk mewarnai sebuah garis, dibutuhkan class CPen untuk meng-instansiasi objek

garis yang dibangkitkan dengan method CreatePen(). Secara umum bentuk

perintahnya adalah sebagai berikut:

CPen nama_objek;

nama_objek.CreatePen(jenis_garis, ketebalan_garis, RGB(nr, ng, nb));

CPen *nama_var_pointer=pDC->SelectObject(&nama_objek);

Dimana, jenis_garis merupakan konstanta untuk menentukan pola pena (garis),

terdiri dari beberapa pilihan, seperti diperlihatkan pada tabel 4.3 berikut ini.

13 6 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Tabel 4.3. Konstanta untuk menentukan pola garis

Konstanta Bentuk garis

PS_SOLID

PS_DASH

PS_DOT

PS_DASHDOT

PS_DASHDOTDOT

PS_NULL

PS_INSIDEFRAME

Contoh penggunaan method CreatePen():

// warnaBangunView.cpp : implementation of the CWarnaBangunView class

//

#include "stdafx.h"

#include "warnaBangun.h"

#include "warnaBangunDoc.h"

#include "warnaBangunView.h"

#ifdef _DEBUG

#define new DEBUG_NEW

#undef THIS_FILE

static char THIS_FILE[] = __FILE__;

#endif

/////////////////////////////////////////////////////////////////////////////

// CWarnaBangunView

13 7 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

IMPLEMENT_DYNCREATE(CWarnaBangunView, CView)

BEGIN_MESSAGE_MAP(CWarnaBangunView, CView)

//{{AFX_MSG_MAP(CWarnaBangunView)

// NOTE - the ClassWizard will add and remove mapping macros here.

// DO NOT EDIT what you see in these blocks of generated code!

//}}AFX_MSG_MAP

// Standard printing commands

ON_COMMAND(ID_FILE_PRINT, CView::OnFilePrint)

ON_COMMAND(ID_FILE_PRINT_DIRECT, CView::OnFilePrint)

ON_COMMAND(ID_FILE_PRINT_PREVIEW, CView::OnFilePrintPreview)

END_MESSAGE_MAP()

/////////////////////////////////////////////////////////////////////////////

// CWarnaBangunView construction/destruction

CWarnaBangunView::CWarnaBangunView()

{

// TODO: add construction code here

}

CWarnaBangunView::~CWarnaBangunView()

{

}

BOOL CWarnaBangunView::PreCreateWindow(CREATESTRUCT& cs)

{

// TODO: Modify the Window class or styles here by modifying

// the CREATESTRUCT cs

return CView::PreCreateWindow(cs);

}

13 8 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

/////////////////////////////////////////////////////////////////////////////

// CWarnaBangunView drawing

void CWarnaBangunView::OnDraw(CDC* pDC)

{

CWarnaBangunDoc* pDoc = GetDocument();

ASSERT_VALID(pDoc);

// TODO: add draw code for native data here

CPen pena1;

pena1.CreatePen(PS_SOLID, 1, RGB(255, 0, 0));

CPen *p1 = pDC->SelectObject(&pena1);

pDC->MoveTo(100,100);

pDC->LineTo(300,100);

CPen pena2;

pena2.CreatePen(PS_DASH, 1, RGB(0, 255, 0));

CPen *p2 = pDC->SelectObject(&pena2);

pDC->LineTo(300, 300);

CPen pena3;

pena3.CreatePen(PS_DASHDOTDOT, 1, RGB(0, 0, 255));

CPen *p3 = pDC->SelectObject(&pena3);

pDC->LineTo(100,100);

}

/////////////////////////////////////////////////////////////////////////////

// CWarnaBangunView printing

BOOL CWarnaBangunView::OnPreparePrinting(CPrintInfo* pInfo)

{

// default preparation

13 9 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

return DoPreparePrinting(pInfo);

}

void CWarnaBangunView::OnBeginPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/)

{

// TODO: add extra initialization before printing

}

void CWarnaBangunView::OnEndPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/)

{

// TODO: add cleanup after printing

}

/////////////////////////////////////////////////////////////////////////////

// CWarnaBangunView diagnostics

#ifdef _DEBUG

void CWarnaBangunView::AssertValid() const

{

CView::AssertValid();

}

void CWarnaBangunView::Dump(CDumpContext& dc) const

{

CView::Dump(dc);

}

CWarnaBangunDoc* CWarnaBangunView::GetDocument() // non-debug version is

inline

{

ASSERT(m_pDocument-

>IsKindOf(RUNTIME_CLASS(CWarnaBangunDoc)));

return (CWarnaBangunDoc*)m_pDocument;

}

13 10 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

#endif //_DEBUG

/////////////////////////////////////////////////////////////////////////////

// CWarnaBangunView message handlers

Outputnya adalah sebagai berikut:

Contoh penggunaan CBrush:

// warnaBangunView.cpp : implementation of the CWarnaBangunView class

//

#include "stdafx.h"

#include "warnaBangun.h"

#include "warnaBangunDoc.h"

#include "warnaBangunView.h"

#ifdef _DEBUG

#define new DEBUG_NEW

#undef THIS_FILE

static char THIS_FILE[] = __FILE__;

#endif

13 11 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

/////////////////////////////////////////////////////////////////////////////

// CWarnaBangunView

IMPLEMENT_DYNCREATE(CWarnaBangunView, CView)

BEGIN_MESSAGE_MAP(CWarnaBangunView, CView)

//{{AFX_MSG_MAP(CWarnaBangunView)

// NOTE - the ClassWizard will add and remove mapping

macros here.

// DO NOT EDIT what you see in these blocks of generated

code!

//}}AFX_MSG_MAP

// Standard printing commands

ON_COMMAND(ID_FILE_PRINT, CView::OnFilePrint)

ON_COMMAND(ID_FILE_PRINT_DIRECT, CView::OnFilePrint)

ON_COMMAND(ID_FILE_PRINT_PREVIEW,

CView::OnFilePrintPreview)

END_MESSAGE_MAP()

/////////////////////////////////////////////////////////////////////////////

// CWarnaBangunView construction/destruction

CWarnaBangunView::CWarnaBangunView()

{

// TODO: add construction code here

}

CWarnaBangunView::~CWarnaBangunView()

{

}

BOOL CWarnaBangunView::PreCreateWindow(CREATESTRUCT& cs)

{

13 12 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

// TODO: Modify the Window class or styles here by modifying

// the CREATESTRUCT cs

return CView::PreCreateWindow(cs);

}

/////////////////////////////////////////////////////////////////////////////

// CWarnaBangunView drawing

void CWarnaBangunView::OnDraw(CDC* pDC)

{

CWarnaBangunDoc* pDoc = GetDocument();

ASSERT_VALID(pDoc);

// TODO: add draw code for native data here

CPen pena1;

pena1.CreatePen(PS_SOLID, 1, RGB(255, 0, 0));

CPen *p1 = pDC->SelectObject(&pena1);

pDC->MoveTo(100,100);

pDC->LineTo(300,100);

CPen pena2;

pena2.CreatePen(PS_DASH, 1, RGB(0, 255, 0));

CPen *p2 = pDC->SelectObject(&pena2);

pDC->LineTo(300, 300);

CPen pena3;

pena3.CreatePen(PS_DASHDOTDOT, 1, RGB(0, 0, 255));

CPen *p3 = pDC->SelectObject(&pena3);

pDC->LineTo(100,100);

//Mewarnai bangun geomtri tertutup

CBrush merah(RGB(255,0,0));

CBrush *mrh=pDC->SelectObject(&merah);

13 13 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

pDC->Pie(400,100,600,300,500,100,600,200);

CBrush biru(RGB(0,0,255));

CBrush *br = pDC->SelectObject(&biru);

pDC->Chord(700,100,900,300,700,200,800,100);

}

/////////////////////////////////////////////////////////////////////////////

// CWarnaBangunView printing

BOOL CWarnaBangunView::OnPreparePrinting(CPrintInfo* pInfo)

{

// default preparation

return DoPreparePrinting(pInfo);

}

void CWarnaBangunView::OnBeginPrinting(CDC* /*pDC*/, CPrintInfo*

/*pInfo*/)

{

// TODO: add extra initialization before printing

}

void CWarnaBangunView::OnEndPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/)

{

// TODO: add cleanup after printing

}

/////////////////////////////////////////////////////////////////////////////

// CWarnaBangunView diagnostics

#ifdef _DEBUG

void CWarnaBangunView::AssertValid() const

{

13 14 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

CView::AssertValid();

}

void CWarnaBangunView::Dump(CDumpContext& dc) const

{

CView::Dump(dc);

}

CWarnaBangunDoc* CWarnaBangunView::GetDocument() // non-debug

version is inline

{

ASSERT(m_pDocument-

>IsKindOf(RUNTIME_CLASS(CWarnaBangunDoc)));

return (CWarnaBangunDoc*)m_pDocument;

}

#endif //_DEBUG

/////////////////////////////////////////////////////////////////////////////

// CWarnaBangunView message handlers

Outputnya adalah sebagai berikut:

13 15 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Latihan:

1. Rancang 7 buah garis paralel deng an panjang 300 piksel berjarak 20 piksel

satu sama lain untuk seluruh jenis garis seperti diperlihatkan pada Tabel 4.3

di atas. Wana garis bebas.

2. Buat program untuk memperoleh hasil berikut ini, dimana bulatan tengah

berwarna magenta, dan kedua area garis gawang berwarna kuning,

sementara lapangan sendiri berlatar-belakang hijau.

DAFTAR PUSTAKA 1. Janner Simarmata, Tintin Chandra (2007), Grafika Komputer, Andi,

Yogyakarta 2. Abdul Kadir (2014), Panduan Pemrograman Visual C++, Andi, Yogyakarta 3. F.S.Hill, Jr.(2001), COMPUTER GRAPHICS Using Open GL, Second Edition,

Prentice Hall, New York 4. www.academia.edu/4870575/Bahan_Ajar_Mata_Kuliah_Grafika_Komputer (diakses

pada Tanggal 23 September 2016)

MODUL PERKULIAHAN

KOMPUTER

GRAFIK

Pertemuan ke-5 Bentuk-Bentuk Arsiran

Fakultas ProgramStudi TatapMuka KodeMK DisusunOleh IlmuKomputer TeknikInformatika 05 15011 TimDosen

Abstract Kompetensi Ilmu computer saat ini sedang berkembang dengan sangat pesat. Kemajuan dalam bidang ilmu computer ditunjukkan dari berbagai aspek, seperti pada bidang penelitian. Penelitian ini berfokus pada tujuan dan manfaat mempelajari penelitian tersebut.

Dalam pembahasan kali ini dalam pertemuan ketiga matakuliah Komputer Grafik akan membahas tentang cara atau metode untuk mengisi bangun-bangun geometri yang berbentuk diagram tertutup dengan bentuk atau pola garis-garis tertentu.

13 2 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Pendahuluan

Arsiran merupakan bagian dari pewarnaan, yaitu melakukan pengisian pada

bangun-bangun geometri diagram tertutup dengan pola garis-garis tertentu,

termasuk juga dalam hal ini adalah mewarnai pola garis-garis tersebut. Pola garis-

garis dapat dipilih, dan secara garis besarnya terdiri dari dua jenis pola garis, yaitu

pola garis searah dan pola garis perpaduan.

Pola garis searah terdiri dari pola garis vertikal, pola garis horizontal, pola garis

diagonal ke depan, dan pola garis diagonal ke belakang. Sementara pola garis

perpaduan terdiri dari pola garis berpalang, dan pola garis bersilang (diagonal).

Pola garis horizontal adalah garis-garis yang berbentangan dari kiri ke kanan.

Pola garis vertikal adalah garis-garis yang berbentangan dari atas ke bawah.

Pola garis diagonal ke depan adalah garis-garis yang berbentangan dari kiri atas ke

kanan bawah.

Pola garis diagonal ke belakang adalah garis-garis yang berbentangan dari kiri

bawah ke kanan atas.

13 3 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Pola garis berpalang adalah garis-garis perpaduan antara pola garis horizontal dan

pola garis vertikal.

Pola garis bersilang adalah garis-garis perpaduan antara pola garis diagonal ke

depan dan pola garis diagonal ke belakang.

Merancang Arsiran Untuk mengarsir dengan pola garis-garis sebuah bangun geometri diagram tertutup,

dibutuhkan class CBrush, dan secara umum bentuk perintahnya adalah sebagai

berikut:

CBrush nama_objek(jenis_pola_garis, RGB(nr, ng, nb));

CBrush *nama_var_pointer = pDC->SelectObject(&nama_objek);

Dengan

nr = nilai piksel untuk chanel/komponen merah

ng = nilai piksel untuk chanel/komponen hijau

nb = nilai piksel untuk chanel/komponen biru

13 4 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Untuk memori 8 bit, nilai piksel berkisar antara 0 s/d 255. Nilai piksel 0 berarti

intensitas minimum (representasinya gelap atau hitam), sedangkan nilai piksel 255

berarti intensitas maksimum (representasinya bergantung kepada chanel).

Contoh:

CBrush merah(HS_CROSS, RGB(255,0,0));

CBrush *mrh=pDC->SelectObject(&merah);

Maka semua objek yang didefinisikan setelah perintah ini berupa bangun geometri

diagram tertutup akan diarsir dengan pola garis berpalang berwarna merah karena

nilai piksel untuk chanel merah adalah maksimum, sementara nilai piksel untuk

chanel hijau dan biru mainimum.

Contoh 1:

// ArsiranView.cpp : implementation of the CArsiranView class

//

#include "stdafx.h"

#include "Arsiran.h"

#include "ArsiranDoc.h"

#include "ArsiranView.h"

#ifdef _DEBUG

#define new DEBUG_NEW

#undef THIS_FILE

static char THIS_FILE[] = __FILE__;

#endif

13 5 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

/////////////////////////////////////////////////////////////////////////////

// CArsiranView

IMPLEMENT_DYNCREATE(CArsiranView, CView)

BEGIN_MESSAGE_MAP(CArsiranView, CView)

//{{AFX_MSG_MAP(CArsiranView)

// NOTE - the ClassWizard will add and remove mapping macros here.

// DO NOT EDIT what you see in these blocks of generated code!

//}}AFX_MSG_MAP

// Standard printing commands

ON_COMMAND(ID_FILE_PRINT, CView::OnFilePrint)

ON_COMMAND(ID_FILE_PRINT_DIRECT, CView::OnFilePrint)

ON_COMMAND(ID_FILE_PRINT_PREVIEW, CView::OnFilePrintPreview)

END_MESSAGE_MAP()

/////////////////////////////////////////////////////////////////////////////

// CArsiranView construction/destruction

CArsiranView::CArsiranView()

{

// TODO: add construction code here

}

CArsiranView::~CArsiranView()

{

}

BOOL CArsiranView::PreCreateWindow(CREATESTRUCT& cs)

{

// TODO: Modify the Window class or styles here by modifying

// the CREATESTRUCT cs

13 6 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

return CView::PreCreateWindow(cs);

}

/////////////////////////////////////////////////////////////////////////////

// CArsiranView drawing

void CArsiranView::OnDraw(CDC* pDC)

{

CArsiranDoc* pDoc = GetDocument();

ASSERT_VALID(pDoc);

// TODO: add draw code for native data here

CBrush ar1(HS_HORIZONTAL, RGB(0,0,0));

CBrush *a1 = pDC->SelectObject(&ar1);

pDC->Rectangle(100,100, 200,200);

CBrush ar2(HS_VERTICAL, RGB(0,0,0));

CBrush *a2 = pDC->SelectObject(&ar2);

pDC->Rectangle(250,100, 350,200);

CBrush ar3(HS_FDIAGONAL, RGB(0,0,0));

CBrush *a3 = pDC->SelectObject(&ar3);

pDC->Rectangle(400,100, 500,200);

CBrush ar4(HS_BDIAGONAL, RGB(0,0,0));

CBrush *a4 = pDC->SelectObject(&ar4);

pDC->Rectangle(550,100, 650,200);

CBrush ar5(HS_CROSS, RGB(255,0,0));

CBrush *a5 = pDC->SelectObject(&ar5);

pDC->Rectangle(700,100, 800,200);

CBrush ar6(HS_CROSS, RGB(255,0,0));

CBrush *a6 = pDC->SelectObject(&ar6);

pDC->RoundRect(850,100, 1050,200,50,50);

}

13 7 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

/////////////////////////////////////////////////////////////////////////////

// CArsiranView printing

BOOL CArsiranView::OnPreparePrinting(CPrintInfo* pInfo)

{

// default preparation

return DoPreparePrinting(pInfo);

}

void CArsiranView::OnBeginPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/)

{

// TODO: add extra initialization before printing

}

void CArsiranView::OnEndPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/)

{

// TODO: add cleanup after printing

}

/////////////////////////////////////////////////////////////////////////////

// CArsiranView diagnostics

#ifdef _DEBUG

void CArsiranView::AssertValid() const

{

CView::AssertValid();

}

void CArsiranView::Dump(CDumpContext& dc) const

{

CView::Dump(dc);

}

13 8 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

CArsiranDoc* CArsiranView::GetDocument() // non-debug version is inline

{

ASSERT(m_pDocument->IsKindOf(RUNTIME_CLASS(CArsiranDoc)));

return (CArsiranDoc*)m_pDocument;

}

#endif //_DEBUG

/////////////////////////////////////////////////////////////////////////////

// CArsiranView message handlers

Outputnya adalah sebagai berikut:

Contoh 2:

// newArsiranView.cpp : implementation of the CNewArsiranView class

//

#include "stdafx.h"

#include "newArsiran.h"

#include "newArsiranDoc.h"

#include "newArsiranView.h"

#ifdef _DEBUG

#define new DEBUG_NEW

#undef THIS_FILE

static char THIS_FILE[] = __FILE__;

13 9 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

#endif

/////////////////////////////////////////////////////////////////////////////

// CNewArsiranView

IMPLEMENT_DYNCREATE(CNewArsiranView, CView)

BEGIN_MESSAGE_MAP(CNewArsiranView, CView)

//{{AFX_MSG_MAP(CNewArsiranView)

// NOTE - the ClassWizard will add and remove mapping macros here.

// DO NOT EDIT what you see in these blocks of generated code!

//}}AFX_MSG_MAP

// Standard printing commands

ON_COMMAND(ID_FILE_PRINT, CView::OnFilePrint)

ON_COMMAND(ID_FILE_PRINT_DIRECT, CView::OnFilePrint)

ON_COMMAND(ID_FILE_PRINT_PREVIEW, CView::OnFilePrintPreview)

END_MESSAGE_MAP()

/////////////////////////////////////////////////////////////////////////////

// CNewArsiranView construction/destruction

CNewArsiranView::CNewArsiranView()

{

// TODO: add construction code here

}

CNewArsiranView::~CNewArsiranView()

{

}

BOOL CNewArsiranView::PreCreateWindow(CREATESTRUCT& cs)

{

// TODO: Modify the Window class or styles here by modifying

13 10 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

// the CREATESTRUCT cs

return CView::PreCreateWindow(cs);

}

/////////////////////////////////////////////////////////////////////////////

// CNewArsiranView drawing

void CNewArsiranView::OnDraw(CDC* pDC)

{

CNewArsiranDoc* pDoc = GetDocument();

ASSERT_VALID(pDoc);

// TODO: add draw code for native data here

CBrush ar1(HS_HORIZONTAL, RGB(0,255,0));

CBrush *a1 = pDC->SelectObject(&ar1);

pDC->Pie(100,100, 500,500,500,150,500,450);

CBrush ar2(HS_VERTICAL, RGB(255,0,0));

CBrush *a2 = pDC->SelectObject(&ar2);

pDC->Ellipse(400,200, 600,400);

}

/////////////////////////////////////////////////////////////////////////////

// CNewArsiranView printing

BOOL CNewArsiranView::OnPreparePrinting(CPrintInfo* pInfo)

{

// default preparation

return DoPreparePrinting(pInfo);

}

void CNewArsiranView::OnBeginPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/)

{

13 11 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

// TODO: add extra initialization before printing

}

void CNewArsiranView::OnEndPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/)

{

// TODO: add cleanup after printing

}

/////////////////////////////////////////////////////////////////////////////

// CNewArsiranView diagnostics

#ifdef _DEBUG

void CNewArsiranView::AssertValid() const

{

CView::AssertValid();

}

void CNewArsiranView::Dump(CDumpContext& dc) const

{

CView::Dump(dc);

}

CNewArsiranDoc* CNewArsiranView::GetDocument() // non-debug version is inline

{

ASSERT(m_pDocument->IsKindOf(RUNTIME_CLASS(CNewArsiranDoc)));

return (CNewArsiranDoc*)m_pDocument;

}

#endif //_DEBUG

/////////////////////////////////////////////////////////////////////////////

// CNewArsiranView message handlers

13 12 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Outputnya adalah sebagai berikut:

Latihan:

Buat program untuk memperoleh hasil berikut ini, dimana bulatan tengah berwarna

magenta dengan pola garis vertikal, dan kedua area garis gawang berwarna kuning

dengan pola garis bersilang, sementara lapangan sendiri berlatar-belakang (warna)

hijau.

13 13 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

DAFTAR PUSTAKA 1. Janner Simarmata, Tintin Chandra (2007), Grafika Komputer, Andi,

Yogyakarta 2. Abdul Kadir (2014), Panduan Pemrograman Visual C++, Andi, Yogyakarta 3. F.S.Hill, Jr.(2001), COMPUTER GRAPHICS Using Open GL, Second Edition,

Prentice Hall, New York 4. www.academia.edu/4870575/Bahan_Ajar_Mata_Kuliah_Grafika_Komputer (diakses

pada Tanggal 23 September 2016)

MODUL PERKULIAHAN

KOMPUTER

GRAFIK

Pertemuan ke-6 Bentuk-Bentuk Geometri Tidak Beraturan

Fakultas ProgramStudi TatapMuka KodeMK DisusunOleh IlmuKomputer TeknikInformatika 06 15011 TimDosen

Abstract Kompetensi Ilmu computer saat ini sedang berkembang dengan sangat pesat. Kemajuan dalam bidang ilmu computer ditunjukkan dari berbagai aspek, seperti pada bidang penelitian. Penelitian ini berfokus pada tujuan dan manfaat mempelajari penelitian tersebut.

Dalam pembahasan kali ini dalam pertemuan ketiga matakuliah Komputer Grafik akan membahas tentang cara atau metode untuk merancang bangun-bangun geometri baik yang bentuknya beraturan maupun tidak beraturan dengan metode polygon ataupun polypolygon.

13 2 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Pendahuluan

Poligon (secara literal berarti "banyak sudut") merupakan bentuk datar yang terdiri dari garis lurus yang bergabung untuk membentuk rantai tertutup atau sirkuit. Poligon dinamakan sesuai dengan jumlah tepi, bergabung menjadi satu dengan

awalan angka dalam bahasa Yunani dengan akhiran-gon. Contoh pentagon,

dodekagon. Segitiga, sisi empat, dan nonagon adalah pengecualian-pengecualian.

Untuk nomor-nomor lebih besar, ahli matematika menulis angka sendiri, contoh 17-

gon. Satu variabel dapat juga digunakan, biasanya n-gon.

PoliPoligon, kalau mengacu pada pengertian poligon berarti banyak poligon.

PoliPoligon merupakan bentuk datar yang terdiri dari poligon-poligon yang

bergabung sebagai satu kesatuan. Ini juga dapat diartikan bahwa di dalam satu

himpunan titik-titik sudut dapat dibuat beberapa poligon.

Beberapa Bentuk Poligon

Sebuah poligon paling tidak terdiri dari 3 titik sudut. Dengan tiga titik sudut, berarti

dapat dibuat 3 sisi, dengan ukuran panjang yang bebas satu sama lain, terkecuali

poligon tersebut dinyatakan sebagai bangun geometri beraturan. Berikut ini,

disajikan beberapa bentuk poligon.

Tabel 6.1. Beberapa bentuk poligon

Bentuk Poligon Keterangan

Bentuk beraturan, segitiga sama sisi

13 3 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Bentuk beraturan, segitiga siku-siku

Bentuk tidak beraturan

Bentuk beraturan, empat persegi

panjang

Bentuk tidak beraturan, bersisi empat

Bentuk tidak beraturan, bersisi lima

Metode untuk membangkitkan poligon adalah Polygon(). Argumen untuk metode ini

akan bergantuk kepada jumlah titik sudut yang membentuk poligon. Jika titik sudut

yang membentuk poligon adalah berjumlah 4 maka argumennya akan terdiri dari 8

elemen.

Polygon(x1, y1, x2, y2, x3, y3, x4, y4);

Dengan (x1,y1) adalah pasangan titik koordinat pertama, (x2,y2) adalah pasangan

titik koordinat kedua, (x3,y3) adalah pasangan titik koordinat ketiga, dan (x4,y4)

adalah pasangan titik koordinat keempat. Rangkaian garis lurus akan terbuat dimulai

dari titik (x1,y1) membentang ke titik (x2,y2) membentang ke titik (x3,y3)

13 4 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

membentang ke titik (x4,y4) membentuk ke titik (x1,y1), sehingga membentuk

diagram tertutup.

Tabel 6.2. Beberapa bentuk polipoligon

Bentuk polipoligon Keterangan

Polipoligon yang terdiri dari 2 poligon,

masing-masing poligon terdiri dari 3 sisi,

yang merupakan jumlah sisi terkecil untuk

sebuah polipoligon. Tidak ada interseksi.

Polipoligon yang terdiri dari 2 poligon,

masing-masing poligon terdiri dari 3 sisi,

yang merupakan jumlah sisi terkecil untuk

sebuah polipoligon. Saling berinterseksi.

Polipoligon yang terdiri dari 2 poligon,

masing-masing poligon terdiri dari 4 sisi

dan 3 sisi. Keduanya saling

bersinggungan.

Polipoligon yang terdiri dari 3 poligon,

masing-masing poligon terdiri dari 4 sisi,

3 sisi, dan 3 sisi. Ketiga poligon ada yang

terpisah dan ada yang berinterseksi.

Polipoligon yang terdiri dari 3 poligon,

masing-masing poligon terdiri dari 3 sisi.

Ketiga poligon membentuk rantai

interseksi.

Polipoligon yang terdiri dari 3 poligon,

masing-masing poligon terdiri dari 4 sisi.

Ketiga poligon saling berinterseksi satu

sam lain.

13 5 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Metode untuk membangkitkan polipoligon adalah PolyPolygon(). Argumen untuk

metode ini akan bergantuk kepada jumlah titik sudut yang membentuk polipoligon.

Jika titik sudut yang membentuk polipoligon adalah berjumlah 10 maka argumennya

akan terdiri dari 20 elemen.

Polygon(x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, x6, y6, x7, y7, x8, y8, x9, y9, x10, y10);

Dengan (x1,y1) adalah pasangan titik koordinat pertama, (x2,y2) adalah pasangan

titik koordinat kedua, (x3,y3) adalah pasangan titik koordinat ketiga, dan (x4,y4)

adalah pasangan titik koordinat keempat. Rangkaian garis lurus akan terbuat dimulai

dari titik (x1,y1) membentang ke titik (x2,y2) membentang ke titik (x3,y3)

membentang ke titik (x4,y4), dan seterusnya.

Untuk mendapatkan visualisasi poligon maupun polipoligon dibutuhkan beberapa

tahap, yaitu:

Untuk poligon melalui langkah-lngkah:

1. Mendeklarasikan himpunan (array) poligon dengan tipe POINT. Bentuk

umumnya adalah sebagai berikut:

POINT nama_array[size] = {x1, y1, x2, y2, x3, y3, ..., x(size/2), y(size/2)};

2. Membangkitkan poligon dengan metode Polygon(). Bentuk umumnya adalah

sebagai berikut:

Polygon(nama_array, jumlah_titik_sudut);

Untuk polipoligon melalui langkah-langkah:

1. Mendeklarasikan himpunan (array) poligon dengan tipe POINT. Bentuk

umumnya adalah sebagai berikut:

POINT nama_array[size] = {x1, y1, x2, y2, x3, y3, ..., x(size/2), y(size/2)};

2. Mendeklarasikan himpunan (array) polipoligon dengan tipe int. Bentuk

umumnya adalah sebagai berikut:

int nama_array_polipoligon[] = {n1, n2, ... , n_ jumlah_poligon};

3. Membangkitkan polipoligon dengan metode PolyPolygon(). Bentuk umumnya

adalah sebagai berikut:

PolyPolygon(nama_array, nama_array_polipoligon, jumlah_poligon);

13 6 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

Contoh 1:

// poligon1View.cpp : implementation of the CPoligon1View class

//

#include "stdafx.h"

#include "poligon1.h"

#include "poligon1Doc.h"

#include "poligon1View.h"

#ifdef _DEBUG

#define new DEBUG_NEW

#undef THIS_FILE

static char THIS_FILE[] = __FILE__;

#endif

/////////////////////////////////////////////////////////////////////////////

// CPoligon1View

IMPLEMENT_DYNCREATE(CPoligon1View, CView)

BEGIN_MESSAGE_MAP(CPoligon1View, CView)

//{{AFX_MSG_MAP(CPoligon1View)

// NOTE - the ClassWizard will add and remove mapping macros here.

// DO NOT EDIT what you see in these blocks of generated code!

//}}AFX_MSG_MAP

// Standard printing commands

ON_COMMAND(ID_FILE_PRINT, CView::OnFilePrint)

13 7 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

ON_COMMAND(ID_FILE_PRINT_DIRECT, CView::OnFilePrint)

ON_COMMAND(ID_FILE_PRINT_PREVIEW, CView::OnFilePrintPreview)

END_MESSAGE_MAP()

/////////////////////////////////////////////////////////////////////////////

// CPoligon1View construction/destruction

CPoligon1View::CPoligon1View()

{

// TODO: add construction code here

}

CPoligon1View::~CPoligon1View()

{

}

BOOL CPoligon1View::PreCreateWindow(CREATESTRUCT& cs)

{

// TODO: Modify the Window class or styles here by modifying

// the CREATESTRUCT cs

return CView::PreCreateWindow(cs);

}

/////////////////////////////////////////////////////////////////////////////

// CPoligon1View drawing

13 8 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

void CPoligon1View::OnDraw(CDC* pDC)

{

CPoligon1Doc* pDoc = GetDocument();

ASSERT_VALID(pDoc);

// TODO: add draw code for native data here

CBrush merah(RGB(255,0,0));

CBrush *mrh=pDC->SelectObject(&merah);

POINT p1[12]={100,300,300,300,400,400,300,500,100,500,200,400};

pDC->Polygon(p1,6);

CBrush hijau(RGB(0,255,0));

CBrush *hj=pDC->SelectObject(&hijau);

POINT p2[12]={350,300,450,400,550,300,550,100,450,200,350,100};

pDC->Polygon(p2,6);

CBrush biru(RGB(0,0,255));

CBrush *br=pDC->SelectObject(&biru);

POINT p3[12]={600,300,500,400,600,500,800,500,700,400,800,300};

pDC->Polygon(p3,6);

}

/////////////////////////////////////////////////////////////////////////////

// CPoligon1View printing

BOOL CPoligon1View::OnPreparePrinting(CPrintInfo* pInfo)

{

// default preparation

return DoPreparePrinting(pInfo);

13 9 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

}

void CPoligon1View::OnBeginPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/)

{

// TODO: add extra initialization before printing

}

void CPoligon1View::OnEndPrinting(CDC* /*pDC*/, CPrintInfo* /*pInfo*/)

{

// TODO: add cleanup after printing

}

/////////////////////////////////////////////////////////////////////////////

// CPoligon1View diagnostics

#ifdef _DEBUG

void CPoligon1View::AssertValid() const

{

CView::AssertValid();

}

void CPoligon1View::Dump(CDumpContext& dc) const

{

CView::Dump(dc);

}

CPoligon1Doc* CPoligon1View::GetDocument() // non-debug version is inline

13 10 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

{

ASSERT(m_pDocument->IsKindOf(RUNTIME_CLASS(CPoligon1Doc)));

return (CPoligon1Doc*)m_pDocument;

}

#endif //_DEBUG

/////////////////////////////////////////////////////////////////////////////

// CPoligon1View message handlers

Outputnya adalah sebagai berikut:

Contoh 2:

// poliPoligon1View.cpp : implementation of the CPoliPoligon1View class

//

#include "stdafx.h"

#include "poliPoligon1.h"

13 11 Komputer Grafik Pusat Bahan Ajar dan eLearning Tim Dosen http://www.mercubuana.ac.id

#include "poliPoligon1Doc.h"

#include "poliPoligon1View.h"

#ifdef _DEBUG

#define new DEBUG_NEW

#undef