IMPLEMENTATION OF 2D AUGMENTED REALITY IN MOBILE APPLICATION TO TEACH CHILDREN DRAWING AND COLORING

Transcription

1 IMPLEMENTATION OF 2D AUGMENTED REALITY IN MOBILE APPLICATION TO TEACH CHILDREN DRAWING AND COLORING TEO GUAN TING UNIVERSITI TEKNIKAL MALAYSIA MELAKA

2 BORANG PENGESAHAN STATUS TESIS JUDUL: IMPLEMENTATION OF 2D AUGMENTED REALITY IN MOBILE APPLICATION TO TEACH CHILDREN DRAWING AND COLORING SESI PENGAJIAN: 2014 SAYA TEO GUAN TING (HURUF BESAR) Mengakui membernarkan tesis (PSM/Sarjana/Doktor Falsafah) ini disimpan di Perpustakaan Fakulti Teknologi Maklumat dan Komunikasi dengan syarat-syarat kegunaan seperti berikut: 1. Tesis dan projek adalah hakmilik Universiti Teknikal Malaysia Melaka. 2. Perpustakaan Fakulti Teknologi Maklumat dan Komunikasi dibenarkan membuat salinan untuk tujuan pengajian sahaja. 3. Perpustakaan Fakulti Teknologi Maklumat dan Komunikasi dibenarkan membuat salinan tesis ini sebagai bahan pertukaran antara institusi perngajian tinggi. 4. ** Sila tandakan(/) SULIT (Mengandungi maklumat yang berdarjah keselamatan atau kepentingan Malaysia seperti yang termaktub di dalam AKTA RAHSIA RASMI 1972) TERHAD (Mengandungi maklumat TERHAD yang telah diaturkan oleh organisasi/badan di mana penyelidikan dijalankan) TIDAK TERHAD (TANDATANGAN PENULIS) Alamat tetap: 112, Kampung Parit Besar, _ Jalan Kluang, Batu Pahat, Johor Tarikh: (TANDATANGAN PENYELIA) Pn. Norazlin Binti Mohammed Tarikh: CATATAN: * Tesis dimaksudkan sebagai Laporan Akhir Projeck Sarjana Muda (PSM) ** Jika tesis ini SULIT atau TERHAD, sila lampirkan surat daripada pihak berkuasa

3 IMPLEMENTATION OF 2D AUGMENTED REALITY IN MOBILE APPLICATION TO TEACH CHILDREN DRAWING AND COLORING TEO GUAN TING This report is submitted in partial fulfillment of the requirements for the Bachelor of Computer Science (Interactive Media) FACULTY OF INFORMATION AND COMMUNICATION TECHNOLOGY UNIVERSITI TEKNIKAL MALAYSIA MELAKA 2014

4 DECLARATION I hereby declare that this project report entitled IMPLEMENTATION OF 2D AUGMENTED REALITY IN MOBILE APPLICATION TO TEACH CHILDREN DRAWING AND COLORING is written by me and is my own effort and that no part has been plagiarized without citations. STUDENT : Date: (TEO GUAN TING) SUPERVISOR : Date: (PN NORAZLIN BINTI MOHAMMED)

5 DEDICATION To my beloved parents, thanks for their support throughout my study. To my supervisor, Pn. Norazlin Binti Mohammed, thanks for the guidance and concerns along the project timeline. To my evaluator, En. Mohd Adili Bin Norasikin, thanks for giving the advice and suggestion regarding the project. To my friends who had help me throughout the project timeline.

6 ACKNOWLEDGEMENTS First of all, I feel very happy I had finished my Final Year Project. I am very pleasure that many people had helped me throughout the project life cycle. I am really appreciating their help. So with this opportunity, I would like to say thank you to people who giving me support until my project completion. First, I would like to thank to my beloved parents who had giving me support and motivation throughout my project. With their support, I can work with the project without any worries. Then, I would also like to thank my supervisor, Pn. Norazlin Binti Mohammed for guiding me and correcting my mistake so I could complete the project successfully. Thanks to her patience and concerns when my progression is not satisfied. Next, I would like to thank to my friends who help me with the project. With their comments and suggestions, I could get some ideas to improve my project. Lastly, I would also like to thank to my sister who lend me her mobile phone for the project implementation.

