Komputer Grafik & Visualisasi Data

Konsep Geometri 2D
 Objectives

 Memahami tentang:
 Sistem Koordinat 2D
 Pembentukan Geometri
 Geometri Prosedural
Sistem Koordinat 2D
 Sistem Koordinat 2D

 Secara konsep, komputer grafik menggunakan

sistem koordinat sama seperti koordinat Cartesius
Grafik diambil dari https://processing.org/tutorials/drawing/
 Sistem Koordinat 2D
(0,0)

x+

y+

 Namun kebanyakan implementasi Komputer Grafik

menggunakan sistem koordinat seperti Cartesian namun
dengan titik (0,0) berada di kiri-atas (koordinat tayang)
 Sehingga sumbu x positif menuju ke arah kanan, dan
sumbu y positif menuju ke bawah. Sebaliknya x negatif ke
kiri, dan y negatif ke atas.
 Sistem Koordinat 2D - Kuadran
Kuadran III Kuadran IV

(-x,-y) (x,-y)

(0,0)

(-x,y) (x,y)
Kuadran II Kuadran I

 Sehingga dalam pembagian kuadran juga terdapat

perbedaan pembagian yang biasa dibahas dalam
matematika
 Namun dalam pemrograman Komputer Grafik, yang
dijadikan patokan biasanya hanya Kuadran I dengan
(x,y)
 Sistem Koordinat 2D - Implementasi

Dalam hal implementasi:

 Koordinat dalam grafik 2D biasanya juga merupakan
koordinat pixel (grafik raster) – dan yang
ditayangkan juga tergantung dari resolusi yang
ditentukan
 Dalam pembentukan benda dengan menetapkan
titik-titik koordinat juga perlu diingat: benda yang
dihasilkan di koordinat cartesius akan terbalik di
koordinat komputer grafik
 Sistem Koordinat 2D - Implementasi

 Dalam processing, implementasi koordinat

ditentukan dengan fungsi:
size(width, height, mode)
 Mode dalam parameter size() adalah mode
visualisasi/rendering yang dalam versi 3.0 terdapat
beberapa mode:
P2D (OpenGL 2D – mode default)
P3D (OpenGL 3D – memungkinkan hardware
acceleration)
FX2D (experimental – lebih cepat untuk 2D)
 Sistem Koordinat 2D - Implementasi

 Dengan size(640, 360); maka yang

ditayangkan hanya sampai koordinat x:640, dan
y:360. Lebih dari itu tidak ditayangkan
 Sistem Koordinat 2D - Implementasi
 Garis yang dibentuk di Koordinat Cartesius (KIRI)
akan terbalik jika dibentuk di Koordinat komputer
grafik (KANAN)

Grafik diambil dan diolah dari https://processing.org/tutorials/drawing/

 Sistem Koordinat 2D - Implementasi
 Koordinat seperti cartesius bisa disimulasikan di
koordinat tayang dengan mengubah koordinat (y)
menjadi
(tinggi layar – y)
 Misalkan:
 line( 10, 0, 210, 185) di lingkungan size(300, 300)
dapat disimulasikan tergambar di cartesius dengan
mengubah fungsi line() menjadi line(10, 300, 210, 115)
Konsep Geometri 2D
 Raster vs Vector Graphic

 Raster adalah jenis gambar digital yang merepresentasikan

gambar sebagai susunan titik-titik atau matriks. Tiap titik disebut
pixel sebagai elemen terkecil yang menyusun gambar. Pada
gambar hitam-putih, pixel hanya bisa berwarna hitam atau
putih. Sedangkan pada gambar berwarna, tiap-tiap pixel
memiliki warna.
 Vektor adalah gambar yang didefinisikan dalam bentuk data
informasi. Terdapat bentuk-bentuk geometris, shape, titik-titik,
ataupun kurva, bisa dirangkai menjadi bentuk yang kompleks

Gambar diambil dari https://signalizenj.wordpress.com/2015/01/29/vector-vs-raster/

 Konsep Geometri
 Dari kata Yunani kuno: Geo (earth) & Metron
