PEMBANGKITAN CITRA GRAFIK Dosen : Dewi Octaviani , S.T, M.C.s

GrafikaKomputer PEMBANGKITAN CITRA GRAFIKDosen :DewiOctaviani, S.T, M.C.s

SistemKoordinat • Grafikpalingsederhana titik • Sistemkoordinatcartesian yang dipakaiuntukmembedakanlokasiatauposisisembarangtitik/obyek • Sistemkoordinatcartesian 2D dan 3D • Dalamsistemkoordinat 2D ditentukanolehdua besaran, berupasumbukoordinatmendatar(absis) dan tegak(ordinat) • Sistemkoordinat 3D, ditambahkansebuahsumbulain yang tegaklurusdgnabsis juga denganordinat/ menembusbidang gambar GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

SistemKoordinat Layar • Berbedadengansistemkoordinatcartesian yang mengenalsumbu x dan sumbu y (sertasumbu z untuk 3D) • Pada sistemkoordinat layar, hanyadikenalsistem 2D dimana hanyaadasumbu x dan y positif. • Koordinat (0,0) menunjukkantitikkiri atas layar, koordinat (x1, y1) menunjukkankoordinatkananbawahdari layar. GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

PembangkitanPiksel • Piksel bisa dibangkitkanberdasarkan data digital. Nilai 0 berartimati, nilai 1 berartihidup. • Prosespembangkitansbb : • Pada pengingat digital dan layar terdapatsebuahpiranti «scan line» • Scan line membacapola digital baris per baris • Setiapkaliscan line membacasatubarispola digital, pengolahtampilanakanmenterjemahkanmenjadipolapiksel yang terlihatdalam layar. GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

PembangkitanGaris • Dalamgrafika, prosesmenghidupkansejumlahpikselmembentukgarisdisebutdenganpembangkitanvektor. • Garis yang akandibangkitkanpastimempunyaipanjangtertentu dan arahtertentu, dalamilmugeometri besaran yang mempunyaipanjang dan arahdinamakansebagaivektor. GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

Garis yang tampak pada layar harusmemenuhikriteriasbb : • Garusharusterlihatlurus • Garisharusberakhir pada titik yang tepat • Garisharusmemilikikerapatan (density) yang tetap • Tingkatkehitaman (blackness) tidaktergantungdaripanjanggaris GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

PersamaanGaris • Persamaangarismenurutkoordinat Cartesian adalah y= mx + b • dimanamadalah slope/kemiringangaris yang dibentukdariduatitik, yaitu (x1,y1) dan (x2,y2).Untukpenambahan x sepanjanggarisyaitu dx akanmendapatkanpenambahan y sebesar : dy= m . dx GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

Atribut • Atributdasaruntukgarislurusadalah type (tipe), width (tebal) dan color (warna). Dalambeberapapaketaplikasigrafik, garisditampilkandenganmenggunakanpilihan pen atau brush GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

TipeGaris • Garismempunyaibeberapalinetype (tipegaris) diantaranya solid line (garistebal), dashed line (garisputus), dan dotted line (garistitik-titik). • Garisputusdibuatdenganmemberikannilaijarakdenganbagian solid yang sama. • Garistitik–titikdapatditampilkandenganmemberikanjarak yang lebihbesardaribagain solid. • Prosedur yang serupadigunakan pula untukmembuatbermacam-macamtipegaris. Untukmengaturatributdalam program aplikasi PHIGS menggunakanfungsi: setLinetype (lt) GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

Algoritma DDA • Digital DiferensialAnalyser (DDA) adalahalgoritmapembentukangarisberdasarkanperhitungan dx maupundy, menggunakanrumus dy = m . dx • Garisdibuatmenggunakanduaendpoint, yaitutitikawal dan titikakhir. Setiapkoordinattitik yang membentukgarisdiperolehdariperhitungan, kemudiandikonversikanmenjadinilaiinteger. GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

Langkah-langkahmembentukgarismenurutalgoritma DDA adalah: • Tentukanduatitik yang akandihubungkandalampembentukangaris • Tentukantitikawalyaitudantitikakhir . • Hitung dx = x1- x0dan dy = y1 – y0 • Tentukanstep = max( |dx| , |dy| ) • Hitungpenambahankoordinat pixel XInc= dx / step danYInc= dy/ step • Koordinatselanjutnya (x+XInc, y+yInc) • Posisipadalayarditentukandenganpembulatannilaikoordinattersebut • Ulanginomor 6 dan 7 untukmenentukanposisi pixel berikutnya. sampai x=x1dan y=y1. GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

Contoh Program PembentukanGaris DDA • Diketahuiduatitikuntukmembentukgarisyaitutitik A(10,10) dan B(17,16). • Buat table perhitunganuntuktitik-titik yang dihasilkanolehalgoritma DDA. • Buat program untukmengimplementasikannya ! GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