7 ABSTRACT A coloring book is a book that contains coloring pages. Children can color the pictures inside the coloring pages using whatever colors they liked. Some people claim that this can help to train the children s creativity. However, this may not help if they used the wrong color on wrong object. This is because colors play a very important role in the development of character and intelligence of children. Children are encouraged to learn variety of colors and the corrective ways to use them. Besides that, some weaknesses of the traditional coloring book had reduced children interest in coloring book. Children will also get bored when no guidance from adults. In order to solve the problems, an augmented reality mobile application is developed to teach children to draw and color. Augmented reality is a technology used to deliver the information to the real world environment via the mobile phone s screen. By using this technology, children can scan the marker inside the coloring book with the phone camera. Then, the instruction to draw and color will be shown on the phone screen. By using the augmented reality mobile application, children can draw and color without the guidance from adults. In addition, they will follow the instruction to use the correct colors when they color the pictures. Furthermore, this will also create an interesting experience to the children.

8 ABSTRAK Sebuah buku mewarna adalah buku yang mengandungi muka surat untuk diwarnakan. Kanak-kanak boleh mewarna gambar-gambar di dalam halaman buku mewarna dengan menggunakan apa sahaja warna yang mereka suka. Sesetengah orang mendakwa bahawa ini boleh membantu untuk melatih kreativiti kanak-kanak. Walaubagaimanapun, hal ini tidak boleh membantu jika mereka menggunakan warna yang salah pada objek yang salah. Ini kerana warna memainkan peranan yang amat penting dalam pembangunan watak dan kecerdasan kanak-kanak. Kanak-kanak digalakkan untuk belajar pelbagai warna dan cara yang betul untuk menggunakannya. Selain itu, beberapa kelemahan buku mewarna tradisional telah mengurangkan minat kanak-kanak terhadap buku mewarna. Kanak-kanak juga akan bosan apabila tiada panduan daripada orang dewasa. Dalam usaha untuk menyelesaikan masalah ini, satu aplikasi mudah alih yang menggunakan konsep Augmented Reality dibangunkan untuk mengajar kanak-kanak melukis dan mewarna. Augmented Reality adalah teknologi yang digunakan untuk menyampaikan maklumat kepada persekitaran dunia sebenar melalui skrin telefon bimbit. Dengan menggunakan teknologi ini, kanakkanak boleh mengimbas penanda dalam buku mewarna dengan kamera telefon. Kemudian, arahan untuk melukis dan mewarna akan dipaparkan pada skrin telefon. Dengan menggunakan aplikasi mudah alih Augmented Reality, kanak-kanak boleh melukis dan mewarna tanpa bimbingan daripada orang dewasa. Selain itu, mereka akan mengikut arahan supaya menggunakan warna yang betul apabila mereka mewarna. Tambahan pula, ini juga akan mewujudkan satu pengalaman yang menarik untuk kanak-kanak. TABLE OF CONTENTS

9 CHAPTER SUBJECT PAGE DECLARATION DEDICATION ACKNOWLEDGEMENTS ABSTRACT ABSTRAK TABLE OF CONTENTS LIST OF TABLES LIST OF FIGURES LIST OF ABBREVIATIONS LIST OF APPENDIXES ii iii iv v vi vii xiii xiiv xvi xvii CHAPTER I INTRODUCTION 1.1 Background Problem Statements Weakness of traditional 2 coloring book Children do not know the 3 correct use of colors Lack of interest with normal 3 coloring book 1.3 Objectives 3

10 1.4 Scope Target User System Project Significance Expected Output Conclusion 6 CHAPTER II LITERATURE REVIEW AND PROJECT METHODOLOGY 2.1 Introduction Facts and Findings Augmented Reality (AR) AR in Computer VS AR in 9 Mobile Device Augmented Reality 11 Applications Augmented Reality 13 in Education Learning Approach 14 through Augmented Reality 2.4 Colors Colors and Children Existing System ABCya Paint Color & Draw for kids colar Mix Comparison of 21 Existing Systems 2.6 Project Methodology 22

11 2.6.1 Iterative Model Requirements 23 Phase Design Implementation 24 and Test Review ADDIE Model Analysis Phase Design Phase Deployment Phase Implementation 27 Phase Evaluation Phase Project Requirements Software Requirements Technical Requirement Development 31 Requirement Documentation 33 Requirement Hardware Requirements Android 34 Smartphone Laptop Printer Other Requirements Project Schedule and Milestones Milestones and Dates 35

