Tool Penentu Koordinat pada Gambar: Membantu Pembuatan Animasi Canvas Lebih Presisi

Senin, 15 Juni 2026

Saat membuat simulasi atau animasi interaktif berbasis <canvas>, misalnya menggambar pergerakan elektron di sepanjang kabel, menandai posisi tombol, label, atau area tertentu pada sebuah gambar, salah satu pekerjaan yang paling merepotkan adalah menentukan koordinat (x, y) yang tepat dari elemen-elemen tersebut. Coba-coba angka satu per satu lalu reload halaman berulang kali tentu sangat membuang waktu.

Tool ini dibuat untuk menyelesaikan masalah itu. Cukup upload gambar yang akan dipakai sebagai latar, lalu klik titik-titik pada gambar untuk menandai jalur atau posisi yang dibutuhkan. Tool akan otomatis menghasilkan array koordinat dalam format JavaScript yang siap disalin dan langsung dipakai dalam kode simulasi.

Persiapan Gambar

Sebelum mulai, perhatikan beberapa hal terkait gambar yang akan digunakan:

Format gambar: JPG, PNG, atau WEBP, semua format gambar umum didukung karena tool membaca gambar langsung dari file di komputer.
Ukuran gambar: gunakan ukuran yang sama dengan ukuran <canvas> pada simulasi akhir (misalnya 600 x 600 piksel). Ini penting agar koordinat yang dihasilkan tool ini langsung cocok tanpa perlu konversi skala lagi.
Resolusi: usahakan gambar tidak terlalu besar (disarankan di bawah 1200 x 1200 piksel) agar proses klik dan zoom tetap responsif di browser.
Kualitas gambar: pastikan elemen yang ingin ditandai (kabel, tombol, area layar, dll.) terlihat jelas dan tidak buram, supaya penandaan titik bisa presisi sampai ke piksel.

Cara Penggunaan, Langkah demi Langkah

Buka tool dan upload gambar.
Klik tombol "Upload gambar", lalu pilih file gambar dari komputer. Gambar akan langsung muncul di area canvas dengan ukuran aslinya.
Tentukan grup titik yang dibutuhkan.
Secara default sudah tersedia dua grup: kabelHitam dan kabelMerah (cocok untuk kasus jalur kabel). Jika perlu grup lain, misalnya untuk menandai posisi tombol, area layar, atau elektrode, ketik nama grup baru pada kolom teks (contoh: tombolPower, areaLCD, elektrodeZn), lalu klik "Tambah grup". Setiap grup akan punya warna penanda yang berbeda.
Pilih grup aktif.
Gunakan dropdown untuk memilih grup mana yang sedang ditandai. Semua klik berikutnya akan masuk ke grup yang sedang aktif ini.
Klik pada gambar untuk menandai titik.
Klik kiri di titik-titik sepanjang objek yang ingin ditandai (misalnya mengikuti lekukan kabel dari satu ujung ke ujung lain, secara berurutan). Semakin banyak titik yang diklik pada bagian yang berbelok, semakin mulus jalur yang akan dihasilkan saat dipakai di animasi.
Gunakan kaca pembesar untuk presisi.
Saat kursor digerakkan di atas gambar, akan muncul jendela kaca pembesar (zoom) beserta angka koordinat real-time di bawah canvas. Manfaatkan ini untuk memastikan titik yang diklik benar-benar jatuh pada posisi yang diinginkan, terutama untuk objek kecil seperti tombol.
Koreksi titik bila diperlukan.
- Klik tombol "Hapus titik terakhir" untuk membatalkan titik paling akhir pada grup aktif.
- Klik kanan pada sebuah titik di gambar untuk menghapus titik terdekat dari klik tersebut (tidak harus titik terakhir).
- Aktifkan opsi "Snap ke grid (5px)" jika ingin koordinat dibulatkan ke kelipatan 5, berguna untuk merapikan posisi elemen kotak seperti tombol atau area layar.
Ulangi untuk grup lain.
Ganti grup aktif lewat dropdown, lalu lanjutkan menandai titik-titik untuk objek berikutnya. Semua grup yang sudah dibuat tetap tersimpan dan ditampilkan bersamaan di atas gambar dengan warna masing-masing, beserta keterangan jumlah titiknya pada bagian legenda di bawah canvas.
Salin hasil array koordinat.
Di bagian bawah halaman akan tampil kode siap pakai dalam format:
```
var kabelHitam = [
    {x:144, y:114},
    {x:107, y:92},
    ...
];

var kabelMerah = [
    {x:384, y:504},
    ...
];
```
Salin (copy) seluruh teks ini dan tempel (paste) ke dalam kode simulasi, menggantikan array koordinat yang lama.
Reset jika ingin mulai ulang.
Tombol "Reset semua titik" akan mengosongkan seluruh titik di semua grup tanpa perlu upload ulang gambar, jika ingin menandai ulang dari awal.

Pemanfaatan Hasil Koordinat

Array koordinat yang dihasilkan tool ini bisa langsung dipakai untuk berbagai kebutuhan dalam simulasi berbasis canvas, misalnya:

Jalur pergerakan objek, seperti pergerakan elektron sepanjang kabel, aliran fluida dalam pipa, atau lintasan benda pada animasi fisika. Titik-titik yang ditandai dapat digunakan sebagai titik kontrol untuk interpolasi posisi sepanjang jalur tersebut.
Area klik interaktif (hotspot), misalnya menandai pusat dan radius sebuah tombol pada gambar, sehingga klik di area tersebut dapat memicu suatu aksi (seperti menyalakan/mematikan animasi).
Area tampilan dinamis, seperti area layar digital (LCD) tempat menampilkan nilai yang berubah-ubah (misalnya pembacaan voltmeter, termometer, atau alat ukur lainnya).
Penanda label atau anotasi, posisi teks keterangan, simbol kutub (+/−), nama zat, atau elemen lain yang perlu ditempatkan tepat di lokasi tertentu pada gambar.

Karena gambar yang diupload ke tool ini menggunakan ukuran yang sama dengan ukuran canvas pada simulasi akhir, koordinat yang dihasilkan dapat langsung dipakai tanpa perlu perhitungan skala tambahan, cukup salin, tempel, dan sesuaikan urutan/jumlah titik bila diperlukan.