PENANGKAP GERAK DUA DIMENSI UNTUK DONGENG INTERAKTIF

(1)

TWO DIMENSIONAL MOTION CAPTURE FOR INTERACTIVE STORY TELLING

---

PENANGKAP GERAK DUA

DIMENSI UNTUK DONGENG INTERAKTIF

ISPANJI PRATAMA

2207 100 003

Dosen Pembimbing

Dr. I Ketut Eddy Purnama, ST., MT.

Christyowidiasmoro, ST., MT.

Bidang Studi Teknik Komputer dan Telekmatika Jurusan Teknik Elektro Fakultas Teknologi Industri Institut Teknologi Sepuluh Nopember 2011-2012

(2)

INDEX

Pendahuluan

Dasar Teori

Perancangan dan Implementasi Pengujian

Kesimpulan

(3)

LATAR BELAKANG(1)

MOTION CAPTURE

• Perkembangan teknologi motion capture

(4)

LATAR BELAKANG(2)

DONGENG

• Media pembelajaran yang baik bagi anak-anak

• Media penyampaian pesan moral yang mendidik bagi anak-anak

• Membantu mengembangkan kreatifitas dan imajinasi anak-anak

(5)

PERMASALAHAN

•

Minat anak-anak terhadap dongeng

•

Ketertarikan anak terhadap teknologi permainan video digital

(6)

TUJUAN

Membuat media alternatif baru dalam penyampaian dongeng Menyalurkan minat anak terhadap permainan video digital

Harapan:

• Menyampaikan pesan moral kepada anak-anak

• Merangsang perkembangan kreatifitas dan imajinasi anak-anak

(7)

BATASAN MASALAH

• Kamera kedalaman (kinect) digunakan untuk menangkap gerakan pelaku

• Alur cerita dan karakter pada dongeng dibuat dalam bentuk dua dimensi

• Dalam sistem dibuat satu alur cerita dongeng sebagai contoh penggunaan aplikasi

• Alur cerita yang dibuat diperankan oleh pelaku dan direkam ke

dalam bentuk video.

(8)

INDEX

Pendahuluan Dasar Teori

Perancangan dan Implementasi Pengujian

Kesimpulan

(9)

MOTION CAPTURE

merupakan proses pengukuran posisi dan orientasi suatu obyek dalam lingkungan fisik, lalu merekam informasi tersebut ke dalam bentuk yang dapat digunakan oleh komputer *

Motion Capture

Non Optik Optik

Markered Markerless

* Scott Dyer, Jeff Martin, John Zulauf, "Motion Capture White Paper," 12 Dec 1995, on-line at http: //reality.sgi.com/employees/jam sb/mocap/MoCapWP_v2.0.html.

(10)

REALTIME MOCAP

Realtime Optical Motion Capture Menggunakan

kamera kedalaman (kinect)

1. Depth Sensors

• Pemancar Inframerah

• Kamera Inframerah

2. RGB Camera

(11)

SENSOR KEDALAMAN

Pemancar Inframerah

Kamera Inframerah

Friedman, T., “How Kinect Works“, <URL:http://www.neowin.net/news/how-kinect- works>, November 2010

Pemancar inframerah memantulkan inframerah ke obyek yang kemudian ditangkap oleh kamera inframerah.

Waktu pantulan inframerah digunakan untuk

menentukan jarak obyek

(12)

DEPTH DATA

Data yang diperoleh dari kamera inframerah digunakan untuk menentukan apakah terdapat manusia di dalam image.

(13)

PENGENALAN BAGIAN TUBUH MANUSIA

Dari data kedalaman, dibagi-bagi berdasarkan warna tertentu sesuai dengan bentuk tubuh manusia.

Didefinisikan persendian tulang manusia

berdasarkan data yang diperoleh

(14)

SKELETON DATA

Terdapat 20 data joint Dimana tiap-tiap joint memiliki kondisi sebagai berikut.

Tracked

Kondisi dimana posisi joint terdeteksi oleh kinect

