Implementation of 2D augmented reality in mobile application to teach children drawing and coloring.
IMPLEMENTATION OF 2D AUGMENTED REALITY IN MOBILE APPLICATION TO TEACH CHILDREN DRAWING AND COLORING
TEO GUAN TING
(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) (TANDATANGAN PENYELIA)
Alamat tetap: 112, Kampung Parit Besar, Pn. Norazlin Binti Mohammed _
Jalan Kluang,
83000 Batu Pahat, Johor
Tarikh:____________________________ Tarikh:_________________________
CATATAN: * Tesis dimaksudkan sebagai Laporan Akhir Projeck Sarjana Muda (PSM)
(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
(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:
(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.
(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, kanak-kanak 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.
(9)
CHAPTER SUBJECT PAGE
DECLARATION ii
DEDICATION iii
ACKNOWLEDGEMENTS iv
ABSTRACT v
ABSTRAK vi
TABLE OF CONTENTS vii
LIST OF TABLES xiii
LIST OF FIGURES xiiv
LIST OF ABBREVIATIONS xvi
LIST OF APPENDIXES xvii
CHAPTER I INTRODUCTION
1.1 Background 1
1.2 Problem Statements 2
1.2.1 Weakness of traditional 2 coloring book 1.2.2 Children do not know the 3 correct use of colors 1.2.3 Lack of interest with “normal” 3 coloring book
(10)
1.4 Scope 4
1.4.1 Target User 4
1.4.2 System 4
1.5 Project Significance 5
1.6 Expected Output 6
1.7 Conclusion 6
CHAPTER II LITERATURE REVIEW AND PROJECT
METHODOLOGY
2.1 Introduction 7
2.2 Facts and Findings 8
2.3 Augmented Reality (AR) 9 2.3.1 AR in Computer VS AR in 9
Mobile Device
2.3.2 Augmented Reality 11
Applications
2.3.3 Augmented Reality 13
in Education
2.3.3.1 Learning Approach 14 through Augmented
Reality
2.4 Colors 15
2.4.1 Colors and Children 16
2.5 Existing System 17
2.5.1 ABCya Paint 17
2.5.2 Color & Draw for kids 19
2.5.3 colAR Mix 20
2.5.4 Comparison of 21
Existing Systems
(11)
2.6.1 Iterative Model 23 2.6.1.1 Requirements 23
Phase
2.6.1.2 Design 24
2.6.1.3 Implementation 24
and Test
2.6.1.4 Review 25
2.6.2 ADDIE Model 25
2.6.2.1 Analysis Phase 26 2.6.2.2 Design Phase 26 2.6.2.3 Deployment Phase 27 2.6.2.4 Implementation 27
Phase
2.6.2.5 Evaluation Phase 27 2.7 Project Requirements 28 2.7.1 Software Requirements 28 2.7.1.1 Technical Requirement 28 2.7.1.2 Development 31
Requirement 2.7.1.3 Documentation 33
Requirement 2.7.2 Hardware Requirements 34
2.7.2.1 Android 34
Smartphone
2.7.2.2 Laptop 34
2.7.2.3 Printer 34
2.7.3 Other Requirements 35 2.8 Project Schedule and Milestones 35 2.8.1 Milestones and Dates 35
(12)
2.8.2 Gantt chart 37
2.9 Conclusion 37
CHAPTER III ANALYSIS
3.1 Introduction 39
3.2 Current Scenario Analysis 40
3.2.1 ABCya Paint 40
3.2.2 Color & Draw for kids 42
3.2.3 colAR Mix 44
3.3 Requirement Analysis 46 3.3.1 Project Analysis 46 3.3.1.1 Mobile Application 46
3.4 Conclusion 48
CHAPTER IV DESIGN
4.1 Introduction 50
4.2 System Architecture 51
4.3 Preliminary Design 51
4.3.1 Storyboard 52
4.4 User Interface Design 56 4.4.1 Navigation Design 59 4.4.2 Input and Output Design 61
4.4.3 Metaphors 62
4.4.4 Icon Design 63
4.5 Conclusion 65
CHAPTER V IMPLEMENTATION
5.1 Introduction 66
(13)
5.2.1 Production of Text 67 5.2.2 Production of Graphic 68 5.2.3 Production of Video 72
5.3 Media Integration 73
5.4 Product Configuration 74
Management
5.4.1 Configuration 75 Management Setup 5.4.2 Version Control 77
Procedure
5.5 Implementation Status 80
5.6 Conclusion 81
CHAPTER VI TESTING
6.1 Introduction 82
6.2 Test Plan 82
6.2.1 Test Organization 83 6.2.2 Test Environment 84
6.2.3 Test Schedule 85
6.3 Test Strategy 86
6.4 Test Design 86
6.4.1 Test Description 87
6.4.2 Test Data 90
6.4.2.1 Test Data of Alpha 90
Testing
6.4.2.2 Test Data of Beta 92
Testing
6.5 Test Result and Analysis 94
(14)
6.5.1.1 Alpha Testing 94 6.5.1.2 Beta Testing 96
6.5.2 Test Analysis 98
6.5.2.1 Alpha Testing 99 6.5.2.2 Summary of Alpha 102
Testing
6.5.2.1 Beta Testing 103 6.5.2.2 Summary of Alpha 108
Testing
6.6 Conclusion 108
CHAPTER VII PROJECT CONCLUSION
7.1 Observation on Weakness and 109 Strengths
7.1.1 Strengths 109
7.1.2 Weakness 110
7.2 Propositions for Improvement 110
7.3 Contribution 111
7.4 Conclusion 111
REFERENCES 112
(15)
TABLE TITLE PAGE
2.1 Comparisons of Existing Systems 22
2.2 Milestones and Dates 36
5.1 Use of Fonts 68
5.2 Version Control 77
5.3 Implementation Status 80
6.1 Test Organization 83
6.2 Test Environment 84
6.3 Test Schedule 85
6.4 Scales for Testing 86
6.5 Test Description for Functional Testing of Alpha Testing 87 6.6 Test Description for Integration Testing of Alpha Testing 88
6.7 Test Description for Beta Testing 88
6.8 Test Data for Functional Testing 90
6.9 Test Data for Integration Testing 91
6.10 Test Data for Beta Testing 92
6.11 Test Result for Functional Testing 94
6.12 Test Result for Integration Testing 95
6.13 Test Result for Beta Testing 96
(16)
DIAGRAM TITLE PAGE
2.1 Illustration of AR technologies in military 11 2.2 Color recognition worksheets to teach children basic 17
colors
2.3 Screen shot of ABCya Paint 18
2.4 Picture templates 19
2.5 2D image become 3D object with colAR Mix 21
2.6 Iterative Model 23
2.7 ADDIE Model 26
2.8 Android architecture layers 29
2.9 Metaio SDK architecture 31
3.1 ABCya Paint’s flow chart 41
3.2 Flow chart for Color & Draw for kids 43
3.3 colAR Mix flow chart 45
4.1 Project architecture 51
4.2 Main page of storyboard 52
4.3 Tutorial page of storyboard 53
4.4 Menu page of storyboard 53
4.5 Button page of storyboard 54
4.6 Overall flow of the project 55
4.7 Main interface 56
4.8 Second interface 57
4.9 Third interface 57
4.10 Forth interface 58
4.11 Fifth interface 58
(17)
4.13 Navigation design 60
4.14 Buttons and links 61
4.15 Input & output of the project 62
4.16 Color scale for this project 63
4.17 Pencil & color pencil metaphors 63
4.18 Icon design template with different sizes 64
4.19 Application Icon 64
5.1 Sketch Block Bold for Happy ColAR 67
5.2 Process of icon creation 69
5.3 Steps to use marker 71
5.4 Production of project video 72
5.5 Flow of configuration management setup 76
6.1 Layout When Conduct Testing 85
6.2 Visual Clarity of Functional Testing 99
6.3 Navigation and Interactivity of Functional Testing 100 6.4 Functionality and Content of Functional Testing 101
6.5 Integration Testing 102
6.6 Visual Clarity of Beta Testing 103
6.7 Navigation and Interactivity of Beta Testing 104 6.8 Functionality and Content of Beta Testing 105 6.9 Pre-Test of Effectiveness of Beta Testing 106 6.10 Post-Test of Effectiveness of Beta Testing 107
(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
(19)
APPENDIX TITLE PAGE
APPENDIXA Project Gantt chart 115
(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.
1.2.1 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.
(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.
1.2.3 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.
1.4.1 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.
1.4.2 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)
APPENDIX TITLE PAGE
APPENDIXA Project Gantt chart 115
(2)
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
(3)
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.
1.2.1 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.
(4)
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.
1.2.3 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
(5)
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.
1.4.1 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.
1.4.2 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.
(6)
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.