(measurement)
 Geometri adalah studi tentang bentuk (shapes) dan
ruang (spaces) yang ditempati
 Geometri memiliki aspek dimensi:
0 dimensi – terkait tentang posisi: titik
1 dimensi – terkait tentang jarak: garis
2 dimensi – terkait tentang luasan: benda 2D
3 dimensi – terkait tentang volume: benda 3D
 Pembentukan Geometri
Terdapat tiga unsur utama dalam
pembentukan geometri:
 Titik (point)
 Garis (line)
 Bidang (plane)

Gambar diambil dari https://en.wikipedia.org/wiki/File:Mesh_overview.svg

 Pembentukan Geometri – Titik

 Titik dalam sebuah geometri biasa disebut vertex (jamak:

vertices/vertexes) yaitu tempat bertemunya garis,
lengkungan, atau sisi yang biasanya membentuk sudut
 Ditempatkan di ruang koordinat berdasar sumbu x, y,
atau z
 Contoh vertex adalah posisi x1 – x3 dan y1 – y3 di bawah
 Pembentukan Geometri – Garis

 Garis dalam sebuah geometri juga disebut edge

(jamak: vertices/vertexes) atau sisi, adalah
penghubung antar dua vertex
 Penggambaran garis dalam sebuah sistem koordinat
menggunakan algoritma, antara lain yang dipakai:
 Digital Differential Analyzer (DDA) Algorithm
 Bresenham’s Line Algorithm
 Yang paling banyak dipakai dalam penggambaran
garis adalah Bresenham karena sifatnya yang efisien
dalam implementasi, dan bisa menggambarkan
lengkungan dan lingkaran dengan lebih akurat
Pembentukan Geometri – Penggambaran Garis

 Algoritma penggambaran garis diperlukan untuk

menentukan pixel mana yang dipakai untuk
menampilkan garis tersebut secara fisik – tidak
semua yang dilewati garis dipakai untuk
menggambar garis tersebut
 Pembentukan Geometri – Bidang

 Bidang adalah wilayah yang berada di antara sisi.

Secara definisi:
Plane is a flat surface that is infinitely large and with
zero thickness
 Disebut tidak bertepi dan tidak memiliki tebal karena
memang secara definisi dia sebagai “bungkus”
untuk geometri 3D
Pembentukan Geometri – Warna Bidang

 Bidang biasanya memiliki properti warna yang

menunjukkan benda tersebut “terisi” warna apa
 Algoritma untuk mengisi bidang disebut fill algorithm.
Terdapat beberapa algoritma: boundary fill, flood
fill, scanline fill

Gambar diambil dari https://commons.wikimedia.org/wiki/File:Recursive_Flood_Fill_8_(aka).gif

Implementasi Geometri 2D
 Implementasi Geometri di Processing

 Di processing kita bisa melakukan pembentukan

geometri/bentuk (shape) menggunakan:
fungsi beginShape() & endShape() untuk memulai
& mengakhiri pembentukan
fungsi vertex() untuk penentuan vertex
pembentuknya

 Penjelasan tiga fungsi tersebut bisa dilihat di

Reference Processing
https://processing.org/reference/beginShape_.html
https://processing.org/reference/endShape_.html
https://processing.org/reference/vertex_.html
 Fungsi beginShape()

 Fungsi beginShape() digunakan untuk memulai

pembentukan geometri. Terdapat beberapa
pilihan parameter pembentukan:
 Tanpa parameter – semua vertex dipakai untuk satu
bentuk
 POINTS – setiap 1 vertex dibentuk sebagai titik
 LINES – setiap 2 vertex dibentuk sebagai garis
 TRIANGLES – setiap 3 vertex dibentuk sebagai segitiga
 TRIANGLE_FAN – 3 – 6 vertex dibentuk sebagai “kipas”
 TRIANGLE_STRIP – minimal 3 vertex sebagai deret