Not Tracked

Kondisi dimana posisi joint tidak terdeteksi oleh kinect Inferred

Kondisi dimana posisi joint terpotong atau terhalang

(15)

AVI VIDEO

Merupakan standar microsoft Komponen AVI

• Frame Size (resolusi) menyatakan ukuran video, misalkan 320 x 240 / 640 x 480.

• Data rate besarnya data yang ditampilkan tiap detiknya

• Frame rate banyaknya gambar yang di tampilkan tiap detiknya

Untuk memproses video digunakan Avi Library pada C#

(16)

WPF

WINDOWS PRESENTATION FOUNDATION

Menggunakan

MVVM(Model View View Model) yang identik dengan MVC (Model View Controller) dimana kode untuk

program dan tampilan diletakkan secara

terpisah.

(17)

INDEX

Pendahuluan Dasar Teori

Perancangan dan Implementasi Pengujian

Kesimpulan

(18)

KONSEP SISTEM

(19)

ALUR KERJA SISTEM

Penangkapan Gerak

Perekaman Gerak

Pembuatan Video

Gerakan ditangkap dan ditampilkan dalam bentuk karakter 2D

Tampilan karakter 2D di rekam ke dalam beberapa frame

dalam format bitmap dan suara pelaku di rekam ke dalam

format wav

Di lakukan pemrosesan video dari image dan suara yang sudah direkam

(20)

(21)

PENANGKAPAN GERAK

Dari skeletal model, dapat dibentuk karakter dua dimensi yang menyerupai bentuk manusia

(22)

PROSES PEMBENTUKAN KARAKTER 2D

Meletakkan

image pada

canvas

Mendapatkan data joint yang

digunakan

Mapping image ke joint

Menarik garis penghubung atar

tiap-tiap joint

(23)

MODEL KARAKTER

1. head.png 2. leftHand.png 3. rightHand.png 4. leftFoot.png 5. rightFoot.png

Digunakan format png karena dapat dibuat dengan latar belakang transparan

Model karakter tersusun atas beberapa file png yang terpisah

(24)

MAPPING DATA JOINT

Data Joint Gambar

JointID.Head head.png

JointID.HandRight rightHand.png JointID.HandLeft leftHand.png JointID.FootRight rightFoot.png JointID.FootLeft leftFoot.png

Dilakukan proses Mapping data joint dari skeleton data ke model karakter dua dimensi yang digunakan sesuai dengan tabel diatas

(25)

PROSES MAPPING

Posisi kiri gambar

= koordinat x joint

Posisi atas gambar = koordinat y joint

CANVAS WPF Image diletakkan pada canvas

<Image Canvas.Left=“posisi x "

Canvas.Top=“posisi y“/>

(26)

Bentuk karakter yang

ditampilkan setelah proses mapping selesai

(27)

GARIS PENGHUBUNG

1

2

3

4 5

Garis pertama

Head  Shoulder Center  Spine  Hip Center Garis kedua

Shoulder Center  Shoulder Left  Elbow Left  Wrist Left  Hand Left

Garis ketiga

Shoulder Center  Shoulder Right  Elbow Right  Wrist Right  Hand Right

Garis keempat

Hip Center  Hip Left  Knee Left  Ankle Left  Foot Left

Garis kelima

Hip Center  Hip Right  Knee Right  Ankle Right  Foot Right

(28)

Garis penghubung diberi warna dengan memasukkan

parameter RGB sesuai dengan warna image pada karakter

(29)

Ditambahkan fungsi opacity untuk

menghilakngkan atau menampilkan karakter 2D ketika gerakan terdeteksi atau tidak

(30)

PEREKAMAN GERAK

Banyak tampilan yang direkam

Menentukan ukuran screen

yang akan di

capture

(940x480px)

Menentukan posisi x dan y pada

window yang akan

di capture

Capture screen

sesuai dengan posisi dan ukuran

yang telah ditentukan

Simpan gambar ke

dalam format .bmp

(31)

