Pengenalan Gerakan Tangan Manusia Untuk Interaksi Manusia-Komputer

PENGENALAN GERAKAN TANGAN MANUSIA
UNTUK INTERAKSI MANUSIA-KOMPUTER

SKRIPSI

TENGKU CHAIRUNNISA
111402049

PROGRAM STUDI TEKNOLOGI INFORMASI
FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI
UNIVERSITAS SUMATERA UTARA
MEDAN
2015

PENGENALAN GERAKAN TANGAN MANUSIA
UNTUK INTERAKSI MANUSIA-KOMPUTER
SKRIPSI
Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh ijazah
Sarjana Teknologi Informasi

TENGKU CHAIRUNNISA

111402049

PROGRAM STUDI S1 TEKNOLOGI INFORMASI
FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI
UNIVERSITAS SUMATERA UTARA
MEDAN
2015

PERSETUJUAN

Judul

: PENGENALAN GERAKAN TANGAN MANUSIA
UNTUK INTERAKSI MANUSIA-KOMPUTER

Kategori

: SKRIPSI

Nama


: TENGKU CHAIRUNNISA

Nomor Induk Mahasiswa

: 111402049

Program Studi

: S1 TEKNOLOGI INFORMASI

Fakultas

: ILMU KOMPUTER DAN TEKNOLOGI
INFORMASI UNIVERSITAS SUMATERA UTARA

Komisi Pembimbing

:


Pembimbing 2

Pembimbing 1

Dani Gunawan, ST., M.T.

Romi Fadillah Rahmat, B.Comp.Sc., M. Sc.

NIP. 19820915 201212 1 002

NIP. 19860303 201012 1 004

Diketahui/ disetujui oleh
Program Studi S1 Teknologi Informasi
Ketua,

Muhammad Anggia Muchtar, ST., MM.IT
NIP. 19800110 200801 1 010

PERNYATAAN


PENGENALAN GERAKAN TANGAN MANUSIA
UNTUK INTERAKSI MANUSIA-KOMPUTER
SKRIPSI

Saya mengakui bahwa skripsi ini adalah hasil karya saya sendiri, kecuali beberapa
kutipan dan ringkasan yang masing-masing telah disebutkan sumbernya.
Medan, 26 November 2015

Tengku Chairunnisa
111402049

UCAPAN TERIMA KASIH

Puji dan syukur penulis sampaikan ke hadirat Tuhan Yang Maha Esa yang telah
memberikan rahmat serta restu-Nya sehingga penulis dapat menyelesaikan skripsi ini
sebagai syarat untuk memperoleh gelar Sarjana Teknologi Informasi.
Pertama, penulis ingin mengucapkan terima kasih kepada Bapak Romi Fadillah
Rahmat, B.Comp.Sc. M.Sc selaku pembimbing pertama dan Bapak Dani Gunawan,
ST., M.T. selaku pembimbing kedua yang telah meluangkan waktu dan tenaganya untuk

membimbing penulis dalam penelitian serta penulisan skripsi ini. Tanpa inspirasi serta
motivasi yang diberikan dari kedua pembimbing, tentunya penulis tidak akan dapat
menyelesaikan skripsi ini. Penulis juga mengucapkan terima kasih kepada Bapak Prof.
Dr. Opim Salim Sitompul, M.Sc sebagai dosen pembanding pertama dan Ibu Dr. Erna
Budhiarti Nababan, M.IT sebagai dosen pembanding kedua yang telah memberikan
masukan serta kritik yang bermanfaat dalam penulisan skripsi ini. Ucapan terima kasih
juga ditujukan kepada Ketua dan Sekretaris Program Studi Teknologi Informasi, Dekan
dan Pembantu Dekan Fakultas Ilmu Komputer dan Teknologi Informasi, dan semua
dosen serta pegawai di lingkungan program studi Teknologi Informasi, yang telah
membantu serta membimbing penulis selama proses perkuliahan.
Penulis tentunya tidak lupa berterima kasih kepada kedua orang tua penulis,
yaitu Bapak Tengku Syaiful Masudi dan Ibu Sri Banun yang telah membesarkan penulis
dengan sabar dan penuh cinta, serta doa dari mereka yang selalu menyertai selama ini.
Terima kasih juga penulis ucapkan kepada abang penulis Tengku Ahmad Fauzan dan
adik penulis Tengku Muhammad Aulia Fitra, yang selalu memberikan dukungan
kepada penulis. Penulis juga berterima kasih kepada seluruh anggota keluarga penulis
yang namanya tidak dapat disebutkan satu persatu.
Terima kasih juga penulis ucapkan kepada teman-teman yang telah memberikan
dukungan, khususnya Safrina, Dina Fadhillah, Nurul Fatihah, Ade Irma Sonya, Atika
Chan, Nisva Elvira Lubis, Indera Surya Satria, Reza Taqyuddin, Sintong Siregar serta