12 2.8.2 Gantt chart Conclusion 37 CHAPTER III ANALYSIS 3.1 Introduction Current Scenario Analysis ABCya Paint Color & Draw for kids colar Mix Requirement Analysis Project Analysis Mobile Application Conclusion 48 CHAPTER IV DESIGN 4.1 Introduction System Architecture Preliminary Design Storyboard User Interface Design Navigation Design Input and Output Design Metaphors Icon Design Conclusion 65 CHAPTER V IMPLEMENTATION 5.1 Introduction Media Creation 67

13 5.2.1 Production of Text Production of Graphic Production of Video Media Integration Product Configuration 74 Management Configuration 75 Management Setup Version Control 77 Procedure 5.5 Implementation Status Conclusion 81 CHAPTER VI TESTING 6.1 Introduction Test Plan Test Organization Test Environment Test Schedule Test Strategy Test Design Test Description Test Data Test Data of Alpha 90 Testing Test Data of Beta 92 Testing 6.5 Test Result and Analysis Test Results 94

14 Alpha Testing Beta Testing Test Analysis Alpha Testing Summary of Alpha 102 Testing Beta Testing Summary of Alpha 108 Testing 6.6 Conclusion 108 CHAPTER VII PROJECT CONCLUSION 7.1 Observation on Weakness and 109 Strengths Strengths Weakness Propositions for Improvement Contribution Conclusion 111 REFERENCES 112 LIST OF TABLES

15 TABLE TITLE PAGE 2.1 Comparisons of Existing Systems Milestones and Dates Use of Fonts Version Control Implementation Status Test Organization Test Environment Test Schedule Scales for Testing Test Description for Functional Testing of Alpha Testing Test Description for Integration Testing of Alpha Testing Test Description for Beta Testing Test Data for Functional Testing Test Data for Integration Testing Test Data for Beta Testing Test Result for Functional Testing Test Result for Integration Testing Test Result for Beta Testing 96 LIST OF FIGURES

16 DIAGRAM TITLE PAGE 2.1 Illustration of AR technologies in military Color recognition worksheets to teach children basic 17 colors 2.3 Screen shot of ABCya Paint Picture templates D image become 3D object with colar Mix Iterative Model ADDIE Model Android architecture layers Metaio SDK architecture ABCya Paint s flow chart Flow chart for Color & Draw for kids colar Mix flow chart Project architecture Main page of storyboard Tutorial page of storyboard Menu page of storyboard Button page of storyboard Overall flow of the project Main interface Second interface Third interface Forth interface Fifth interface Sixth interface 59

17 4.13 Navigation design Buttons and links Input & output of the project Color scale for this project Pencil & color pencil metaphors Icon design template with different sizes Application Icon Sketch Block Bold for Happy ColAR Process of icon creation Steps to use marker Production of project video Flow of configuration management setup Layout When Conduct Testing Visual Clarity of Functional Testing Navigation and Interactivity of Functional Testing Functionality and Content of Functional Testing Integration Testing Visual Clarity of Beta Testing Navigation and Interactivity of Beta Testing Functionality and Content of Beta Testing Pre-Test of Effectiveness of Beta Testing Post-Test of Effectiveness of Beta Testing 107 LIST OF ABBREVIATIONS

18 2D - Two Dimension 3D - Three Dimension ADT - Android Developer Tools API - Application Programming Interface Apps - Application AR - Augmented Reality AREL - Augmented Reality Experience Language GPS - Global Positioning System HMD - Head-Mounted Display IDE - Integrated Development Environment MEMS - Micro-electro-mechanical systems MPEG - Moving Picture Experts Group RAM - Random-Access Memory SDK - Software Development Kit USB - Universal Serial Bus LIST OF APPENDIXES

19 APPENDIX TITLE PAGE APPENDIXA Project Gantt chart 115 APPENDIXB Observation Script 117