Proses penyimpanan menggunakan windows timer seperti dijelaskan pada gambar dibawah

(32)

PEMBUATAN VIDEO

Video dibuat dengan menentukan nilai framerate yang digunakan Berdasarkan diagram alir

Nama file image yang tersimpan memiliki index yang dinyatakan dalam integer n

Program akan terus melakukan

perulangan hingga seluruh file telah ditambahkan ke dalam video

Jumlah image yang ditambahkan tiap detiknya sesuai dengan

framerate yang ditentukan.

(33)

LINGKUNGAN VIRTUAL

720px

Scene & Storyboard

Berisi gambar dan teks yang digunakan sebagai latar belakang dalam alur cerita yang dimainkan.

Canvas Karakter

Merupakan tempat dimana karakter yang digunakan dalam alur cerita ditampilkan. Pada kanvas karakter ini terdapat dua kanvas.

Yang pertama digunakan untuk menampilkan garis penghubung karakter dan yang kedua digunakan untuk menampilkan gambar karakter sesuai dengan penjelasan pada sub bab desain

karakter.

Cover

Berisi gambar yang berfungsi untuk menutupi bagian-bagian dibelakangnya, sehingga dapat mencegah terjadinya error gambar yang tidak diinginkan.

(34)

PEMBUATAN SCENE

Scene menggunakan kumpulan image dalam suatu direktori yang telah ditentukan.

Diberikan inputan next dan previous untuk

memindahkan scene dari satu scene menuju scene lain.

(35)

SUSUNAN

LINGKUNGAN VIRTUAL

scene

karakter

cover

(36)

INDEX

Pendahuluan Dasar Teori

Perancangan dan Implementasi Pengujian

Kesimpulan

(37)

PENGUJIAN

• Pengujian Jarak

• Pengujian Pola Gerakan

• Pengujian Akurasi Joint

• Pengujian Audio & Video

• Pengujian Langsung

(38)

PENGUJIAN JARAK

menentukan jarak ideal dalam proses penangkapan gerak

Pengujian dilakukan dengan rentang jarak 0,25m dan data pengujian diambil dari jarak 1 m hingga 4 m.

Dengan tinggi ±170cm jarak optimal yang diperoleh adalah antara 2,5m hingga 3m

berdasarkan proporsi tampilan karakter

2,5m 3m

2,75m

(39)

PENGUJIAN POLA GERAKAN

Berdasarkan hasil pengujian, karakter

dapat ditampilkan dengan baik ketika tidak terdapat posisi joint yang saling

menumpuk. (1 & 2)

Namun ketika terdapat lebih dari satu joint yang saling menumpuk, maka yang

ditampilkan lebih ke depan adalah posisi gambar yang berada pada posisi lebih atas pada canvas. (3&4)

1

2

3

4

(40)

PENGUJIAN AKURASI JOINT

Kondisi joint dinyatakan ke dalam nilai dengan ketentuan sebagai berikut.

Kondisi Tracked, nilai state = 1 Kondisi Not Tracked, nilai state = 0 Kondisi Inferred, nilai state = -1

Dari data yang diperoleh, tingkat akurasi joint yang ditampilkan dihitung dengan cara sebagai berikut

(%) =

× 100%

(41)

P1 P2 P3 P4 Bentuk Gerakan Berjalan Melompat Jongkok dan

menunduk

Berdiri dan Duduk

Durasi 8 det 6 det 12 det 20 det

Jumlah Frame 251 175 365 588

Fps rata-rata 31,3 29,1 30,4 29,4

Data Joint Tingkat Akurasi (%)

HipCenter 100% 100% 100% 100%

Spine 100% 100% 100% 100%

ShoulderCenter 100% 100% 100% 100%

Head 100% 100% 99,2 % 99,7%

ShoulderLeft 82,86% 100% 94,8 % 65,3 %

ElbowLeft 79,6% 97,1 % 81,9 % 73,5 %

WristLeft 75,2% 100% 97% 76,7 %