segitiga
 QUADS – setiap 4 vertex dibentuk sebagai segiempat
 QUAD_STRIP – minimal 4 vertex sebagai deret segiempat
 Fungsi beginShape() - Parameter
Triangle Strip Quad Strip Triangle Fan

Triangle Quadrilateral Tanpa Parameter

Gambar diambil dari https://processing.org/reference/beginShape_.html

 Fungsi endShape()

 Fungsi endShape() digunakan untuk mengakhiri pembentukan

geometri. Terdapat dua pilihan parameter pembentukan:
 Tanpa parameter – bentuk “terbuka” (gambar bawah –
KIRI)
 CLOSE – vertex awal dan akhir dihubungkan garis, membuat
benda menjadi “tertutup” (gambar bawah – KANAN)
 Fungsi vertex()

 Fungsi vertex() digunakan untuk menentukan posisi

vertex pembentuk geometri/benda dalam ruang
koordinat.
 Terdapat dua parameter sebagai penentu posisi
vertex: x dan y
 Diletakkan di antara beginShape() dan
endShape():
beginShape();
vertex(x1, y1);
vertex(x2, y2);
…
vertex(xn,yn);
endShape();
Implementasi Dasar Geometri (1)
size(200,200);
strokeWeight(5);
beginShape(POINTS);
vertex(25,25);
endShape();
beginShape(LINES);
vertex(25,50);
vertex(175,50);
endShape();
beginShape(TRIANGLES);
vertex(25,75);
vertex(175,75);
vertex(100,175);
endShape();
 Implementasi Dasar Geometri (2)
size(200,200);
strokeWeight(5);
beginShape();
vertex(25,25);
vertex(25,50);
vertex(175,50);
vertex(25,75);
vertex(175,75);
vertex(100,175);
endShape(CLOSE);
Geometri Prosedural
 Contoh 1: Segitiga Sama Kaki
 Anatomi dasar bentuk segitiga. x1,y1 sebagai acuan
pembentukan
 Contoh 1: Segitiga Sama Kaki
 Substitusi x2, y2, x3, dan y3 dengan parameter dari
bentuk: x1, y1, alas, tinggi
Contoh 1: Segitiga Sama Kaki

 Di aplikasikan dalam bentuk fungsi/method di

Processing

void segiTigaSamaKaki(int x1, int y1,

int alas, int tinggi){
beginShape();
vertex(x1,y1);
vertex(x1+alas,y1);
vertex(x1+alas/2,y1+tinggi);
endShape(CLOSE);
}
 Contoh 1: Segitiga Sama Kaki
 Digunakan dengan fungsi setup() dan draw()

void setup(){
size(400,300);
background(255);
}

void draw(){
background(255);
segiTigaSamaKaki(25,25,100,100);
segiTigaSamaKaki(130,25,100,100);
segiTigaSamaKaki(235,25,100,100);
segiTigaSamaKaki(75,145,100,100);
segiTigaSamaKaki(180,145,100,100);
segiTigaSamaKaki(285,145,100,100);
}
 Contoh 2: Trapesium Sama Kaki

 Anatomi dasar bentuk trapesium sama kaki, x1,y1

sebagai acuan pembentukan
 Contoh 2: Segitiga Sama Kaki
 Substitusi x2, y2, x3, dan y3 dengan parameter dari
bentuk: x1, y1, alas, tinggi
 Contoh 2: Trapesium Sama Kaki
 Di aplikasikan dalam bentuk fungsi/method di
Processing

void trapesium(int x1, int y1, int alas, int atas,

int tinggi){
int A = (alas - atas)/2;
beginShape();
vertex(x1,y1);
vertex(x1+alas,y1);
vertex(x1+alas-A,y1+tinggi);
vertex(x1+A,y1+tinggi);
endShape(CLOSE);
}
 Contoh 2: Trapesium Sama Kaki

 Digunakan dengan fungsi setup() dan draw()

void setup(){
size(400,200);
background(255);
}

void draw(){
background(255);
trapesium(50,50,300,200,100);
}