PERANCANGAN DAN REALISASI SISTEM PENDETEKSI GERAKAN SEBAGAI NATURAL USER INTERFACE ( NUI ) MENGGUNAKAN BAHASA C# ABSTRAK

Transkripsi

1 PERANCANGAN DAN REALISASI SISTEM PENDETEKSI GERAKAN SEBAGAI NATURAL USER INTERFACE ( NUI ) MENGGUNAKAN BAHASA C# Disusun oleh : Jeffry Jurusan Teknik Elektro, Fakultas Teknik,, Jl.Prof.Drg.Suria Sumantri, MPH no.65, Bandung, Indonesia, jeffryajah27@gmail.com ABSTRAK Perancangan sistem pendeteksi gerakan interaktif adalah suatu program yang dirancang untuk memberikan efek interaktif melalui gerakan yang dilakukan user. Pendeteksi gerakan interaktif ini menggunakan dua buah komponen utama yaitu komputer dan webcam. Webcam dirancang agar dapat mendeteksi pergerakan yang terjadi pada interactive space di antara layar komputer dan webcam. Setiap gerakan yang terjadi pada interactive space, tersebut akan direpresentasikan pada layar komputer. Pemrograman yang dilakukan dengan menggunakan bahasa pemrograman C# dan library AForge.Net Framework pada Microsoft Visual Studio AForge.Net Framework ini digunakan karena dirancang khusus untuk memberikan filter pemrosesan gambar pada bahasa pemrograman C#. Perancangan dimulai dengan membuat dua buah program yaitu pendeteksi gerakan dan efek air pada gambar. Kedua program tersebut akan digabungkan sehingga didapatkan satu buah aplikasi pendeteksi gerakan interaktif. Setelah program dibuat, eksperimen dilakukan terhadap aplikasi agar mendapatkan hasil yang optimal. Eksperimen dilakukan terhadap pengaruh pencahayaan, pengaruh jarak bidang interactive space,. Berdasarkan pengaruh pencahayaan, didapatkan bahwa aplikasi harus dilakukan pada keadaan terang. Berdasarkan pengaruh luas bidang interactive space, didapat bahwa pada distance ( jarak webcam ke layar laptop) 1,5 meter gerakan cursor mouse dengan layar mendekati hasil yang diharapkan. Pada pemrosesan efek air dilakukan beberapa penyesuaian agar hasil optimal, yaitu penetapan radius put drop sebesar 20 pixel dan penentuan timer sebesar 100ms. Kata kunci : interactive space, webcam, bahasa C#, pendeteksi gerakan, AForge.Net Framework, efek air. vii

2 DESIGNING AND REALISATION MOVING DETECTION SYSTEM AS NATURAL USER INTERFACE (NUI) USING C# LANGUAGE Write by : Jeffry Dept of Electrical Enginering, Faculty of Enginering, Maranatha Cristian University, Prof.Drg.Suria Sumantri Street, MPH no.65, Bandung, Indonesia, jeffryajah27@gmail.com ABSTRACT The designing of interactive moving detection system is program which build to give interactive effect while the user doing movement. This interactive moving detection use two main component, that is computer and webcam. Webcam was designing to detect motion in interactive space between computer and webcam. Every motion did in the interactive space will being representative in computer s monitor. The program using C# language s program and library AForge.Net Framework in Microsoft Visual Studio AForge.Net Framework used because it was build to image filtering in C# language s program. The first step of designing is make two main program, that is motion detection and water effect in the image. Next step is merge both of the program until the interactive motion detection application made. After that, to make the optimal result, the experiment did. The experiment did to known how the lighting and the distance of interactive space can effect this program. Among to the light effect, this application must doing in the bright condition. Among to the distance of interactive space, has known that in the distance ( webcam to the computer s monitor) 1,5 metre, the motion of mouse s cursor are almost have expected result. In the water effect processing, it has been change to get the optimal result, for example the radius of put drop are 20 pixel and the timer elapsed every 100 ms. Keywords: interactive space, webcam,c# language, motion detection, AForge.Net Framework, water effect viii

