Logika Kontrol Gestur AI

Analisis mendalam tentang bagaimana kode grafgameN_8_5-5d.html menerjemahkan gerakan fisik tangan menjadi input game.
Click here for English

1. Teknologi di Balik Layar

Kode ini menggunakan dua pustaka Open Source dari Google yang dimuat melalui CDN (Content Delivery Network). Ini memungkinkan AI berjalan langsung di browser tanpa perlu server backend.

Core TensorFlow.js

Mesin pembelajaran mesin (Machine Learning) yang memanfaatkan akselerasi hardware (WebGL) pada kartu grafis komputer Anda untuk melakukan perhitungan matematika berat di browser.

<script src=".../tfjs"></script>

Model HandPose

Jaringan saraf tiruan yang sudah dilatih sebelumnya (pre-trained). Model ini menerima gambar video dan memprediksi 21 titik koordinat 3D kerangka tangan manusia.

<script src=".../handpose"></script>

2. Pipeline Deteksi & Stabilisasi

Tantangan utama dalam input webcam adalah "jitter" (tangan yang gemetar). Kode ini menggunakan teknik rata-rata untuk menstabilkan input.

Langkah A: Ekstraksi Landmark

Alih-alih melacak ujung jari (yang sering bergerak-gerak), kode ini melacak Sendi MCP (Buku Jari) yang lebih stabil secara anatomis.

  • Index 5: Pangkal Telunjuk
  • Index 9: Pangkal Jari Tengah
  • Index 13: Pangkal Jari Manis

Langkah B: Titik Kontrol Rata-rata

Ketiga titik tersebut dirata-ratakan untuk menghasilkan satu Control Point yang stabil.

const landmarkIndices = [5, 9, 13];
// Menghitung rata-rata posisi X dan Y
controlPointX = totalX / 3;
controlPointY = totalY / 3;

// PENTING: Membalik koordinat X (Cermin)
mirroredX = videoWidth - controlPointX;

3. Matematika "Swipe" (Analisis Vektor)

Inovasi utama dalam kode ini adalah penggunaan Buffer Riwayat (History Buffer). Kode tidak melihat "di mana tangan berada", melainkan "ke mana tangan bergerak" dalam 500ms terakhir.

Array Riwayat

Variabel controlPointHistory menyimpan daftar posisi dan waktu. Data yang lebih tua dari 0.5 detik dihapus.

Titik Terlama (t - 0.5s)
Titik Awal Gerakan
↓ Selisih (Delta)
Titik Sekarang (t - 0s)
Titik Akhir Gerakan

Perhitungan Vektor

Kode menghitung selisih jarak (Delta) antara titik terlama di memori dengan titik saat ini.

// X dihitung terbalik karena efek cermin
diffX = oldestPoint.x - currentPoint.x;
// Y standar (Ke bawah = Positif)
diffY = currentPoint.y - oldestPoint.y;

// Batas minimum gerakan agar dianggap swipe
const threshold = 25; // Pixel

Logika Keputusan Arah

Kode membandingkan besarnya perubahan horizontal vs vertikal untuk menentukan input game.

1. Cek Ambang Batas Apakah gerakan > 25px?
Jika Tidak: Status IDLE (0).
2. Cek Dominasi Sumbu Apakah abs(diffX) > abs(diffY)?
Ya: Gerakan Horizontal.
Tidak: Gerakan Vertikal.
3. Penentuan Arah
Horizontal:
diffX > 0: Kiri (4), diffX < 0: Kanan (2)
Vertikal:
diffY > 0: Bawah (3), diffY < 0: Atas (1)

4. Simulasi Visual Logika

Diagram interaktif di bawah ini mensimulasikan bagaimana kode menerjemahkan vektor gerakan fisik menjadi data. Garis Putus-putus Hijau mewakili data yang tersimpan di controlPointHistory.

5. Integrasi Loop Permainan

Bagaimana logika AI ini disisipkan ke dalam game tanpa membuat game menjadi lambat (lag)?

requestAnimationFrame(gameLoop);

function gameLoop(now) {
    // 1. Jalankan CV secara Asynchronous (Promise)
    // Ini mencegah game berhenti saat AI berpikir
    model.estimateHands(video).then( preds => {
        direction = getMotionDirection(now);
        
        // Logika Persistensi (Penyimpanan Status)
        if (direction !== 0) {
            // Jika tangan terdeteksi bergerak, simpan arahnya
            lastValidDirection = direction;
            arah_gelinding = direction;
        } else {
            // Jika tangan berhenti atau hilang,
            // gunakan arah valid terakhir agar bola tetap jalan.
            arah_gelinding = lastValidDirection;
        }
    });

    // 2. Update Logika Game & Gambar Canvas
    // ... kode menggambar bola ...
}