seluruh teman-teman angkatan 2011 dan teman-teman mahasiswa Teknologi Informasi
lainnya. Semoga Allah SWT membalas kebaikan kalian.

ii

ABSTRAK

Gerakan tangan manusia memiliki peran yang penting dalam berinteraksi. Pengenalan
gerakan tangan manusia saat ini merupakan area aktif dalam penelitian untuk interaksi
manusia dan komputer. Pengenalan gerakan tangan manusia telah diteliti sebelumnya
dengan berbagai teknik dan alat pendukung yang berbeda, seperti Kinect dan data glove.
Adapun berbagai tantangan yang dihadapi dalam mengenali gerakan tangan manusia
yaitu mencakup permasalahan kondisi iluminasi yang bervariasi, rotasi tangan, latar
belakang (background), ukuran tangan, dan klasifikasi atau translasi tangan. Pada
penelitian ini, peneliti menggunakan teknik-teknik Computer Vision untuk mengenali
gerakan tangan sebagai alat interaksi manusia dan komputer untuk mengendalikan
berbagai aplikasi, yaitu aplikasi pengolah presentasi, pemutar musik, pemutar video dan
PDF reader dengan kondisi tangan kosong dan latar belakang yang kompleks melalui
kamera web. Untuk menangani permasalahan kondisi tangan dan latar belakang
tersebut juga dibutuhkan suatu metode tertentu. Metode yang diajukan oleh peneliti

adalah penggunaan ruang warna campuran, yaitu HS-CbCr untuk pendeteksian warna
kulit dan teknik average background untuk menangani masalah background. Hasil
pengujian menunjukkan bahwa metode yang diajukan mampu mengenali gerakan
tangan manusia dan menghasilkan tingkat akurasi mencapai 96.87% dalam kondisi
pencahayaan yang baik. Keakuratan pengenalan gerakan tangan manusia dipengaruhi
kondisi pencahayaan, semakin sedikit perubahan iluminasi yang terjadi, semakin tinggi
tingkat akurasi yang dihasilkan.

Kata kunci : pengenalan gerakan tangan, interaksi manusia-komputer, pendeteksian
warna kulit, average background, convexity defects

iii

HAND GESTURE RECOGNITION FOR
HUMAN-COMPUTER INTERACTION
ABSTRACT

Hand gesture has a significant role in human’s interaction. Hand gesture recognition
nowadays is an active research area for human-computer interaction. In previous
research for hand gesture recognition, they used various techniques and tools such as

Kinect and data glove. Hand gesture recognition systems confronts many challenges,
such as variation of illumination conditions, rotation problem, background problem,
scale problem, and classification or translation problem. In this research, we use
computer vision techniques to recognize hand gesture for human-computer interaction
in controlling various apps, such as slideshow presentation, music player, video player,
and PDF reader app with bare hand and in complex background via web camera.
Therefore, a method is required to cope with background and skin detection problem.
In our proposed method, we combine two color spaces become HS-CbCr for skin
detection and use averaging background for solving the background problem. The result
shows that the proposed method is able to recognize hand gesture and get up to 96.87%
correct results on good lighting condition. The accuracy of hand gesture recognition is
influenced by lighting condition. The lower changing illumination on video occurs, the
higher accuracy of hand gesture recognition is generated.

Keywords : hand gesture recognition, human-computer interaction, skin detection,
average background, convexity defects

iv

DAFTAR ISI


Hal
ABSTRAK

ii

ABSTRACT

iii

DAFTAR ISI

iv

DAFTAR TABEL

vii

DAFTAR GAMBAR


viii

BAB 1 PENDAHULUAN

1

1.1 Latar Belakang