20 CHAPTER I INTRODUCTION 1.1 Background Nowadays, children are not very keen to color the normal or simple coloring book that present in the current market. They will easily get bored when no guidance from adults. Besides that, children do not know how to color the picture. Children ages from 6 to 8 are still lack of knowledge on how to use the color corresponding to the color of the objects in real life. Instead, they are likely to color the picture according to their favorite colors. It is proven that learning about shapes and colors are very good at children s mental and intelligent development. So, it is better to teach children how to color and not just giving them a color book which let them color themselves. When children first time get the color book, they will feel very excited because they will treat the color book as a present from their parents. However, after they color the first or second page, they will slowly get boring until they are not interested with the coloring book anymore. Children do not have the perseverance to totally focus on one task unless they are really interested in it. In this era of information and technology, children are always exposed to those electronic technologies devices. Due to this fact, an idea of combining the

21 traditional coloring book and the electronic device was pop out. Since children nowadays are familiar with those technologies, this project aims to get the children s attraction to involve themselves in drawing and coloring by using the mobile application with the assistant of 2D Augmented Reality concept. That is, a color book with the markers by which children can scan with mobile devices and the content is to teach them how to draw and color using the multimedia elements such as animation and pictures. 1.2 Problem Statements This section defined the problem statements of the project Weakness of traditional coloring book One of the problems is that the current coloring books in the market do have their weakness. The coloring books do not contain any special elements to attract the children. Nowadays, the things that accompany children all the time are those electronic devices such as tablet or smartphone. Children are attracted by the engagement of using the mobile application. They are more willing to spend more time playing with their games or applications rather than color the coloring book. In addition, there is no instruction or defined task in the coloring books. When there is no guideline and the adults are not around, the children will do their own thing instead of color the coloring book. This is because they do not know what they are supposed to do. They will also become hesitate in their actions. Therefore, they will give up to the coloring task Children do not know the correct use of colors

22 Another problem is that children don t know how to choose the right color to color the object in the coloring book. Most of the coloring book contains a drawing object with blank color. Children are required to color on those objects. However, they often color the drawings with their favorite colors or they just simply color it. The worst case is that they just drawing some graffiti on the coloring book. This will not help the children to learn to color. Of course it is not wrong to color the drawing based on children s creativity, nevertheless, it is very encourage that children knowing the basis color of the object in real life and the reason why they use those colors before the children could add on their own creativity Lack of interest with normal coloring book The third problem is that some children are lack of interest with the normal coloring book. This is because there is no special element in the normal coloring book which can get the children s attention. Although the children will work with the coloring book at first, however, their attention will easily get distract by other things around them. In addition, when there is no specific goal or no adults guidance, children will color the coloring book for just a moment. 1.3 Objectives i) To develop a smartphone application with augmented reality concept ii) To produce an interesting drawing and coloring book with the assistant of augmented reality concept to teach children on how to draw and color

23 iii) To evaluate the efficiency of the implementation of augmented reality into the coloring book compare to normal coloring book 1.4 Scope This section defines the scope that involves in this project followed by the reasons for the involvement of the scope Target User This project is going to be used by children age 6 to 8 years old. The reason is that children below 6 years old are unable to color according to the instructions. They are more likely to color the picture with whatever colors they like. Another reason is that children below 6 years old are unable to use the application develop through this project. However, the reason to set the age range until 8 years old is because the contents develop through this project are simple, there could have higher level of contents for children above the age range System This is project is focuses on mobile device only. The platform used for the development is android platform with these minimum features: android 2.3 (Gingerbread), ARMv7 (Cortex) processor and a phone camera. The testing will be conduct using the actual mobile phone to observe the actual resolution of the video and image being augmented. The capability of the phone camera to capture the markers is also be will concerned.

24 1.5 Project Significance The research has conducted by using observation technique to observe the children s behavior when they color the coloring books. Children are required to color the coloring books by themselves. There is no adult s guidance during the observation period. Firstly, those children will start coloring the pictures. However, after a while, they will start looking at others coloring. They are trying to figure out how to color the pictures. After a few moments, they gave up. They felt boring when they do not know how to color the pictures. These findings have come to the idea to produce a mobile application using augmented reality concept to encourage drawing and coloring for children age 6 to 8 years old. Children are able to enjoy the new learning experience provides by the AR application. Furthermore, they will not hesitate to color the drawings because the instructions are provided. In the early exposure to drawings and colors, children will become more creative because the ideas from drawings and colors could enhance their imagination [1]. By following the instruction provided, children are able to finish their coloring task easily. Lastly, the most significant contribution of this project is the new learning experience provides by the AR application which children are seldom get contact with. 1.6 Expected Output