01 — Tentang Proyek
Proyek akhir mata kuliah Grafika Komputer yang mengimplementasikan berbagai algoritma fundamental grafika 2D secara interaktif berbasis web menggunakan HTML5 Canvas API dan JavaScript murni.
Rendering dilakukan secara pixel-by-pixel tanpa memanfaatkan fungsi drawing bawaan Canvas (kecuali fillRect untuk plot piksel), sehingga setiap algoritma terlihat cara kerjanya secara nyata.
02 — Algoritma yang Diimplementasikan
| Materi | Algoritma | Deskripsi Singkat |
|---|
| 03 |
DDA Line |
Digital Differential Analyzer — interpolasi floating-point. steps = max(|Δx|, |Δy|). |
| 03 |
Bresenham |
Algoritma garis integer-only. Decision variable p, lebih efisien dari DDA. |
| 04 |
Midpoint Circle |
Berbasis Bresenham, mulai dari (0, r), manfaatkan 8-fold symmetry. |
| 04 |
Midpoint Ellipse |
Perluasan lingkaran untuk elips: x²/rx² + y²/ry² = 1. 2 region, 4-fold symmetry. |
| 05 |
Flood Fill |
Scanline Flood Fill berbasis antrian (queue-based), menghindari stack overflow rekursif. |
| 05 |
Scan-Line Fill |
Scan-Line Polygon Fill dengan Active Edge List (AEL). Berbasis geometri, bukan warna piksel. |
| — |
Pensil Bebas |
Freehand drawing menggunakan DDA stroke dengan round brush tip, disimpan di paint layer terpisah. |
03 — Atribut Output Primitif (Materi 06)
Tipe garis diimplementasikan di level piksel (bukan CSS setLineDash) menggunakan pola on/off:
- Solid — semua piksel aktif
- Dashed — pola 6 ON, 4 OFF
- Dotted — pola 1 ON, 3 OFF
- Dash-Dot — pola 6 ON, 3 OFF, 1 ON, 3 OFF
04 — Transformasi 2D (Materi 07–09)
Semua transformasi menggunakan koordinat homogen 3×3. Matriks gabungan: M = T · R · S · Sh
Urutan aplikasi (kanan ke kiri): Shear → Scale → Rotate → Translate. Rotasi selalu terhadap pusat objek (origin lokal).
| Transformasi | Parameter |
|---|
| Translasi (T) | tx, ty dalam piksel |
| Rotasi (R) | sudut dalam derajat, terhadap pusat objek |
| Skala (S) | faktor skala uniform (0.1× – 4.0×) |
| Shear (Sh) | shx dan shy dalam persen (−200 s/d +200) |
| Refleksi | Sumbu X, Y, Origin, atau garis y=x |
05 — Cara Penggunaan
- Pilih alat dari toolbar di atas, lalu klik/drag di canvas untuk menggambar.
- Untuk Poligon/Scan-Line: klik satu per satu titik, lalu tekan Selesai Poligon.
- Untuk Flood Fill: klik area terbuka di canvas — akan diisi warna Fill.
- Pensil: tahan dan gerak mouse untuk menggambar bebas seperti Paint.
- Penghapus: tahan dan gerak mouse untuk menghapus coretan/fill. Ukuran penghapus bisa disesuaikan.
- Gunakan tab Transformasi di panel kiri untuk mengubah posisi, rotasi, skala, dan shear objek terpilih.
- Shortcut keyboard: V=Cursor, P=Pensil, E=Penghapus, F=Fill, L=Garis, C=Lingkaran.
06 — Kelompok 2
- Rakha Taufiqurrahman F A
- Taufiq Candra Kurniawan
- Gorbi Ello Pasaribu