1

1.2 Rumusan Masalah

3

1.3 Tujuan Penelitian

3

1.4 Batasan Masalah


3

1.5 Manfaat Penelitian

4

1.6 Metodologi Penelitian

4

1.7 Sistematika Penulisan

5

BAB 2 LANDASAN TEORI

7

2.1 Computer Vision

7

2.2 Pengolah Citra Digital

7

2.2.1 Resizing

7

2.2.2 Color Space Conversion

8

2.2.2.1 RGB to Grayscale Conversion

8

2.2.2.2 Normalized RGB

8

2.2.2.3 RGB to HSV Conversion

9

2.2.2.4 RGB to YcbCr Conversion
2.2.3 Perbaikan Citra (Image Enhancement)
2.2.3.1 Erosion

10
11
11

v

2.2.3.2 Dilation

13

2.2.3.3 Gaussian Blur

14

2.2.4 Thresholding

14

2.2.5 Inversi

18

2.3 Averaging Background

18

2.3.1 Background Subtraction

19

2.3.2 Frame Differencing

20

2.4 Ekstraksi Fitur

21

2.4.1 Contour

21

2.4.2 Convex-Hull

21

2.4.3 Convexity Defects

22

2.4.4 Moment

23

2.4.5 Center of Gravity

23

2.5 OpenCV

24

2.6 Penelitian Terdahulu

25

BAB 3 ANALISIS DAN PERANCANGAN SISTEM

28

3.1 Data yang Digunakan

28

3.2 Analisis Sistem

29

3.2.1 Skin Detection

30

3.2.1.1 Resizing

31

3.2.1.2 Normalisasi RGB

31

3.2.1.3 RGB to HSV Conversion

32

3.2.1.4 RGB to YCbCr Conversion

32

3.2.1.5 Skin Color Bounding Rules

33

3.2.1.6 Skin Segmentation

33

3.2.2 Average Background

34

3.2.2.1 RGB to Grayscale Conversion

34

3.2.2.2 Frame Differencing

36

3.2.2.3 Akumulasi Background

38

3.2.2.4 Thresholding

39

3.2.2.5 Pembentukan Citra Negatif (Inversion)

40

vi

3.2.3 Perbaikan Citra (Image Enhancement)

41

3.2.3.1 Erosion

41

3.2.3.2 Dilation

42

3.2.3.3 Gaussian Blur

43

3.2.4 Ekstraksi Fitur

44

3.2.4.1 Contour

44

3.2.4.2 Convex-Hull

45

3.2.4.3 Convexity Defects

47

3.2.5 Klasifikasi
3.3 Perancangan Sistem
3.3.1 Perancangan Antarmuka

48
52
52

3.3.1.1 Rancangan Tampilan Halaman Splash

52

3.3.1.2 Rancangan Tampilan Halaman Menu

53

3.3.1.3 Rancangan Tampilan Halaman Utama

54

3.3.1.4 Rancangan Tampilan Halaman Minimized

55

BAB 4 IMPLEMENTASI DAN PENGUJIAN
4.1 Implementasi Sistem
4.1.1 Spesifikasi perangkat keras dan perangkat lunak yang

57
57
57

digunakan
4.1.2 Implementasi perancangan antarmuka
4.2 Prosedur Operasional

58
62

4.2.1 Pengendalian Aplikasi Pengolah Presentasi

63

4.2.2 Pengendalian Aplikasi PDF Reader

64

4.2.3 Pengendalian Aplikasi Pemutar Musik

65

4.2.4 Pengendalian Aplikasi Pemutar Video

66

4.3 Pengujian Sistem

59

4.2.1 Pengujian Hasil Pendeteksian Warna Kulit

59

4.2.2 Pengujian Hasil Ekstraksi Fitur

68

4.2.3 Pengujian Hasil Pengenalan Gerakan Tangan

72

vii

BAB 5 KESIMPULAN DAN SARAN

97

5.1 Kesimpulan

97

5.2 Saran

98

DAFTAR PUSTAKA

99

viii

DAFTAR TABEL

Hal.
Tabel 2.1.

Penelitian terdahulu

26

Tabel 3.1.

Matriks citra warna (RGB) ukuran 5x5 piksel

34

Tabel 3.2.

