Siapkan media pendukung dengan file presentasi (PPT) untuk presentasi Anda.
Berikut adalah template presentasi interaktif menggunakan reveal.js dengan tema RedHat. Navigasi dilakukan dengan mudah — cukup gunakan tombol panah keyboard (← →) atau gestur swipe. Tekan ESC untuk melihat tampilan ringkasan seluruh slide. Klik tombol fullscreen di sudut kanan bawah untuk memasuki mode presentasi.
Tips: Slide ini dapat dijadikan template. Salin struktur HTML-nya, lalu ganti konten sesuai kebutuhan presentasi Anda. Apabila memerlukan versi .pdf, dapat diekspor melalui Print (Ctrl+P).
Algoritma Penggambaran Garis
DDA & Bresenham Line Algorithm
Grafika Komputer — UTS Semester Genap 2025/2026
[Nama] | [NIM] | IF601
Materi Presentasi
Pengenalan Algoritma Garis
Algoritma DDA (Digital Differential Analyzer)
Algoritma Bresenham
Perbandingan DDA dan Bresenham
Demo & Visualisasi
Kesimpulan
Apa itu Algoritma Garis?
Algoritma untuk rasterisasi — mengubah garis matematis kontinu menjadi pixel-pixel diskrit di layar
Merupakan salah satu permasalahan fundamental dalam grafika komputer
Garis ideal bersifat kontinu, sementara layar hanya terdiri dari grid pixel diskrit — representasi sempurna tidak dimungkinkan
Oleh karena itu, algoritma harus cermat menentukan pixel mana yang paling mendekati garis ideal
Ilustrasi Rasterisasi Garis
Algoritma DDA
Digital Differential Analyzer
Cara kerja DDA
Bekerja secara incremental — bergerak langkah demi langkah dengan menghitung inkremen di sepanjang garis
function DDA(x1, y1, x2, y2):
dx = x2 - x1
dy = y2 - y1
steps = max(abs(dx), abs(dy))
xInc = dx / steps
yInc = dy / steps
x = x1; y = y1
for i = 0 to steps:
plotPixel(round(x), round(y))
x = x + xInc
y = y + yInc
Contoh Perhitungan DDA: (2,3) → (8,7)
Step
x
y
Plot
0
2.000
3.000
(2,3)
1
3.000
3.667
(3,4)
2
4.000
4.333
(4,4)
3
5.000
5.000
(5,5)
4
6.000
5.667
(6,6)
5
7.000
6.333
(7,6)
6
8.000
7.000
(8,7)
Algoritma Bresenham
Integer-Only Line Algorithm (1965)
Cara kerja Bresenham
Hanya menggunakan integer arithmetic — tidak melibatkan floating-point sama sekali
Menggunakan decision parameter \(p_k\) untuk menentukan arah pixel berikutnya
\(p_k \geq 0\) → pilih pixel atas (NE)
\(p_k < 0\) → pilih pixel kanan (E)
Lebih cepat dibandingkan DDA — seluruh operasi hanya melibatkan bilangan bulat
Pseudocode Bresenham
function Bresenham(x1, y1, x2, y2):
dx = abs(x2 - x1); dy = abs(y2 - y1)
p = 2 * dy - dx // decision param
x = x1; y = y1
plotPixel(x, y)
while x != x2:
x = x + sx
if p >= 0:
y = y + sy
p = p + 2*dy - 2*dx
else:
p = p + 2*dy
plotPixel(x, y)
Contoh Perhitungan Bresenham: (2,3) → (8,7)
k
pk
(x,y)
0
2
(2,3)
1
-2
(3,4)
2
6
(4,4)
3
2
(5,5)
4
-2
(6,6)
5
6
(7,6)
6
—
(8,7)
Perbandingan DDA dan Bresenham
Aspek
DDA
Bresenham
Aritmatika
Floating-point
Integer only ✓
Kecepatan
Lambat
Cepat ✓
Pembulatan
Harus round()
Tidak perlu ✓
Akurasi
Error akumulatif
Akurat ✓
Kompleksitas
Sederhana
Sedikit lebih kompleks
Visualisasi Interaktif
Kunjungi halaman Soal 1 — tersedia Canvas interaktif yang dapat menggambar garis menggunakan kedua algoritma, pixel demi pixel.
Demo Canvas Algoritma Garis
Kesimpulan
DDA cocok untuk pembelajaran — konsepnya sederhana dan mudah dipahami
Bresenham merupakan standar industri — cepat, akurat, dan efisien (digunakan secara luas di aplikasi nyata)
Digunakan di GPU, printer, plotter, dan hampir seluruh sistem grafika modern
Prinsip decision parameter-nya juga diterapkan untuk menggambar lingkaran (Midpoint Circle) dan kurva lainnya
Referensi
Bresenham, J.E. (1965). "Algorithm for computer control of a digital plotter". IBM Systems Journal.
Foley, van Dam, Feiner, Hughes. Computer Graphics: Principles and Practice.
Hearn & Baker. Computer Graphics with OpenGL.
Terima Kasih
UTS Grafika Komputer — Semester Genap 2025/2026
[Nama] | [NIM]
Navigasi: ← → arrow keys | ESC = slide overview | F = fullscreen | S = speaker notes
💻Screenshot Presentasi FullscreenMode fullscreen (tekan F) — tangkap salah satu slide dengan konten terlihat