IMPLEMENTASI PENGOLAHAN CITRA DIGITAL PADA KANVAS LUKIS VIRTUAL SEBAGAI ANTARMUKA PADA APLIKASI BERBASIS WEB

YANIEF RAHMAD NUR LATIEF, Dr. Agus Harjoko, M.Sc.

2015 | Skripsi | S1 ELEKTRONIKA DAN INSTRUMENTASI

Pada era dimana teknologi dan ilmu pengetahuan berkembang dengan cepat, lebih banyak masyarakat luas yang bisa menggambar dengan menggunakan perangkat layar sentuh sehingga gerakan tangan bisa mirip dengan cara menggambar menggunakan kanvas seperti menggambar di dunia nyata. Penelitian ini muncul dari keingintahuan untuk menggunakan computer vision pada aplikasi web sebagai alat bantu media lukis. Dengan computer vision manusia bisa berinteraksi dengan komputer hanya dengan gerakan-gerakan khusus pada anggota tubuh atau benda yang berada di sekitarnya tanpa memerlukan perangkat tambahan tertentu. Penelitian ini mencoba penerapan pengolahan citra digital pada aplikasi web supaya ujung jari telunjuk dapat mereplikasi perilaku alat lukis. Digunakan webcam untuk menangkap citra ujung jari telunjuk. Hasil akuisisi citra diolah di peramban dengan menggunakan Javascript dengan metode deteksi objek Viola- Jones untuk mendeteksi ujung jari telunjuk. Dari hasil pengujian sistem, diketahui bahwa jarak optimal secara horizontal antara ujung jari telunjuk terhadap webcam adalah 25-55 cm, dan sistem dapat mengenali ujung jari telunjuk dengan derajat kemiringan ujung jari 20 derajat mendekati tangan kiri dan 10 derajat menjauhi tangan kiri. Pada ruangan berlatar belakang warna putih polos dan ruangan dengan sedikit perabot di dalamnya, sistem mampu mengenali ujung jari telunjuk. Sistem mengalami kesulitan mengenali ujung jari telunjuk pada ruangan berlatar belakang yang coklat dan bercorak. Sedangkan pada ruangan dengan banyak perabot di dalamnya, sistem mengalami kesalahan berupa mendeteksi objek selain ujung jari telunjuk. Alat- alat lukis yang digunakan, yaitu kuas, penghapus, persegi, lingkaran, dan garis bisa berfungsi dengan baik.

Nowadays more people can digitally paint with any touch screen devices that can make the hand gestures like drawing on a real canvas surface just like in the real world. This study arose from curiosity to use computer vision in a web application as a tool for painting medium. With computer vision, humans can interact with the computer only with specific movements in the limbs or objects in the surrounding areas without the need for specific enhancements This study tried to apply digital image processing on a web application so that the index fingertip can replicate the behavior of painting tools. Webcam was used to acquire index fingertip images. The image acquisitioned then processed with Javascript and Viola-Jones object detection method to detect index fingertips. From the tests results, It is known that the optimal distance horizontally between index fingertip and the webcam is 25-55 cm and the system recognized right index fingertip diagonally between 20 degrees approaching and 10 degrees away from the left hand. The system was able to recognize the tip of the index finger in the room with plain white background and the room with little furniture in it. The system had difficulty recognizing the index fingertip on room with a brown and patterned background. While in the room with a lot of furniture inside, the system encountered an error in the form of detecting objects other than the index fingertip. The painting tools used, namely brush, eraser, rectangle, circle, and line, can function properly.

Kata Kunci : aplikasi web, webcam, deteksi objek, gerakan tangan, Viola-Jones, Javascript, ujung jari telunjuk, pengolahan citra digital/web application, object detection, hand gesture, Viola-Jones, Javascript, index fingertip, digital image processing