Hasil konversi citra warna menjadi citra keabuan

34

Tabel 3.3.

Aturan arah & rata-rata derajat

50

Tabel 3.4.

Gerakan tangan dan perintah aplikasi

50

Tabel 4.1.

Fungsi keyboard dan gerakan tangan pada aplikasi pengolah
presentasi

64

Tabel 4.2.

Fungsi keyboard dan gerakan tangan pada aplikasi PDF reader

65

Tabel 4.3.

Fungsi keyboard dan gerakan tangan pada aplikasi pemutar musik

65

Tabel 4.4.

Fungsi keyboard dan gerakan tangan pada aplikasi pemutar video

67

Tabel 4.5.

Ukuran kinerja hasil pengujian

68

Tabel 4.6.

Persentase hasil pengujian pendeteksian warna kulit menggunakan
HGR dataset kondisi I

68

Tabel 4.7.

Persentase hasil pengujian pendeteksian warna kulit menggunakan
HGR dataset kondisi II

69

Tabel 4.8.

Persentase hasil pengujian pendeteksian warna kulit menggunakan
HGR dataset kondisi III

70

Tabel 4.9.

Rata-rata akurasi hasil pengujian

72

Tabel 4.10. Hasil pengujian waktu pendeteksian convexity defects

76

Tabel 4.11. Hasil pengujian untuk ruangan A

89

Tabel 4.12. Hasil pengujian untuk ruangan B

95

ix

DAFTAR GAMBAR

Hal.
Gambar 2.1. Erosion : mengambil nilai minimum daerah kernel B (Bradski &
Kaehler, 2008)

12

Gambar 2.2. Dilation : mengambil nilai maximum daerah kernel B (Bradski &
Kaehler, 2008)

13

Gambar 2.3. Threshold Binary (diambil dari www.docs.opencv.org)

15

Gambar 2.4. Threshold Inverted (diambil dari www.docs.opencv.org)

16

Gambar 2.5. Threshold Truncate (diambil dari www.docs.opencv.org)

17

Gambar 2.6. Threshold to Zero (diambil dari www.docs.opencv.org)

17

Gambar 2.7. Threshold to Zero Inverted (diambil dari www.docs.opencv.org)

18

Gambar 2.8. Contour (Dhawan & Honrao, 2013)

21

Gambar 2.9. Convex-Hull (Dhawan & Honrao, 2013)

22

Gambar 2.10.Convexity Defects (Dhawan & Honrao, 2013)

22

Gambar 3.1. Arsitektur umum

30

Gambar 3.2. Konversi ruang warna RGB-HSV

32

Gambar 3.3. Konversi ruang warna RGB-YCbCr

33

Gambar 3.4. Skin segmentation

34

Gambar 3.5. Proses konversi citra hasil segmentasi kulit menjadi citra keabuan
(grayscale)

36

Gambar 3.6. Proses frame differencing

38

Gambar 3.7. Hasil akumulasi background

39

Gambar 3.8. Proses thresholding

40

Gambar 3.9. Inversion

41

Gambar 3.10.Erosion

42

Gambar 3.11.Dilaton

43

Gambar 3.12.Gaussian blur

44

Gambar 3.13.Contour

45

x

Gambar 3.14.Convex-hull

47

Gambar 3.15.Convexity defects

48

Gambar 3.16.Proses pendefinisian arah tangan

50

Gambar 3.17.Rancangan halaman splash

52

Gambar 3.18.Rancangan halaman menu

53

Gambar 3.19.Rancangan halaman utama

54

Gambar 3.20.Rancangan halaman minimized

56

Gambar 4.1. Tampilan halaman splash

58

Gambar 4.2. Tampilan halaman menu

59

Gambar 4.3. Tampilan halaman utama

59

Gambar 4.4. Tampilan opsi HSV

60

Gambar 4.5. Tampilan opsi thresholding

60

Gambar 4.6. Tampilan opsi dilation

61

Gambar 4.7. Tampilan opsi convex-hull

61

Gambar 4.8. Tampilan halaman minimized

62

Gambar 4.9. Tampilan saat tombol “Slideshow Presentation Controller” dipilih

63

Gambar 4.10. Tampilan saat tombol “PDF Reader Controller” dipilih

64

Gambar 4.11. Tampilan saat tombol “Video Player Controller” dipilih

