AlgoVisualizer

Apa itu AlgoVisualizer?

AlgoVisualizer adalah interactive educational tool yang membantu mahasiswa computer science dan self-learner memahami cara kerja algoritma sorting dan pathfinding—bukan hanya melihat hasil akhirnya, tetapi setiap langkah di perjalanannya.

Dibangun dalam 5 hari sebagai bagian dari structured learning sprint, project ini mengutamakan narasi sebagai fondasi pembelajaran. Animasi hanyalah hook-nya; penjelasan kontekstual di setiap langkah adalah substansinya.

---

Arsitektur Utama

1. Algorithms as Generator Functions

Setiap algoritma ditulis sebagai JavaScript generator function. Setiap yield menghasilkan satu frame yang berisi snapshot data, highlight, dan narasi.

function* quicksort(arr: number[]): Generator<SortingFrame> {
  // yield pada setiap swap, comparison, dan pivot placement
}

Pendekatan ini memisahkan algorithm logic dari rendering logic secara penuh. Konsekuensinya:

• Algoritma bisa diuji tanpa UI
• Step backward cukup dengan memundurkan index frame, tanpa perlu menjalankan ulang algoritma
• Side-by-side comparison menjadi jauh lebih sederhana untuk diimplementasikan

---

2. Tiga Level Explanation

Setiap frame membawa narasi yang dirender di sidebar dalam tiga tingkat penjelasan:

• Singkat — narasi satu kalimat dengan terminology tooltip Contoh: hover pada istilah seperti pivot akan memunculkan definisi singkat
• Detail — narasi ditambah konteks tentang apa yang sedang terjadi dalam algoritma
• Teknikal — narasi lengkap dengan pseudocode dan highlight pada baris aktif

Tujuannya adalah agar pengguna dengan tingkat pemahaman berbeda tetap bisa belajar dari visualisasi yang sama, tanpa dipaksa membaca penjelasan dengan kedalaman yang tidak mereka butuhkan.

---

3. Compare Mode

Aplikasi menyediakan mode perbandingan dua algoritma secara side-by-side dengan input yang sama.

Selama visualisasi berjalan, statistik seperti comparisons, swaps, dan visited nodes diperbarui secara live di setiap frame dan divisualisasikan dalam bentuk bar chart. Fitur ini membantu pengguna melihat perbedaan strategi dan trade-off performa secara lebih intuitif.

---

Fitur Lengkap

| Kategori | Detail | | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Sorting | Quicksort, Merge Sort, Heap Sort, dan Radix Sort—masing-masing divisualisasikan langkah demi langkah, termasuk proses seperti pivot selection, split, merge, heapify, dan bucket distribution | | Pathfinding | Dijkstra dengan priority queue dan explored nodes, serta A* dengan heuristic cost overlay pada grid 20×20 | | Maze Generator | Recursive backtracking dengan visualisasi pada setiap carved passage | | Playback Controls | Play/Pause, Step Forward/Backward, Jump to Start/End, serta pengaturan kecepatan dari 0.25× hingga 4× | | Input Generator | Random, Nearly Sorted, Reverse, dan Manual input | | Keyboard Shortcuts | Space, ←, →, Home, End, 1, 2, 3, dan R | | Dark Mode | Mengikuti preferensi sistem secara otomatis |

---

Tech Stack

| Layer | Teknologi | | ------------------------ | ----------------------------------------------------- | | Framework | Next.js | | Language | TypeScript | | Styling | Tailwind CSS | | Animation / Playback | Frame-based playback system berbasis generator output | | State Management | React state + frame orchestration logic | | Testing | Unit testing untuk algorithm logic | | Build & Hosting | Vercel |

Jika stack final kamu lebih spesifik (misalnya benar memakai Zustand, Framer Motion, Vitest, atau React Testing Library), bagian ini sebaiknya disesuaikan agar tetap akurat.

---

Dampak & Insight

Arsitektur berbasis generator function terbukti sangat efektif untuk educational visualization karena menghasilkan pemisahan tanggung jawab yang bersih antara algoritma dan tampilan.

Beberapa dampak paling terasa dari pendekatan ini:

• Backward navigation tanpa kompleksitas tambahan — cukup menggeser index ke frame sebelumnya
• Algorithm testing tanpa DOM — logic dapat diuji sebagai pure function/generator
• Separation of concerns yang jelas — rendering layer tidak perlu mengetahui detail internal algoritma
• Compare mode menjadi natural — cukup menghasilkan dua frame array dan merender keduanya secara berdampingan

Dari user testing informal, fitur dengan dampak tertinggi justru bukan animasinya, melainkan terminology tooltip dan three-level explanation. Pengguna cenderung berhenti di langkah-langkah menarik, meng-hover istilah yang disorot, lalu berpindah ke level Teknikal untuk membaca pseudocode sambil mengamati animasi.

Hal ini menunjukkan bahwa visualisasi yang baik bukan hanya soal membuat algoritma “bergerak”, tetapi juga soal menyediakan konteks belajar yang cukup di momen yang tepat.

---

Live Demo

• View on Vercel: https://algovisualizer-gamma.vercel.app/