Tabelperhitungan • Urutanlangkah-langkahagoritma DDA : • A(10,10) dan B(17,16) • (x0, y0) =(10,10) dan(x1, y1) =(17,16) • dx = x1 - x0 dx = 17 - 10  dx = 7 • dy = y1 - y0dy= 16 - 10  dy = 6 • ( dx = 7 ) > ( dy = 6 ) maka step = 7 • XInc= dx / stepXInc= 7 / 7 XInc = 1 • YInc= dy/ step YInc = 6 / 7 YInc = 0,86 • (x+XInc, y+yInc) = (10+1, 10+0,86)= (11, 10,86) • Dibulatkan(11,11) GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

TabelHasilPerhitungan • Ulangi langkah 5 dan 6 sampai 7 kali langkah. Akan didapat table : GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

Latihan • Tentukankoordinat yang terbentukdenganAlgoritma DDA untukgarisdengan endpoint (1,3,8,5)

void lineDDA (int x0, int y0, intxEnd, intyEnd) { int dx = xEnd - x0, dy = yEnd - y0, steps, k; floatxIncrement, yIncrement, x = x0, y = y0; if (fabs (dx) > fabs (dy)) steps = fabs (dx); else steps = fabs (dy); xIncrement = float (dx) / float (steps); yIncrement = float (dy) / float (steps); setPixel (round (x), round (y)); for (k = 0; k < steps; k++) { x += xIncrement; y += yIncrement; setPixel (round (x), round (y)); }} GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

AlgortimaBressenham • Proseduruntukmenggambarkembaligarisdenganmembulatkannilai x atau y kebilangan integer memerlukanwaktu. sertavariabelx,ymaupun m memerlukanbilangan real karenakemiringanmerupakannilaipecahan. Bressenhammengembangkanalgoritmaklasik yang lebihmenarik, karenahanyamenggunakanperhitunganmatematikdenganbantuanbilangan integer. • Dengandemikiantidakperlumembulatkannilaiposisi pixel setiapwaktu. Langkah-langkahnyaadalahsebagaiberikut: GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

Langkah-langkahalgoritmaBressenham • Tentukanduatitik yang akandihubungkandalampembentukangaris. • Tentukansalahsatutitikdisebelahkirisebagaititikawal (x0,y0) dantitiklainnyasebagaititikakhir (x1,y1) • Hitung dx, dy, 2dx dan 2dy-2dx • Hitung parameter P0 = 2dy - dx • Untuksetiapxksepanjanggarisdimulaidengan k=0 • BilaPk< 0 makatitikselanjutnyaadalah (xk+1, yk) dan Pk+1=Pk+2dy • Bilatidakmakatitikselanjutnyaadalah (xk+1, yk+1) dan Pk+1=Pk+2dy-2dx • Ulanginomor 5 untukmenentukanposisi pixel selanjutnyasampai x=x1dan y=y1 GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

ProsedurAlgoritmaBressenham Void line (intxa,ya,xb,yb,xEnd; Float x,y) { intdx=abs(xb-xa),dy=abs(yb-ya),p=2*dy-dx,twoDy=2*dy,twoDyDx=2*(dy-dx); if (xa>xb){ x=xb; y=yb; xEnd=xa; } else{ x=xa; y=ya; xEnd=xb; } SetPixel(x,y); While (x<xEnd){ x++; if (p<0){ p +=twoDy; } else { y++; p+=twoDyDx; } setPixel(x,y); } }; GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

AlgoritmaGaris C++ • Algoritmagaris C++ adalahpembentukangarisdenganmemanfaatkanfungsi yang disediakanoleh C++. • DalamC++, fungsi yang digunakanuntukpembentukangarisdenganmenggunakanpasanganfungsiMoveTodanLineTo. • MoveTodigunakanuntukmengubahposisigambardari X ke Y. • LineTodigunakanuntukmenggambargarispada canvas dengan pen dimanagarisdimulaidarititik X menuju Y. GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

Cara pemanggilanuntukkeduafungsitersebutadalah : void __fastcallMoveTo(int X, int Y); void __fastcallLineTo(int X, int Y); GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

PembangkitanKarakter • Tampilan gambar akanlebihsempurnajikaditambahdengan kata ataukalimat. • Duametodauntukmembangkitkankarakter, yaitu : • Strokemethod • Metodatitik/ dot-matrix / bitmapmethod GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

StrokeMethod • Dalammetodaini, karkaterdianggapsebagaikumpulansegmengaris yang dihubungkan pada tempat-tempattertentuuntukmembentukkarakter yang dimaksud. • Keuntungan : denganmudahdapatmemperbesarataumemperkecilukurankarakter yang dibangkitkan, dengan cara memperpanjang / memperpendeksegmengaris yang ada. GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

MetodaTitik • Dalammetodatitik, karakterdisajikansebagaisuatularikdimensidua yang mempunyaiberagamjumlahbaris dan kolom. • Setiapelemenlarihdianggapsebagaipiksel yang dapatdihidupkanataudimatikan. • Keuntungan : kita bisa membuattulisanhitamseolah-olahberada di atas layar putihatausebaliknya. GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

To be continue.. GrafikaKomputer - STMIK WidyaCiptaDharma Dosen : DewiOctaviani, S.T, M.C.s

PEMBANGKITAN CITRA GRAFIK Dosen : Dewi Octaviani , S.T, M.C.s