HandLeft 64,1% 97,1% 98,9 % 63,4%

ShoulderRight 58,1% 100% 99,2 % 98 %

ElbowRight 56,5% 97,7 % 98,1 % 99,8 %

WristRight 56,1% 99,4% 99,2 % 99,8 %

HandRight 48,2% 85,1 % 99,7 % 81,8 %

HipLeft 100% 100% 100% 100%

KneeLeft 93,6% 99,4% 81,6% 99%

AnkleLeft 93,2% 96,6 % 82,5 % 66,8 %

FootLeft 92% 94,9 % 84,4 % 83,8 %

HipRight 100% 100% 100% 100%

KneeRight 94,4% 98,9 % 84,7 % 100%

AnkleRight 87,6% 99,4% 89,3 % 99,8 %

FootRight 90,8% 94,3% 87,9% 96,1%

Berdasarkan hasil

perhitungan, diperoleh tingkat akurasi 100%

untuk joint yang berada pada posisi tengah

seperti HipCenter,

Spine, Shoulder Center, HipLeft dan HipRight.

Hal ini dikarenakan posisi joint tersebut

tidak mengalami banyak gerakan atau

perubahan ketika obyek terdeteksi.

(42)

PENGUJIAN AUDIO VIDEO

No Frame Framerate Durasi video

Durasi audio Selisih

1 512 6 01:26 01:03 00:23

2 283 6 00:48 00:36 00:12

3 213 6 00:36 00.29 00:07

4 329 6 00:55 00.41 00:14

5 569 6 01:35 01:12 00:23

6 799 6 02:13 01:41 00:32

7 590 6 01:38 01:13 00:25

8 91 6 00:15 00:10 00:05

9 260 6 00:43 00:30 00:13

10 437 6 01:13 00:55 00:18

(43)

semakin pendek durasi perekaman gerak, maka semakin kecil selisih (lag) yang dihasilkan antara audio dan video yang

terekam. Semakin lama durasi perekaman gerak, maka semakin besar selisih (lag) yang dihasilkan antara audio dan video.

Hal ini dapat diakibatkan oleh proses yang mengkonsumsi

banyak memori sehingga semakin lama proses dijalankan, maka semakin banyak memori yang dibutuhkan untuk melakukan

proses perekaman.

(44)

PENGUJIAN LANGSUNG

Sasaran yang diuji adalah anak-anak dengan rentang usia 5-8 tahun.

Pengujian dilakukan untuk melihat dan menilai bagaimana performa sistem serta kesan dan respon anak-anak terhadap sistem yang telah dibuat.

Nama Umur Tinggi Badan

Peserta 1 5th 104cm

Semakin aktif pendamping berinteraksi dengan anak, maka akan semakin variatif pula gerakan-gerakan yang dihasilkan oleh anak- anak. Pada narasi satu arah, anak-anak cenderung menurut

dengan alur cerita yang dibuat dan pada narasi dua arah (yang

bersifat pertanyaan) anak-anak ikut aktif dalam menanggapi

pertanyaan dan interaksi dari pendamping.

(45)

(46)

INDEX

Pendahuluan Dasar Teori

Perancangan dan Implementasi Pengujian

Kesimpulan

(47)

KESIMPULAN

• Karakter dua dimensi dapat ditampilkan dengan baik memenuhi kondisi berikut

• Berada pada jarak optimal

• Tidak terdapat posisi joint yang saling menumpuk

• Untuk hasil keluaran video yang maksimal dapat

digunakan framerate yang dapat menyesuaikan antara banyaknya frame yang disimpan dengan durasi

perekaman

• Sistem yang dibuat dapat diaplikasikan dalam

penyampaian dongeng maupun pembuatan animasi 2D

sederhana

(48)

SARAN

Dapat dikembangkan beberapa alur cerita tambahan dan karakter tambahan sebagai variasi dari dongeng yang disampaikan.

Dengan melibatkan desainer animasi, hasil yang didapatkan

diharapkan menjadi lebih maksimal.

(49)