3 DAFTAR ISI Halaman Judul... Lembar Pengesahan... Pernyataan Orisinalitas Tugas Akhir... Pernyataan Publikasi Tugas Akhir... Kata Pengantar... Abstrak... Abstract... Daftar Isi... Daftar Tabel... Daftar Gambar... Daftar Lampiran... i ii iii iv v vii viii ix xii xiii xiv BAB I PENDAHULUAN 1.1. Latar Belakang Identifikasi Masalah Perumusan Masalah Tujuan dan Manfaat Pembatasan Masalah Sistematika Penulisan dan Metodologi Penelitian... 3 BAB II LANDASAN TEORI 2.1 Computer Vision Image Processing Natural User Interface ( NUI) AForge.Net ix

4 Grayscale Class Difference Class Threshold Class Erosion Class.. 15 BAB III PERANCANGAN DAN PENDETEKSI GERAKAN DAN EFEK AIR 3.1 Perancangan Letak Pendeteksi Gerakan Perancangan Pendeteksi Gerakan Pada Webcam Pengambilan Gambar oleh Webcam Proses Pendeteksi Gerakan Pengolahan motion detection menjadi pergerakan cursor mouse Perancangan Efek Air.. 36 BAB IV DATA PENGAMATAN DAN ANALISA DATA 4.1 Implementasi dan Analisis Pendeteksi Gerakan Pendeteksi Gerakan Pada Webcam Pencarian titik putih dan perbandingan letak terhadap titik pada layar yang diinginkan Proses pembentukan efek air BAB V KESIMPULAN DAN SARAN 5.1. Kesimpulan Saran DAFTAR PUSTAKA LAMPIRAN A LAMPIRAN B x

5 DAFTAR TABEL Tabel 4.1 Tabel pengaruh pencahayaan Tabel 4.2 Tabel Pengaruh Interactive Space xi

6 DAFTAR GAMBAR Gambar 2.1 Computer Vision.. 5 Gambar 2.2 Representasi 24-bit RGB Gambar 2.3 Pixel sebuah gambar 7 Gambar 2.4 Perkembangan CLI, GUI dan NUI... 8 Gambar 2.5 Grayscale Filter Gambar 2.6 Difference Filter.. 14 Gambar 2.7 Threshold Filter Gambar 2.8 Erosion Filter.. 16 Gambar 3.1 Penempatan Pendeteksi Gerakan Gambar 3.2 Flowchart Pengambilan Gambar oleh Webcam Gambar 3.3 Flowchart Capture Device Gambar 3.4 Tampilan Capture Device Form Gambar 3.5 Tampilan Aplikasi Webcam Gambar 3.6 Urutan pengunaan Filter AForge.Net Gambar 3.7 Flowchart Pendeteksi Gerakan Gambar 3.8 Tampilan Menu Motion Gambar 3.9 Flowchart Motion Detection Gambar 3.10 Hasil pendeteksi gerakan Gambar 3.11 Flowchart Penghitung Pixel Putih Gambar 3.12 Hasil dari motion to white pixel detection Gambar 3.13 Flowchart motion to white pixel Gambar 3.14 Flowchart Vertex.. 32 Gambar 3.15 Tampilan aplikasi penghitung pixel putih Gambar 3.16 Flowchart gerakan penganti mouse Gambar 3.17 Proses Buffer pada efek air Gambar 3.18 Interpretasi efek air pada gambar 2 dimensi. 36 xii

7 Gambar 3.19 Gambar terjadinya put drop Gambar 3.20 Gambar pixel efek gelombang air Gambar 3.21 Flowchart Proses Efek Air Gambar 4.1 Pendeteksi gerakan pada webcam Gambar 4.2 Perbandingan letak gerakan terhadap titik pada layar yang diinginkan Gambar 4.3 Efek Air pada aplikasi Pembentuk Efek Air. 46 xiii

8 DAFTAR LAMPIRAN LAMPIRAN A LIST PROGRAM AFORGE.NET... A - 1 LAMPIRAN B LIST PROGRAM MOTION DETECTION WITH WATER EFFECT... B - 1 xiv