66

Gambar 4.12. Hasil pengujian pendeteksian warna kulit menggunakan HGR
dataset kondisi I

69

Gambar 4.13. Hasil pengujian pendeteksian warna kulit menggunakan HGR
dataset kondisi II

70

Gambar 4.14. Hasil pengujian pendeteksian warna kulit menggunakan HGR
dataset kondisi III

71

Gambar 4.15. Perbandingan hasil pendeteksian warna kulit dengan kondisi
pencahayaan backlight dan downlight

73

Gambar 4.16. Pengaruh setiap tahapan dalam proses ekstraksi fitur

74

Gambar 4.17. Kesalahan pendeteksian area kontur terbesar

76

Gambar 4.18. Gerakan tangan dengan jumlah jari 1 dan arah tangan atas

78

Gambar 4.19. Gerakan tangan dengan jumlah jari 2 dan arah tangan atas

78

Gambar 4.20. Gerakan tangan dengan jumlah jari 3 dan arah tangan atas

79

xi

Gambar 4.21. Gerakan tangan dengan jumlah jari 4 dan arah tangan atas

80

Gambar 4.22. Gerakan tangan dengan jumlah jari 5 dan arah tangan atas

80

Gambar 4.23. Gerakan tangan dengan jumlah jari 1 dan arah tangan kanan

81

Gambar 4.24. Gerakan tangan dengan jumlah jari 2 dan arah tangan kanan

81

Gambar 4.25. Gerakan tangan dengan jumlah jari 1 dan arah tangan kiri

82

Gambar 4.26. Gerakan tangan dengan jumlah jari 2 dan arah tangan kiri

82

Gambar 4.27. Hasil pengenalan gerakan tangan untuk jumlah jari 1 dan arah
tangan atas pada ruangan A

83

Gambar 4.28. Hasil pengenalan gerakan tangan untuk jumlah jari 2 dan arah
tangan atas pada ruangan A

84

Gambar 4.29. Hasil pengenalan gerakan tangan untuk jumlah jari 3 dan arah
tangan atas pada ruangan A

84

Gambar 4.30. Hasil pengenalan gerakan tangan untuk jumlah jari 4 dan arah
tangan atas pada ruangan A

85

Gambar 4.31. Hasil pengenalan gerakan tangan untuk jumlah jari 5 dan arah
tangan atas pada ruangan A

85

Gambar 4.32. Hasil pengenalan gerakan tangan untuk jumlah jari 1 dan arah
tangan kanan pada ruangan A

86

Gambar 4.33. Hasil pengenalan gerakan tangan untuk jumlah jari 2 dan arah
tangan kanan pada ruangan A

87

Gambar 4.34. Hasil pengenalan gerakan tangan untuk jumlah jari 1 dan arah
tangan kiri pada ruangan A

87

Gambar 4.35. Hasil pengenalan gerakan tangan untuk jumlah jari 2 dan arah
tangan kiri pada ruangan A

88

Gambar 4.36. Hasil pengenalan gerakan tangan untuk jumlah jari 1 dan arah
tangan atas pada ruangan B

89

Gambar 4.37. Hasil pengenalan gerakan tangan untuk jumlah jari 2 dan arah
tangan atas pada ruangan B

90

Gambar 4.38. Hasil pengenalan gerakan tangan untuk jumlah jari 3 dan arah
tangan atas pada ruangan B

91

Gambar 4.39. Hasil pengenalan gerakan tangan untuk jumlah jari 4 dan arah
tangan atas pada ruangan B

91

Gambar 4.40. Hasil pengenalan gerakan tangan untuk jumlah jari 5 dan arah
tangan atas pada ruangan B

92

xii

Gambar 4.41. Hasil pengenalan gerakan tangan untuk jumlah jari 1 dan arah
tangan kanan pada ruangan B

93

Gambar 4.42. Hasil pengenalan gerakan tangan untuk jumlah jari 2 dan arah
tangan kanan pada ruangan B

93

Gambar 4.43. Hasil pengenalan gerakan tangan untuk jumlah jari 1 dan arah
tangan kiri pada ruangan B

94

Gambar 4.44. Hasil pengenalan gerakan tangan untuk jumlah jari 2 dan arah
tangan kiri pada ruangan B

94