learn colors and shapes for toddler via ......learn colors and shapes for toddler via augmented...

LEARN COLORS AND SHAPES FOR TODDLER

VIA AUGMENTED REALITY

AINA SYAFIQAH BINTI AZMI

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA) WITH HONOURS

FACULTY OF INFORMATICS AND COMPUTING

UNIVERSITI SULTAN ZAINAL ABIDIN

2020

LEARN COLORS AND SHAPES FOR TODDLER

VIA AUGMENTED REALITY

AINA SYAFIQAH BINTI AZMI

Bachelor of Information Technology (Informatics Media) With Honours

Faculty of Informatics and Computing

Universiti Sultan Zainal Abidin,Terengganu, Malaysia

JANUARY 2020

i

DECLARATION

I hereby declare that this report is based on my original work except for quotations

and citations, which have been duly acknowledged. I also declare that it has not

been previously or concurrently submitted for any other degree at Universiti Sultan

Zainal Abidin or other institutions

Name : Aina Syafiqah binti Azmi

Date :……………………….......

ii

CONFIRMATION

This is to confirm that :

The research conducted and the writing of this report was under my supervision.

Name : Encik Mohd Sufian bin Mat Deris

Date :……………………………...............

iii

DEDICATION

Alhamdulillah.

Firstly, I am grateful to Allah for giving me an opportunities and strength to

complete this proposal. I would like to express my grateful to my supervisor, Encik

Mohd Sufian bin Mat Deris for the continuous support in my research project, for his

patience, motivation and also her knowledge.

I also want to thanks to my lovely family especially my parent, Azmi bin Bidin

and Zabiah binti Awang for supporting me financially and spiritually throughout the

process of writing this thesis and complete my final year project also my life in general.

Lastly, I want to thanks to all my fellow friends that helped me throughout this

research and to who helped me indirectly or directly in this research.

Thank You.

iv

ABSTRACT

Learn Colors and Shapes for Toddler via Augmented Reality (AR) is an

interactive mobile application that develop in order to give new experience to the user

especially to the toddler range 3-7 years old. Learn Colors and Shapes are develop by

using some software that compatible and able to integrate will the latest technology

which is Augmented Reality such as Unity 3D – the main software to develop the Learn

Colors and Shapes via AR, Vuforia – plugin that allow the Augmented Reality

technology work smoothly, and 3D Modelling Software – Autodesk Maya and

Sketchup. Furthermore, the problems identified are most of the toddler hard to

remember and recognize the colors and shapes because learning using traditional

method such as books very boring cause there is no element that can make it interactive.

By implement the technology of Augmented Reality to Learn Colors and Shapes, the

mobile application will more interactive to use by toddlers.

v

ABSTRAK

Belajar Warna dan Bentuk untuk Kanak-kanak melalui Augmented Realiti (AR)

adalah aplikasi mudah alih interaktif yang berkembang untuk memberikan pengalaman

baru kepada pengguna terutama kepada kanak-kanak berumur 1-3 tahun. Belajar

Warna dan Bentuk yang dibangunkan dengan menggunakan beberapa perisian yang

serasi dan dapat menyatukan akan teknologi terkini yang Augmented Realiti seperti

Unity 3D - perisian utama untuk membangunkan Belajar Warna dan Bentuk melalui

AR, Vuforia - plugin yang membolehkan teknologi Augmented Realiti berfungsi dengan

lancar, dan Perisian Pemodelan 3D - Autodesk Maya dan Sketchup. Selain itu, masalah

yang dikenalpasti adalah kebanyakan kanak-kanak yang sukar diingat dan mengenali

warna dan bentuk kerana pembelajaran menggunakan kaedah tradisional seperti buku

yang sangat membosankan sebab tidak ada elemen yang boleh menjadikannya

interaktif. Dengan melaksanakan teknologi Augmented Realiti untuk Belajar Warna

dan Bentuk, aplikasi mudah alih akan lebih interaktif untuk digunakan oleh kanak-

kanak.

vi

TABLE OF CONTENTS

PAGE

DECLARATION i

CONFIRMATION ii

DEDICATION iii

ABSTRACT iv

ABSTRAK v

CONTENTS vi

LIST OF TABLES ix

LIST OF FIGURES xi

LIST OF ABBREVIATION xiii

LIST OF APPENDICES xiv

CHAPTER I INTRODUCTION

1.1 Introduction 1

1.2 Project Background 1

1.3 Problem Statement 3

1.4 Objective 4

1.5 Scope 4

1.6 Expected Result 5

1.7 Limitation of Work 6

1.8 Summary of Chapter 7

CHAPTER II

LITERATURE REVIEW

2.1 Introduction 8

2.2 Explanation Technology Timeline 9

2.3 Related Techniques 11

2.3.1 Marker-based 11

vii

2.4 Journal - Learning Using Augmented Reality Technology:

Multiple Means of Interaction for Teaching Children the

Theory of Colours

12

2.5 Journal - Fun Learning with AR Alphabet Book for

Preschool Children

13

2.6 Journal - The Current Trends of Augmented Reality in

Early Childhood Education

14

2.7 Journal - Scaffolding A Conceptual Support for

Personalized Arabic Vocabulary Learning Using

Augmented Reality (AR) Enhanced Flashcards

15

2.8 Overall Analysis 17

2.9 Summary of Chapter

19

CHAPTER III PROJECT METHODOLOGY

3.1 Introduction 20

3.2 Methodology Model 20

3.2.1 Analysis Phase 22

3.2.2 Design Phase 24

3.2.3 Development Phase 27

3.2.4 Implementation Phase 32

3.2.5 Evaluation Phase 32

3.4 Framework Design 33

3.5 Project Requirement 35

3.5.1 Software Requirement 35

3.5.2 Hardware Requirement 35

3.6 Summary of Chapter 39

viii

CHAPTER IV IMPLEMENTATION AND TESTING

4.1 Introduction 42

4.2 Interface design 43

4.2.1 Main Menu View 43

4.2.2 Tutorial Page View 45

4.2.3 Quiz Page View 47

4.2.4 AR Camera View 53

4.3 AR Marker 57

4.4 3D Model 63

4.5 Testing 64

4.6 Usability Testing 65

4.7 Test Case 66

4.8 Result 72


72

CHAPTER V CONCLUSION

5.1 Introduction 73

5.2 Project Contribution 73

5.3 Problem and Limitation 74

5.4 Future Work 74

5.5 Conclusion 75

REFERENCES

76

ix

LIST OF TABLES

TABLE TITLE PAGE

2.1 Comparison Table 1 17

4.1 Interface and Button in Main Menu Page 43

4.2 Interface and Button in How to Play Page 1 45




4.6 Interface and Button Home Quiz 47

4.7 Interface and Button Home Quiz Question 1 47










4.17 Interface Quiz End Question 52

4.18 Interface and Button in AR Camera 53

4.19 Interface and Button in AR Camera View of Red Color 53

4.20 Interface and Button in AR Camera View of Green Color

54

x

4.21 Interface and Button in AR Camera View of Blue Color 54

4.22 Interface and Button in AR Camera View of Orange Color

55

4.23 Interface and Button in AR Camera View of Yellow Color

55

4.24 Interface and Button in AR Camera View of Purple Color

56

4.25 Interface and Button in AR Camera view of Virtual Button

56

4.26 Marker Detail for Flashcard Image 58

4.27 Open Application Test Case 67

4.28 Home Page Test Case 67

4.29 Learn Colors and Shapes for Toddler via AR Camera Test Case

68

4.30 How to Play Page Test Case 70

4.31 Quiz Page test Case 71

xi

LIST OF FIGURES

FIGURE TITLE PAGE

2.1 Marker Based 11

3.1 ADDIE Development Model 21

3.2 Analysis Phase 23

3.3 Storyboard Application 25

3.4 Storyboard Application 26

3.5 Create Marker 28

3.6 Modeling 3D 29

3.7 Create Marker use Vuforia 30

3.8 Building Environment AR use 3D unity 31

3.9 Framework Design 33

3.10 Software Autodesk 3D Maya 35

3.11 Software Visual Studio 35

3.12 Software Unity 36

3.13 Software Adobe Photoshop 36

3.14 Software Adobe Illustrator CS6 37

3.15 Software Vuforia 37

3.16 Hardware Laptop 39

3.17 Hardware Android Smartphone 39

3.18 Hardware Mouse 40

3.19 Hardware Pendrive 40

xii

3.20 Hardware Printer 40

4.1 Four View of 3D Model in 3D Maya Software 63

4.2 Four View of 3D Model in 3D Maya Software 64

4.3 Graph Result for User Testing 65

4.4 Feedback Result from User 65

xiii

LIST OF ABBREVIATIONS/TERMS/SYMBOLS

AR Argumented Reality

3D Three dimensional

ADDIE Analysis, Design, Develop, Implement, Evaluate

xiv

LIST OF APPENDICES

APPENDIX TITTLE PAGE

A Gantt Chart Final Year Project I 77

B Gantt Chart Final Year Project II 78

C Form User Testing 80

D Coding Scale Object 81

E Coding Rotate Object 84

F Coding Drag Object 88

G Coding Quiz Score 91

H Coding Virtual Button 92

I Poster Final Year Project 93

1

CHAPTER I

INTRODUCTION

1.1 Introduction

Augmented Reality (AR) is an example of the revolution that occurs in

technology that continuously expands around the world now. AR is a new kind of

interactive technology that gives us a new way to interact in a direct view of an existing

environment. It allows us to create or put 3D object directly onto physical things or

fused together in real-time. In addition to that, other features that AR offers to users are

sound, videos and graphics too. Nowadays, there are various applications that integrated

with augmented reality technology.

2

1.2 Project Background

Toddler refer to children aged 3-7 years old. Therefore, the knowledge gained

at this stage is very important. There are many color learning tools on the market but

this product still needs a little improvement to deliver the tutorial effectively. Therefore,

the project aims to help children learn colors in an efficient way by using additional

reality techniques on the Android platform.

Important colors in life. Learning colors are important and that's the reason for

many publishers, developers, educators introducing many color learning tools to the

world today. However, these color learning tools come with some inefficiency. Some

of them are not interactive learning tools, lack of tutorials and so on. All of these are

factors for color learning inadequate.

From an early age, children need not only recognize colors but also need to know

different shapes even though they do not know their names have their names. It takes

much longer for children to learn the specific features of each form, such as the number

of sides or shape. Providing many pre-school practice forms helps them reinforce their

understanding of the two-dimensional structure. Knowledge of forms gives children

advantages in many areas of learning.

There are many advantages of learning shapes such as literacy can distinguish

between forms is better to see the difference in the form of letters. Second, to learn

maths can give a strong understanding of the form can help toddler to recognize the

numbers and their way of looking. Another one is categories and comparisons to focus

3

on specific features and learn to use observational skills to identify different shapes.

Lastly, troubleshooting shape activity can help develop problem-solving skills for

toddlers who learn shapes.

1.3 Problem Statement

Shapes and colors are an important part of early childhood education. When your

child strives to identify and separate blue blocks from yellow ones, she's learning more

than curves, corners, and colors. She's making new sense of the world and developing

the ability to communicate it to you.

Although, as a parent, you should introduce colors and shapes whenever it comes

up naturally all through infancy, the rule of thumb is that 18 months is the acceptable

age when children can developmentally grasp the idea of colors. Some may learn earlier,

others not until they reach early preschool age, and children with vision impairments

(like color blindness) may need extra help. In all cases, the concepts should be

reinforced straight through to kindergarten.

Naming shapes is a skill that takes a little longer to develop. Most children reach

about two years of age before they can grasp the concept. Like all developmental stages,

this mark is fluid. Generally, by three years of age, a child should be able to identify

some basic shapes.

4

It's a simple truth that learning shapes and colors is fundamental for more advanced

learning. What makes objects the same and different is a basis of logic. Pattern recognition,

a strong foundation for mathematical concepts, requires the ability to quickly recognize

shapes. Being able to trace or draw shapes is a skill that must be mastered in order to write

letters and numbers. Each of toddlers to start learn writing and maths needs to recognize the

whole of shapes.

1.4 Objective

There are a few purposes in developing the Learn Colors and Shapes via

augmented reality which is: -

• To develop a smartphone application with the augmented reality concept.

• To design interesting learning colors and shapes with the assistant of

augmented reality concept to teach toddlers.

• To testing the efficiency of the implementation of augmented reality into

learning for toddlers.

1.5 Scope

The scopes for this project are identified to make the application development

process easier. The scope is divided into two, which are target user scope and system

scope.

5

Target user

• The target user for this project are toddlers which refer to the kids among

3 – 7 years old.

• Reason to set the age range until 7 years old is that the contents develop

through this project are simple, there could have a higher level of content for

children above the age range.

System

• Focuses on a mobile device only.

• The platform using android only.

• To show 3D virtual graphical image and teach toddlers to learn colors and

shapes with the example given.

• Focuses only primary and secondary colors in color wheel.

• Provides only 19 flash cards.

1.6 Expected Result

Hopefully, this app will help facilitate both sides of the children and reality plus

supported by mobile phones. By developing a 3D model for shape make it easier for

children to learn shapes indirectly learn colors at the same time with an augmented

reality technology. By using mobile applications can provide a great way to interact

with real environment.

6

1.7 Limitation of Work

• Mobile-based application

• Need install application in smartphone

• Marker-based technique using AR Mobile based application

• Only android user can use this Learn Colors and Shapes via AR application.

7


This chapter discussed the project’s background, problem statement, project

objective, and project scope.

8

CHAPTER II

LITERATURE REVIEW

2.1 Introduction

This chapter provided some reviews of techniques which have been proposed by

many researchers previously. The related works also have been reviewed to ensure the

quality in order to improve this project. This chapter also describes and explains the

literature review carried out on the application that will be used as references in

developing this application. Previous research or existing application will also be

discussed in this section. for identifying the weakness or lacking to related literature

review sources. Therefore, the purpose of the literature review is to find, read and

analyses the literature or any works or studies related to this application. It is important

to well understand all information to be considered and related before developing this

application. Some research has been studied to understand to implement in the Learn

Colors and Shapes for Toddler Via Augmented Reality application.

9

2.2 Explanation Technology Timeline

Mobile Augmented Reality has largely evolved over the last decade, as well as the

interpretation itself of what is Mobile Augmented Reality (Arth, Clemens & Grasset,

Raphael & Gruber, Lukas & Langlotz, Tobias & Mulloni, Alessandro & Wagner, 2015).

The first instance of Mobile AR can certainly be associated with the development of

wearable AR, in a sense of experiencing AR during locomotion (mobile as a motion).

With the transformation and miniaturization of physical devices and displays, the

concept of mobile AR evolved towards the notion of "mobile device", aka AR on a

mobile device. In this history of mobile AR, we considered both definitions and the

evolution of the term over time.

The year 1968 is the first creates the augmented reality system by Ivan Sutherland. It

also the first virtual reality system. It uses an optical see-through head-mounted display

that is tracked by one of two different 6DOF trackers: a mechanical tracker and an

ultrasonic tracker. Due to the limited processing power of computers at that time, only

very simple wireframe drawings could be displayed in real time. In 1974, Myron

Krueger built an artificial reality laboratory called the Videoplace. The Videoplace

combined projects with video cameras the emitted onscreen silhouettes, surrounding

users in an interactive environment.

10

In 1999, Hirokazu Kato and Mark Billinghurst present AR Toolkit, an open-source

software library that uses video tracking on overlay computer graphics on a video

camera. The AR Toolkit is still used widely to compliment many augmented reality

experiences. Tobias Höllerer develops a mobile AR system that overlays models of

earlier buildings. This was the first mobile AR system to use RTK GPS and an inertial-

magnetic orientation tracker. He presents a mobile augmented reality system that

includes indoor user interfaces (desktop, AR tabletop, and head-worn VR) to interact

with the outdoor user. While outdoor users experience a first-person spatialized

multimedia presentation via a head-mounted display, indoor users can get an overview

of the outdoor scene. In 2000, Sharp Corporation releases the first commercial camera

phone to the public. The official name of the phone is J-SHO4. The phone’s camera has

a resolution of 0.1 megapixels. In the year 2009, print media tries out AR for the first

time. Esquire Magazine prompts readers to scan the cover to make Robert Downey. It

comes alive on the page. In 2014, Google announces shipment of Google Glass device

for consumers, thus starting the trend of wearable AR.

11

2.3 Related Techniques

Related techniques refer techniques of Augmented Reality already existing and

used until now. This is an example of techniques:

2.3.1 Marker-Based

Figure 2.1 Marker Based

The digital world is anchored to the real world. Marker-based Image recognition

is an imperative component of augmented reality systems. By use of identifying visual

markers already embedded within the system, physical world objects are detected for

superimposition of virtual elements. (Sanni Silatanen, 2012). Therefore, the device must

first recognize which page user looking at from the live camera view. This can be

achieved by placing a distinctive picture or shape on the page. That picture will be

recognized and the animation can start immediately, tracked to the appropriate place on

the page. The user can also move the physical book around and see the virtual world

“stick” to the rear surface of the page. The distinctive picture that can be recognized by

the device, the marker. A marker can be anything, as long as it has enough unique visual

points.

12

2.4 Journal - Learning Using Augmented Reality Technology: Multiple Means of

Interaction for Teaching Children the Theory of Colours

Augmented Reality technology permits concurrent interaction with the real

environment and computer-generated virtual objects, thus making it an interesting

technology for developing educational applications that allow manipulation and

visualization. The work described extends the traditional concept of the book with

rendered graphics to help children understand the fundamentals of the theory of colors.

Augmented Reality (AR) technology provides a blend of manipulation and

visualization through the overlay of synthetic environments over real ones. AR excites

children’s imagination without forcing them to lose contact with reality and provides a

tangible interface metaphor that is commonly in use in educational settings where

physical objects are used to communicate meanings. According to Holt, children learn

through play, everything becomes a learning experience for them, playing is learning,

and playing is fun. Following this view, the goal of this research work is in describing

the potential offered by AR in enhancing traditional learning methods for children.

13

2.5 Journal - Fun Learning with AR Alphabet Book for Preschool Children

Based on the review of related work in exploring literacy learning for young

children, the common method used is the observation. This is due to the ability of young

children to read, write and understanding. Besides, that, the simple questionnaire is used

by asking children to rate how they feel about a particular question based on the picture

represented.

The following presents the design of the prototype used in this study. In, this

paper, we have presented the development and evaluation of an augmented reality book

for learning the alphabet. One of the advantages of an AR book over a traditional book

is that other interesting elements such as animation, virtual objects, sound, and video

can be integrated while having the physical book itself. The results of our observational

study show that the presence of such features does generate excitement, engagement,

and enjoyment during the learning process. Our observation also reveals that the unique

interface of combining real and virtual objects does act as a natural attention grabber as

well as an engaging and fun learning tool for this age group.

Continued usage of the book may bore the reader as they can predict what objects

will appear. Whilst several objects were provided for each alphabet, random display of

these objects and adding more objects for each letter could be another future

enhancement. A similar development approach could be used to create AR book

14

applications in other subjects such as science and mathematics. More usability studies

will be conducted using other approaches to measure the element of fun and engagement

in the learning process.

2.6 Journal - The Current Trends of Augmented Reality in Early Childhood

Education

The purpose of this study is to search for the existing works of augmented reality

in early childhood education level. It is important to know what research has been so

far, not only to fill in the gap in the educational field of research but also to ensure that

this user group is not left behind. The great potential of augmented reality shall not be

wasted and should be shared among all users in all level of education.

Secondly, as mentioned by many scholars, augmented reality has many positive

benefits in learning. Therefore, this study will investigate whether this learning benefit

can be found from the early childhood educational perspective. Finally, this research

will investigate the most used topic that has been researched, types of augmented reality,

devices used with augmented reality application, research sample and the data

collection method involved when conducting augmented reality evaluation with young

children.

There are six advantages of augmented reality has been reported such as:

1. Increase achievement/performance/understanding.

2. Enhance motivation.

3. Develop positive attitudes and behavior.

15

4. Enhance social skills.

5. Fun learning and

6. Others.

2.7 Journal - Scaffolding A Conceptual Support for Personalized Arabic

Vocabulary Learning Using Augmented Reality (AR) Enhanced Flashcards

In the study, observing the students’ response and understanding in using the

AR enhanced flashcards for personalized Arabic vocabulary learning. Findings

indicated that the AR enhanced flashcards help in scaffolding the knowledge regarding

Arabic vocabulary learning. Furthermore, the findings showed that the AR enhanced

flashcards facilitate the process of Arabic vocabulary personalized learning. The study

showed that the augmented reality could be considered as one of the personalized

learning platforms that can be used to help students in memorizing certain information

and maintained their knowledge of Arabic vocabulary and creating novel sentences by

using the target vocabularies more than half of the time. Augmented reality has not been

widely known in the field of Arabic teaching and learning. The studies of AR

environments can be used with either workbooks or flashcards and they can be used in

many different fields of studies.

16

The main advantages for AR are learning gains, motivation, interaction, and

collaboration. (Bacca et al., 2014). A few studies have been done using a mobile device

to scaffold personalized learning (Huang, Wu & Chen, 2012). Therefore, mobile AR

also can be used in Arabic teaching and learning with the use of the flashcards. There

are many advantages but there are also challenges when designing and using AR

applications for personalized Arabic vocabulary teaching and learning. Some of them

will be pointed out. Augmented reality (AR) as suggested by Bujak (2013) is just

starting to scratch the surface in educational applications. An augmented reality browser

is an application that displays geo-located multimedia content using a virtual

representation augmented on the vision of the real world.

17

2.8 Overall Analysis

Table 2.1: Comparison Table 1

JOURNAL AUTHOR TECHNIQUE ADVANTAGES DISADVANTAGES

Learning

Using

Augmented

Reality

Technology:

Multiple

Means of

Interaction for

Teaching

Children the

Theory of

Colours

Giuliana Ucelli

, Giuseppe

Conti , Raffaele

De Amicis ,

and Rocco

Servidio

Virtual and

Augmented

Reality.

(marker-

based)

• Provides a blend

of manipulation

and

visualization

through the

overlay of

synthetic

environments

over real ones.

• Can raise a

student's

curiosity such

that they

actively

participate

• Does not

guarantee the

survival of an

AR

application,

• Poor design

interfaces in

AR

Fun Learning

with AR

Alphabet Book

for Preschool

Children

Dayang Rohaya

Awang Rambli,

Wannisa

Matcha*,

and Suziah

Sulaiman

Virtual and

Augmented

Reality

Using books

• User can work

and interact

simultaneously

with the real

world and

virtual objects in

a natural way.

• Used as an

alternative

interesting

educational

delivery method

as it will not

only lead to a

high motivation

student.

• Not easy to

use since it

developed

based on

marker

recognition

when the

student flips

the marker,

the model

disappears.

• Object not

appear on the

pattern marker

on the time

18

The Current

Trends of

Augmented

Reality in

Early

Childhood

Education

Masyarah

Zulhaida

Masmuzidin

and

Nor Azah

Abdul Aziz

Augmented

Reality.

(marker-

based)

• Fun learning

• Enhance

motivation.

• Develop

positive

attitudes and

behavior.

• Enhance social

skills.

• Willingness to

learn.

• Satisfaction.

• The effects of

mobile devices

in young

children

learning and

health

condition.

• Not much

exploration in

other subjects.

Scaffolding A

Conceptual

Support for

Personalized

Arabic

Vocabulary

Learning Using

Augmented

Reality (AR)

Enhanced

Flashcards

Zainuddin, N.,

Sahrir, M. S.,

Idrus, R. M.,

and

Jaafar, M. N.

Augmented

Reality using

flashcard

(Marker-

based)

• Platforms in

order to help

them in the

memorization

and retention of

Arabic

vocabulary

theoretically and

practically.

• Learning gains,

motivation,

interaction, and

collaboration.

• To help in

scaffolding the

knowledge and

memorization of

the students.

• User must

download

Aurasma from

Google Play

or App Store.

Aurasma used

to image and

object

recognition to

link content

(Auras).

19


Findings show that there are some considerations should be taken into account

in the development of augmented reality, learning tool of shapes and colors on the

Android platform. The technology and platform used must be chosen precisely in

order to achieve the objectives of this project. Besides, the requirements needed to

develop a shapes and colors learning tool must also need to take into account in order

to deliver the tool effectively. Next, this project will focus on the methodology

needed for this.

20

CHAPTER III

PROJECT METHODOLOGY

3.1 Introduction

This chapter will explain the details of the methodology being used in this

project. The project methodology should systematically solve all the problems arise in

the system analysis to make sure this project complete and working well. It is an

important step of development since it will guide the researcher through software

development. After the system has been completely developed. It should be tested to

make sure all the objective of the project achieved.

3.2 Methodology Model

The model that will use this system is an ADDIE model. The ADDIE model is

important to understand if a developer wants to develop a successful project. The

ADDIE model has five phase acronyms is Analysis, Design, Development,

Implementation, and Evaluation. ADDIE is an extremely effective tool in training

21

development that addresses instruction. Most employees have a significant amount of

information to learn in order to become more proficient at their jobs.

Therefore, the ADDIE model should be helpful for many in planning a course of action

that would lead to the successful implementation of a project.

When dealing with projects that involve instruction or steps, the approach fits

nicely. In order to ensure effective learning outcomes from augmented reality (AR)

education development, careful planning is required before the development process

begins. ADDIE Instructional Design Model is used in this mobile AR application

development methodology. The ADDIE model for instructional system design (ISD) is

a basic model that can be applied to any kind of learning solution. The ADDIE model

has five steps processes which is analysis, design, development, implementation, and

evaluation.

Figure 3.1: ADDIE Development Model

ANALYSIS

DESIGN

DEVELOPMENT

IMPLEMENTATION

EVALUATION

22

3.2.1 Analysis Phase

The Analysis phase is the foundation for all other phases of instructional design.

During this phase, it must define the problem, identify the source of the problem and

determine possible solutions. The phase may include specific research techniques such

as needs analysis, job analysis, and task analysis. The outputs of this phase often include

the instructional goals and a list of tasks to be instructed. These outputs will be the

inputs for the Design phase. In this phase, the analysis phase needs to develop the

mobile AR application. The analysis phase involves are requirement analysis, task

analysis, and instructional analysis. Then, the activities involved are identifying the

problem statement, the goals, and objectives of the mobile AR application. This is very

important because to develop the users need, existing knowledge and any other relevant

characteristics and also the content of mobile AR application. All information gathered

was used to develop goals and objective of developing mobile AR application.

23

Figure 3.2 Analysis Phase

Analysis Problem

Statement

1. Not use an interactive learning tool

2. Difficult to identify color blindness

3. Difficult to learn mathematics

Objectives 1. To develop a smartphone

application with AR reality concept

2. To produce an interesting learning

colors and shapes

3. To evaluate the efficiency of the

implementation of AR

Target

Audience

1. Admin

2. User(Toddlers)

Content

This project included:

1. Shapes and Colors picture

- contains images picture with

pronouns words

- used as a marker based for AR

2. 3D Images using AR technology

- A mobile app contains a 3D

model

- sound effect

Strategy

Requirement

1. Use a 3D model

2. Augmented reality technology

1. Software

-Unity3D

-Vuforia

-Maya3D

2. Hardware

-Laptop

-Mobile phone (Android)

24

3.2.2 Design Phase

The second phase is designed stage which is it will be explained on the design

of an application that will be developed in the form of a 3D prototype. This phase will also

explain the technology and tools involved. This stage is focusing on the prototype itself

that will be shown on 2D presentation such as pictures. In addition, the 3D prototype

will be included the 3D model of the building, interface of the application and what

button that include. This prototype will help the development process as it is the guide

that shows what the expected output should the application will be.

25

i.) Storyboard Application

Home Page Explanation

User need to

click button

start to play

How to Play Page Explanation

Show the

explain how to

use this

application

AR Camera (Before) Explanation

When User

click start

button, AR

camera will

open to scan

any flashcard

AR Camera (After) Explanation

When the user

touches any

colours button,

the sound of

each colours

will be play

Figure 3.3 Storyboard Application

26

AR Camera (After) Explanation

When the user

touches on the

flash card the

button shape,

the visual

button will

display

Quiz Play Page Explanation

This segment

contains a quiz

10 question

about colors

and shapes

Figure 3.4 Storyboard Application

Figure 3.3 and Figure 3.4 is an explanation of the story board application for

each interface. This phase is using Adobe Photoshop to design the storyboard for the

project. A storyboard is a sequence of illustrations that showcase the digital story in two

dimensions. The first dimension is time: what happens first, next, and last. The second

is of interaction: how does the voiceover interact with an images, how do visual

transitions and effects help tie together the images? Any element can interact with any

other one, and the storyboard is the place to plan out the impact to intend to make on

the audience.

27

3.2.3 Development Phase

The Development Phase builds on both the Analysis and Design Phase. The

purpose of this phase is to generate lesson plans and lesson materials. This phase will

develop the instruction, all media that will be used in the instruction, and any supporting

documentation. This may include hardware and software. During the development

phase, the actual course materials are created. A successful development Phase uses the

information collected in the analysis phase and the decisions made in the design phase.

The Development Phase is the actual production and assembly of the materials that were

developed in the design phase. At this point, it is important to include whoever is

responsible for which elements, time schedules, and deadlines. In this phase, all steps

in the development of the project are collected, prepared, created and ready to be tested.

In the development phase, instructional designers and developers create and assemble

content assets blueprinted in the design phase. In this phase, the designers create

storyboards and graphics. The project is reviewed and revised according to feedback.

28

i.) Create Marker

Figure 3.5 Create Marker

This is the first step before start builds 3d animation models. Create markers

using Adobe Photoshop CS64. On the picture, there are pictures of the object and also

two words for names of color and shape such as Yellow and Cone. So, the users are

willing to scan images or markers on the picture and the 3D animation models

automatically pop out on the phone screen.

29

ii.) Modeling 3D

Figure 3.6 Modeling 3D

Figure 3.6 shows the developer making the process of modeling 3D animation

models using Autodesk Maya software. The image of the table shows a reference to

create 3D animation. Next process in animating 3D characters which are texturing.

Texturing is the next phase involved while creating 3D animation. It includes creating

a texture from the base, editing an existing texture for reuse. Shading intensity is to be

decided during the texturing phase and textures are developed like maps and then

assigned to a particular scene or model. After finish modeling the models, the developer

needs to find the right texture to wrap the models.

30

iii.) Create Marker use Vuforia

Figure 3.7 Create Marker use Vuforia

Figure 3.7 shows that Vuforia can recognize and track targets by analyzing

the contrast - based features of the target that are visible to the camera. The developer

can improve the performance of a target by improving the visibility of these features

through adjustments to the target's design, its rendering and scale, and how it's

printed. The star rating of a target ranges between 1 and 5 stars; although targets with

a low rating (1 or 2 stars) can usually detect and track well. For best results, the

developer should aim for targets with 4 or 5 stars.

31

iv.) Building Environment AR use 3D Unity

Figure 3.8 Building Environment AR use 3D unity

Figure 3.8 shows the unity 3D software. The developer needs to set up the Unity

3D before start using it. This is the platform where to begin building AR experiences.

Next, a developer needs to create a project and create the scenes which are Navigation,

Camera & Light, 3D Object, Physics, Material, and Scripts.

32

3.2.4 Implementation Phase

The Implementation phase refers to the actual delivery of the instruction,

whether it's classroom-based, lab-based, or computer-based. The purpose of this phase

is the effective and efficient delivery of instruction. This phase must promote the

students 'understanding of the material, support the students' mastery of objectives, and

ensure the students' transfer of knowledge from the instructional setting to the job.

i) Test Run Project

The developer test runs the project herself. This is to ensure that the project can

be used and is running accordingly.

ii) User Test Run

Developer gives to the user to test the project and give the feedback before

presenting the final product. Criticisms and constructive feedback is taken to be

implemented later on.

3.2.5 Evaluation Phase

This phase measures the effectiveness and efficiency of the instruction.

Evaluation should actually occur throughout the entire instructional design process-

within phases, between phases, and after implementation. Evaluation phases may be

formative or summative.

33

i) Debug

a) Identify Errors

After done the test run, errors that were found by the users should be

identified. Example, glitches, and mistakes should be brought to light

for developer to improve the project while also implementing the

feedback by the alpha and beta testers.

b) Find solutions

If once errors have been identified, solutions the error must be done to

solve.

ii) Final product

a) Presentation

The system is ready to be presented and launched for a large audience

to use.

3.3 Framework Design

Figure 3.9 Framework Design

34

Figure 3.9 above shows the framework design of Learn Colors and Shapes for

toddler via AR. User is able to choose any button in this application. The users need to

scan any flashcard for display 3D object and also press button for display virtual button.

The 3D Unity used to create the Virtual Reality application and overall project and

modeling 3D objects. The Vuforia use to create augmented reality. The Vuforia detects

and tracks the features that are naturally found in the image itself by comparing these

natural features against a known target resource database. Once the Image Target is

detected, Vuforia Engine will track the image as long as it is at least partially in the

camera’s field of view. For the best results, you should aim for targets with 4 or 5 starts.

35

PROJECT REQUIREMENT

3.4 Software and Hardware Requirement

3.4.1 Software Requirement

1. Autodesk 3D Maya

Figure 3.10: Software Autodesk 3D Maya

Maya 3D animation software offers a comprehensive creative feature set for 3D

computer animation, modeling, simulation, rendering, and compositing on a highly

extensible production platform. Maya has next-generation display technology,

accelerated modeling workflows, and tools for handling complex data. In the other hand,

Autodesk 3D Maya is used when the accuracy/reading is not the main concern. Thus,

most of the 3D project aside from the texture or environment part uses 3D Maya.

2. Visual Studio

Figure 3.11: Software Visual Studio

Microsoft Visual Studio is an integrated development environment (IDE) from

Microsoft. The game engine used for this project is Unreal Engine 4, it contains the

function to use either the blueprint function or C++ language to program for the

software. Blueprint function is handy when the feature is simple, but for advance

36

function, C++ is preferred. Thus, Visual Studio is needed in order to have some advance

feature in the project.

3. Unity

Figure 3.12: Software Unity

Unity, the world’s leading real-time engine, is used to create half of the world’s games.

Unity is a cross-platform game engine with a built-in IDE developed by Unity

Technologies. It is used to develop video games for web plugins, desktop platforms,

consoles, and mobile devices. After some comparison work is done, it’s found that the

biggest difference being these two engines is its scripting language, and Unity software

seems to be a better choice.

4. Adobe Photoshop

Figure 3.13: Software Adobe Photoshop

In the process of creating 3D models, the textures of those 3D models are one of the

main factors of creating a high- quality 3D model. The texture file is mostly created

using image editing software and then map onto the 3D model. Among those huge

amounts of software available on the internet. Adobe Photoshop is the most preferred

choice by most. It is a powerful application that is used by the professionals for image

editing, touching up photos, creating high-quality graphics and etc. It consists of tools

37

like the pen tools, advanced selection tools (cropping, slicing, moving, etc.), color

replacement tools, and much more. With the help of this software, high-quality textures

will be able to be produced and used in the 3D models to achieve a realistic look.

5. Adobe Illustrator CS6

Figure 3.14: Software Adobe Illustrator CS6

Adobe Illustrator CS6 is a software application for creating drawings, illustrations, and

artwork. Adobe illustrator is used to creating a variety of digital and printed images,

including cartoons, charts, diagrams, graphs, logos, and illustrations. In developing a

logo for Learn Colors and Shapes for Toddler (AR), adobe illustrator is used for a guide

to tracing an object in the photograph. Then, this software also can be used to re-color

or create a sketch-like appearance of a photograph.

6. Vuforia

Figure 3.15: Software Vuforia

Vuforia is an augmented reality software development kit (SDK) for mobile devices

that enables the creation of augmented reality applications. It uses computer vision

technology to recognize and track planar images (Image Targets) and simple 3D objects,

such as boxes, in real time. This image registration capability enables developers to

position and orient virtual objects, such as 3D models and other media, in relation to

https://en.wikipedia.org/wiki/Augmented_reality

https://en.wikipedia.org/wiki/Software_development_kit

https://en.wikipedia.org/wiki/Virtual_object

https://en.wikipedia.org/wiki/3D_modeling

38

real-world images when they are viewed through the camera of a mobile device. The

virtual object then tracks the position and orientation of the image in real-time so that

the viewer's perspective on the object corresponds with the perspective on the Image

Target. It thus appears that the virtual object is a part of the real-world scene.

https://en.wikipedia.org/wiki/Perspective_(visual)

39

3.5.2 Hardware Requirement

1. Laptop (Asus VivoBook)

Figure 3.16: Hardware Laptop

Laptop (Asus VivoBook) is a multi-purpose computer whose size, capabilities, and

price make it feasible for individual use. This hardware is used to create the sketches

for the character, background and create scripts or documents. Also used for on the go

coding and 3D modeling. editing and develop the project of Learn Colors and Shapes

via AR. Laptop Asus VivoBook manufactures the best high specification laptops to be

used to develop the project.

2. Android Smartphone

Figure 3.17: Hardware Android Smartphone

An android smartphone is a powerful, high tech smartphone that runs on the Android

operating system (OS) developed by Google and is used by a variety of mobile phone

manufacturers. Pick an Android mobile phone is the best choice to develop the project

using AR when need to switch platform to android in Unity.

40

3. Mouse

Figure 3.18: Hardware Mouse

The mouse, sometimes called a pointer, is a hand-operated input device used to

manipulate objects on a computer screen. Also used to move the cursor on the screen in

order to interact with files, windows, and other software elements.

4. Pendrive

Figure 3.19: Hardware Pendrive

Pendrive act as permanent storage drives that interface with the computer through a

USB or Firewire port. It stored information for any of the same uses an internal hard

drive. Pendrive also high- density storage is perfect for large scale data back up and

retrieval.

5. Printer

Figure 3.20 : Hardware Pendrive

A printer is a device that accepts text and graphics output from a computer and transfers

the information to paper, usually to standard size sheets of paper. In this project, printer

will be used to print out of document such as for a report.

41


The methodology is very important in system development. It helps to make sure

the system develops correctly from phases to phases. In this system, the iterative and

Incremental Model had been chosen as a guide to build the system. It also helps to ensure

all the objectives can be achieved. Besides, this chapter also explains the hardware and

software requirements for this system.

42

CHAPTER IV

IMPLEMENTATION AND TESTING

4.1 Introduction

In this chapter, will be discussing the implementation of the methodology

discussed in the previous chapter and testing to obtain the result of each implementation.

Implementation is executed to ensure the application is developed according to the main

objectives of the project and fulfill the user requirement. Testing will be executed so

that the developer will recognize the defects as soon as possible and repair it

immediately.

43

4.2.2 Interface Design

User interface (UI) design is the process of making interfaces in software or

computerized devices with a focus on looks or style (Dix, 2012).

4.2.1 Main Menu View

Table 4.1: Interface and Button in Main Menu Page

Interface Main Menu Button in Interface Main Menu

Interface Main Menu

Start Button

How to Play Button

Quiz Button

Exit Button

44

Table 4.1 above shows the whole interface for the home page. There are several

choices buttons such as a button for start, how to play button, quiz button, and exit

button. The interface used an element of shapes and splash colors to decorate a home

page. The explanation is on How to Play button which is to guide users on how to use

the application smoothly. In Table 4.1 has a start button for the user to make

confirmation to exit from the application. There have some instructions and technique

fingers to use and the application works well.

The main button in this application is a Start button and Quiz button. The start

button is functioned to go to the next scene which is the user able to scan the flashcard

provided to show the 3D object and make interaction on it as Table 4.1 shown above.

Quiz button contains a collection of questions arranges to follow from the easy level to

a high level. Here have 10 questions about colors and shapes.

45

4.2.2 How To Play View

Table 4.2: Interface and Button in How to Play Page 1

Interface How to Play Page 1 Button in Interface How to Play page 1

Interface How to Play Page 1

Home Button

Next Button


Interface How to Play Page 2 Button in Interface How to Play Page 2


Home Button

Previous Button

Next Button

46




Home Button

Previous Button

Next Button




Home Button

Previous Button

47

4.2.3 Quiz Page View

Table 4.6: Interface and Button Home Quiz

Interface Home Quiz Button in Interface Home Quiz

Interface Home Quiz

Home Button

Table 4.7: Interface and Button Quiz Question 1

Interface Quiz Question 1 Button in Interface Quiz Question 1

Interface Quiz Question 1

Home Button

Answer Option 1

Answer Option 2

Answer Option 3

48




Home Button

Answer Option 1

Answer Option 2

Answer Option 3




Home Button

Answer Option 1 Answer Option 2


49




Home Button

Answer Option 1

Answer Option 2

Answer Option 3




Home Button



50




Home Button






Home Button



51




Home Button






Home Button

Answer Option 1

Answer Option 2

Answer Option 3

52




Home Button



Table 4.17: Interface and Button Quiz End Question

Interface Quiz End Question Button in Interface Quiz End Question

Interface Quiz End Question

Home Button

53

4.2.4 AR Camera View

Table 4.18: Interface and Button in AR Camera

Table 4.19: Interface and Button in AR Camera View of Red Color

Interface AR Camera view Button in Interface AR Camera view

Interface AR camera view

Home Button

Red Button Green Button

Blue Button Orange Button

Yellow Button Purple Button

Interface AR Camera view Button in Interface AR Camera view

of Red Color

Interface in AR Camera view of Red

Color

Home Button




54

Table 4.20: Interface and Button in AR Camera View of Green Color

Table 4.21: Interface and Button in AR Camera View of Blue Color

Interface AR Camera View Button in Interface AR Camera View

of Green Color

Interface in AR Camera view of Green

Color

Home Button





of Blue Color

Interface AR camera view Blue Color

Home Button




55

Table 4.22: Interface and Button in AR Camera View of Blue Color

Table 4.23: Interface and Button in AR Camera View of Yellow Color

Interface AR Camera View Button in Interface AR Camera View of

Orange Color

Interface AR camera Orange Color

Home Button





of Yellow Color

Interface AR camera Yellow Color

Home Button




56

Table 4.24: Interface and Button in AR Camera View of Purple Color

Table 4.25: Interface and Button in AR Camera View of Virtual Button


of Purple Color

Interface AR camera Purple Color

Home Button





of Virtual Button

Interface AR camera of Virtual Button

view

Home Button Virtual Button




57

4.3 AR Marker

Image recognition is an imperative component of augmented reality systems.

By use of identifying visual markers already embedded within the system, physical

world objects are detected for superimposition of virtual elements. In order for an AR

application to estimate the orientation and position of a camera with respect to the real-

world frame, most applications employ a tracking technique known as marker based

augmented reality.

Once you begin using the marker-based augmented reality system with a digital

device, the image of the physical world captured by your camera is converted into a

grayscale image to expedite the image processing algorithm. The algorithm then uses

the image of the camera as well as the decoded marker ID to augment the virtual object

onto the physical world model. By focusing the camera of whichever digital devices you

are using to deploy the augmented reality app on the specified markers, the app is able

to retrieve the information stored to display the three-dimensional virtual object

accurately.

58

Table 4.26: Marker Detail for Flashcard Image

Flashcard Image Marker Feature Marker Detail

Type: Single Image

Status: Active

Target ID:

97facba0313f46b5965904d8ffd05a07

Augmentable: 4

Type: Single Image

Status: Active

Target ID:

143fddf9122f45c68ad090ceb75a05f1

Augmentable: 5

Type: Single Image

Status: Active

Target ID:

35e08b9a05fb4fe0bb3755f371ac6802

Augmentable: 4

Type: Single Image

Status: Active

Target ID:

ef146a9d8de146dbad65586b566022bf

Augmentable: 5

59

Type: Single Image

Status: Active

Target ID:

31e7699c0ffe4846898ce5c409953b18

Augmentable: 5

Type: Single Image

Status: Active

Target ID:

725e6e8b4ba74ce3819a8d20d829ba14

Augmentable: 4

Type: Single Image

Status: Active

Target ID:

65ee77368ef442098d04b3fb2400cbc2

Augmentable: 4

Type: Single Image

Status: Active

Target ID:

ebd759411a2248418c5a3ac2f2b07af0

Augmentable: 5

60

Type: Single Image

Status: Active

Target ID:

53df8ff78063428ca0ade9bdcec56151

Augmentable: 5

Type: Single Image

Status: Active

Target ID:

29f708a482fd4979a6bd2949592deb33

Augmentable: 5

Type: Single Image

Status: Active

Target ID:

e3f8335cdb3f4e0d96e0d6c0459b96b7

Augmentable: 5

Type: Single Image

Status: Active

Target ID:

9362043945a54725b13bd6c27ffabc17

Augmentable: 5

61

Type: Single Image

Status: Active

Target ID:

98009e25e19d4688a25a0c3009872993

Augmentable: 5

Type: Single Image

Status: Active

Target ID:

1746c34fa81f4279a9ce0c30196595c5

Augmentable: 5

Type: Single Image

Status: Active

Target ID:

7b5c4199b07b45328f9846b6790a6271

Augmentable: 5

Type: Single Image

Status: Active

Target ID:

95327fcbc9b040e2a116823162c66136

Augmentable: 5

62

Type: Single Image

Status: Active

Target ID:

660bc911122a4bbea880f2cfaebe0c39

Augmentable: 4

Type: Single Image

Status: Active

Target ID:

0b8273e88a1a4dd2a09ccded3a1fb648

Augmentable: 4

Type: Single Image

Status: Active

Target ID:

d95839046b2b49daa8eb537aef2b93c5

Augmentable: 5

63

4.4 3D Model

3D modeling is the creation of a computer-generated representation of an object

or character in 3D space. A 3D modeler has to build models before they can be animated

or VFX can be applied. Depending on the end goal, they may be working from scratch,

concept art, other 3D designs or even optimizing scan data to create models. A modeler

will also work on the topology of the model, or the way vertices and edges are arranged,

to ensure the model is ready for the next steps in the pipeline. Successful modelers will

have creative ways of getting the job done in the time allotted while ensuring the

accuracy of the final product.

Figure 4.1 Four View of 3D Model in 3D Maya Software

64

Figure 4.2 Four View of 3D Model in 3D Maya Software

4.5 Testing

Testing is needed to test application full function. These is three type of testing

in the application. Those are unit testing, integrate testing and system testing. Unit

testing is carried out to verify the functionality of specific section code and integration

testing works to exposed defects in the interface and interaction between modules. End-

to-end testing or system tests a complete integrated system to verify that it meets its

requirements.

65

4.6 Usability Testing

Figure 4.3 Graph Result for User Testing

Figure 4.4 Feedback Result from User

0 1 2 3 4 5 6 7 8 9 10

Question 1

Question 2

Question 3

Question 4

Question 5

User Testing "Learn Colors and Shapes for toddlers via Augmented Reality

Yes No

Question 6 (Suggestion)

Improve the interface to make it more interesting

Add an option to various quiz answer options

I like this application to teach my students. The best.

66

Usability testing is a way to see how easy to use something is by testing it

with real users. Users are asked to complete tasks, typically while they are being

observed by a researcher, to see where they encounter problems and experience

confusion. If more people encounter similar problems, recommendations will be

made to overcome these usability issues. The following are the results of the 10

people that use for user testing Learn Colors and Shapes for Toddler via Augmented

Reality Application that presented as a Clustered Bar Chart. Figure 4.3 clustered bar

chart transforms the data into separate bars or columns. Generally, this type of visuals

has a question on the x-axis and the range on the y-axis. So, you can compare

statistical data between the question and their ranges. The clustered bar chart is shown

in the questionnaire that provided between 5 responses of users. Overall, we can see

a user give a good feedback about Learn Colors and Shapes for Toddlers via

Augmented Reality Application.

Figure 4.4 is a result of feedback from the user to Learn Colors and Shapes for

Toddlers via Augmented Reality. The result mostly gives good feedback and give ideas

to improve this application more interesting after this.

4.7 Test case

A test case is a set of condition or variables under where the tester will determine

if the requirement upon an application is partially or fully satisfied. Test case also can

be defined as a sequence of steps to test the correct behavior of functionality or feature

of an application. There is a list of steps, test, procedure and expected outcomes would

be stated in the test case.

67

Table 4.27: Open Application Test Case

Step Test Procedure Expected Output Result

1

Open the application

Home interface with two

buttons which are Camera and

Tutorial will appear on the

screen.

Success

Background sound will be

Play

Success

Table 4.28: Home Page Test Case


1

Click the Start button

Open and view the AR

Camera interface.

Success

2

Click Tutorial Button

Open and view the Tutorial

interface and information.

Success

3

Click Quiz Button

Open and view the Tutorial

interface and information.

Success

4

Click Exit Button

Background sound will be

played as successful enter the

tutorial page.

Success

68

Exit from the application and

smartphone home will be

appear.

Success

Table 4.29: Learn Colors and Shapes for Toddlers via AR Camera Test Case


1

User enter the AR Camera

interface

A sentence of instruction will

appear on the screen for a

few seconds and fade out and

the back button on the upper

left side of the screen.

Success

2

User scans the flash card

(Learn Colors and Shapes

Marker)

The 3D model of 3D shapes

and colors on the 3D shapes

will appears automatically

and the user can move, rotate,

and scale around the 3D

model.

Success

3

User touch the back button

Go and view the homepage

Success

4

User scale the 3D model with

two fingers

The 3D model of shapes

will be resize into large or

small size.

Success

69

5

Touch Virtual Reality

Button

Open and view the popup

information about shapes.

Success

Open and view the 3D Red

colors of shapes.

Success

6 Click Red Button

Sound red will be played as

successful click Red Button.

Success

Open and view the 3D Green

colors of shapes.

Success

7 Click Green Button

Sound red will be played as

successful click Green

Button.

Success

Open and view the 3D Blue

colors of shapes.

Success

8

Click Blue Button

Sound Blue will be played as

successful click Blue Button.

Success

Open and view the 3D Orange

colors of shapes.

Success

9 Click Orange Button

Sound Orange will be

played as successful click

Orange Button.

Success

70

Open and view the 3D Yellow

colors of shapes

Success

10 Click Yellow Button

Sound red will be


Yellow Button.

Success

Open and view the 3D Purple

colors of shapes

Success

11 Click Purple Button

Sound red will be


Purple Button.

Success

Table 4.30: How to Play Page Test Case


1

User touch Next and Previous

button

The information on how to use

the application will change

whenever the user clicks the

Button

Success

2

User touch the Home button


Success

71

Table 4.31: Quiz Page Test Case


1

User touch Start button

When user click the Start

button the quiz will be start

with question 1 to question 10.

Success

2

User touch the Home button


Success

3

User answer with Correct

answer

When user click the Correct

answer button the score 10

mark will get for each

question.

Success

4

User answer with Wrong

answer

When user click the Wrong

answer button the score 0 mark

will get for each question.

Success

72

4.8 Results

The expected result after releasing of the application Learn Colors and Shapes for

Toddlers via AR is user should be able to get the interactive way to learn colors and

shapes. The user also can reduce their imagination for furniture from a piece of paper.

The benefit of Learn Colors and Shapes for Toddlers via AR application is does not use

an internet connection but can imagine physically the model 3D appearance. The

developer also expected that the system could function well and fulfill the user

requirement standard especially for toddlers.


In a nut shell for this chapter, the AR developer shows the interface those

developed for the Learn Colors and Shapes for Toddlers application using augmented

reality. The AR developer also put a few popup information after the user need to touch

virtual button on the flash card. Next, testing phase did by the AR developer by testing

the application. This phase also important because to optimize the application for the

high level a few errors can be identifying, and the AR developer fixed to improve

functionality of the application. The AR developer does test to the teacher and student of

see the process of learning colors and shapes via AR. If there have any feedback, AR

developer will be improved it immediately. Finally, the test case necessary to guide the

tester to test the application. The application will repeatedly to be tested to minimize

deficiency.

73

CHAPTER V

CONCLUSION

5.1 Introduction

In this chapter, the contribution of AR application, problem, and limitation during

project development as well as future work to improve Learn Colors and Shapes for

Toddler via AR will be discussed.

5.2 Project Contribution

The contribution of this application to the user especially to the student to learn

more interactive about colors and 3D shapes and give experience to the user such as

explore the 3D shapes the same as the object in a real environment. Learn Colors and

74

Shapes for Toddler using AR technology created with AR mobile applications using

Unity3D software. Next, I’ve designed all 3D shapes with Autodesk Maya. All button in

this application using Adobe Illustrator and Adobe Photoshop. Lastly, this application

also using a technique that is marker-based in AR. The user needs to scan a flashcard to

appear as a 3D object in AR application.

5.3 Problem and Limitation

There are several problems and limitations when developing this application. The

major problem when developing this application is the lack of knowledge in this field.

Besides, another limitation during the project development is to find a way to optimize

the application and stabilize the 3D model to ensure it can be shown without any failures.

Besides that, the limitation is this application only available on the Android platform only.

5.4 Future Work

Every developer has aims to improve their application or project for the next

project. They come out with an idea to solve the problem of the previous application. On

this application, the future work that comes from the developer idea is to design different

3D shapes and add more colors not only focus on the tertiary colors wheel. So, can make

this application more interesting and colorful. Since this application just has 19 types of

3D shapes and only 6 colors, so the developer can add more types of 3D shapes for users

to learn and the user can get more information about shapes and colors. Next, the future

work is done the multilanguage because before this English language only.

75

5.5 Conclusion

In conclusion, the objective to build a Learn Colors and Shapes for Toddler via

Augmented Reality Application was successfully achieved. This system is really helpful

to toddlers who want to learn about colors and shapes more interactive. Then, the marker

techniques had been used in this application. ADDIE model has been used during the

development of the application. The framework and the interface design that included in

this report can also act as a guideline for the user to use this application.

76

REFERENCES

[1] Rambli, D. R. A., Matcha, W., & Sulaiman, S. (2013). Fun learning with AR alphabet

book for preschool children. Procedia computer science, 25, 211-219.

[2] Rambli, D. R. A., Matcha, W., & Sulaiman, S. (2013). Fun learning with AR alphabet

book for preschool children. Procedia computer science, 25, 211-219.

[3] Masmuzidin, M. Z., & Aziz, N. A. A. (2018). THE CURRENT TRENDS OF

AUGMENTED REALITY IN EARLY CHILDHOOD EDUCATION. The International

Journal of Multimedia & Its Applications (IJMA) Vol.10, 1-22.

[4] Rasalingam, R. R., Muniandy, B., & Rass, R. (2014). Exploring the application of

Augmented Reality technology in early childhood classroom in Malaysia. Journal of

Research & Method in Education (IOSR-JRME), 4(5), 33-40.

[5] Zainuddin, N., Sahrir, M. S., Idrus, R. M., & Jaffar, M. N. (2018). Scaffolding a

Conceptual Support for Personalized Arabic Vocabulary Learning Using Augmented

Reality (AR) Enhanced Flashcards. Journal of Personalized Learning, 2(1), 95-103.

77

APPENDIX A: GANTT CHART FINAL YEAR PROJECT I

Task Name

September October November December

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Topic Discussion

Project Title

Proposal

Proposal Writing

Proposal Writing -

Literature Review

Proposal Progress

Presentation &

Evaluation

Discussion

Correction

Proposal

Proposed Solution

Methodology

Proof of Concept

Drafting Report of

the Proposal

Submit Draft of

Report to

Supervisor

Seminar

Presentation

Correction Report

Final Report

Submission

78

APPENDIX B: GANTT CHART FINAL YEAR PROJECT II

Task Name

September October November December

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

1. Layout Design

1.1 User

interface

Design

1.2 Flash Card

Design

2. Modelling and

Texturing

2.1 Modelling

and

texturing

nineteen 3D

object

3. Database

Setup and

Rendering

3.1 Upload

Image on

Vuforia

Developer

4. Coding

4.1 Set

gestures on

the object

5. Progress

presentation 1

6. Development

and

Implementati

on

6.1 Design

6.2 Modelling

6.3 Texturing

6.4 Rendering

79

6.5 Build

Project apk

6.6 Documenta

tion

7. Progress

presentation

to Supervisor

7.1 Project

progress

and poster

7.2 Submit

draft

Report

8. Testing

9. Seminar

Presentation

and Panel

Evaluation

10. Integrate

added value

11. Final Thesis

Submission

80

APPENDIX C: FORM USER TESTING

User Testing “Learn Colors and Shapes for Toddlers via Augmented

Reality”

1. Interface in this application interesting? * Mark only one oval.

Yes

NO

2. All button in this application function? * Mark only one oval.

Yes

NO

3. This application can give benefits to you? * Mark only one oval.

Yes

NO

4. Do you feel interesting while using this application to teach? * Mark only one oval.

Yes

NO

* Only teacher

5. Do you think this application can improve the toddler level of mastery? * Mark only one oval.

Yes

NO

6. Any suggestion to improve this application?

____________________________________________________________________

81

APPENDIX D: CODING SCALE OBJECT

using UnityEngine; namespace Lean.Touch { /// <summary>This component allows you to scale the current GameObject relative to the specified camera using the pinch gesture.</summary> [HelpURL(LeanTouch.HelpUrlPrefix + "LeanPinchScale")] [AddComponentMenu(LeanTouch.ComponentPathPrefix + "Pinch Scale")] public class LeanPinchScale : MonoBehaviour { /// <summary>The method used to find fingers to use with this component. See LeanFingerFilter documentation for more information.</summary> public LeanFingerFilter Use = new LeanFingerFilter(true); /// <summary>The camera that will be used to calculate the zoom. /// None = MainCamera.</summary> [Tooltip("The camera that will be used to calculate the zoom.\n\nNone = MainCamera.")] public Camera Camera; /// <summary>Should the scaling be performanced relative to the finger center?</summary> [Tooltip("Should the scaling be performanced relative to the finger center?")] public bool Relative; /// <summary>If you want this component to change smoothly over time, then this allows you to control how quick the changes reach their target value. /// -1 = Instantly change. /// 1 = Slowly change. /// 10 = Quickly change.</summary> [Tooltip("If you want this component to change smoothly over time, then this allows you to control how quick the changes reach their target value.\n\n-1 = Instantly change.\n\n1 = Slowly change.\n\n10 = Quickly change.")] public float Dampening = -1.0f; [HideInInspector] [SerializeField] private Vector3 remainingScale; /// <summary>If you've set Use to ManuallyAddedFingers, then you can call this method to manually add a finger.</summary> public void AddFinger(LeanFinger finger) { Use.AddFinger(finger); } /// <summary>If you've set Use to ManuallyAddedFingers, then you can call this method to manually remove a finger.</summary> public void RemoveFinger(LeanFinger finger) { Use.RemoveFinger(finger); } /// <summary>If you've set Use to ManuallyAddedFingers, then you can call this method to manually remove all fingers.</summary>

82

public void RemoveAllFingers() { Use.RemoveAllFingers(); } #if UNITY_EDITOR protected virtual void Reset() { Use.UpdateRequiredSelectable(gameObject); } #endif protected virtual void Awake() { Use.UpdateRequiredSelectable(gameObject); } protected virtual void Update() { // Store var oldScale = transform.localPosition; // Get the fingers we want to use var fingers = Use.GetFingers(); // Calculate pinch scale, and make sure it's valid var pinchScale = LeanGesture.GetPinchScale(fingers); if (pinchScale != 1.0f) { // Perform the translation if this is a relative scale if (Relative == true) { var pinchScreenCenter = LeanGesture.GetScreenCenter(fingers); if (transform is RectTransform) { TranslateUI(pinchScale, pinchScreenCenter); } else { Translate(pinchScale, pinchScreenCenter); } } transform.localScale *= pinchScale; remainingScale += transform.localPosition - oldScale; } // Get t value var factor = LeanTouch.GetDampenFactor(Dampening, Time.deltaTime); // Dampen remainingDelta var newRemainingScale = Vector3.Lerp(remainingScale, Vector3.zero, factor); // Shift this transform by the change in delta

83

transform.localPosition = oldScale + remainingScale - newRemainingScale; // Update remainingDelta with the dampened value remainingScale = newRemainingScale; } protected virtual void TranslateUI(float pinchScale, Vector2 pinchScreenCenter) { // Screen position of the transform var screenPoint = RectTransformUtility.WorldToScreenPoint(Camera, transform.position); // Push the screen position away from the reference point based on the scale screenPoint.x = pinchScreenCenter.x + (screenPoint.x - pinchScreenCenter.x) * pinchScale; screenPoint.y = pinchScreenCenter.y + (screenPoint.y - pinchScreenCenter.y) * pinchScale; // Convert back to world space var worldPoint = default(Vector3); if (RectTransformUtility.ScreenPointToWorldPointInRectangle(transform.parent as RectTransform, screenPoint, Camera, out worldPoint) == true) { transform.position = worldPoint; } } protected virtual void Translate(float pinchScale, Vector2 screenCenter) { // Make sure the camera exists var camera = LeanTouch.GetCamera(Camera, gameObject); if (camera != null) { // Screen position of the transform var screenPosition = camera.WorldToScreenPoint(transform.position); // Push the screen position away from the reference point based on the scale screenPosition.x = screenCenter.x + (screenPosition.x - screenCenter.x) * pinchScale; screenPosition.y = screenCenter.y + (screenPosition.y - screenCenter.y) * pinchScale; // Convert back to world space transform.position = camera.ScreenToWorldPoint(screenPosition); } else { Debug.LogError("Failed to find camera. Either tag your cameras MainCamera, or set one in this component.", this); } } }

84

APPENDIX E: CODING ROTATE OBJECT

using UnityEngine; namespace Lean.Touch { /// <summary>This component allows you to transform the current GameObject relative to the specified camera using a twist gesture.</summary> [HelpURL(LeanTouch.HelpUrlPrefix + "LeanTwistRotate")] [AddComponentMenu(LeanTouch.ComponentPathPrefix + "Twist Rotate")] public class LeanTwistRotate : MonoBehaviour { /// <summary>The method used to find fingers to use with this component. See LeanFingerFilter documentation for more information.</summary> public LeanFingerFilter Use = new LeanFingerFilter(true); /// <summary>The camera we will be used to calculate relative rotations. /// None = MainCamera.</summary> [Tooltip("The camera we will be used to calculate relative rotations.\n\nNone = MainCamera.")] public Camera Camera; /// <summary>Should the rotation be performanced relative to the finger center?</summary> [Tooltip("Should the rotation be performanced relative to the finger center?")] public bool Relative; /// <summary>If you want this component to change smoothly over time, then this allows you to control how quick the changes reach their target value. /// -1 = Instantly change. /// 1 = Slowly change. /// 10 = Quickly change.</summary> [Tooltip("If you want this component to change smoothly over time, then this allows you to control how quick the changes reach their target value.\n\n-1 = Instantly change.\n\n1 = Slowly change.\n\n10 = Quickly change.")] public float Dampening = -1.0f; [HideInInspector] [SerializeField] private Vector3 remainingTranslation; [HideInInspector] [SerializeField] private Quaternion remainingRotation = Quaternion.identity; /// <summary>If you've set Use to ManuallyAddedFingers, then you can call this method to manually add a finger.</summary> public void AddFinger(LeanFinger finger) { Use.AddFinger(finger); } /// <summary>If you've set Use to ManuallyAddedFingers, then you can call this method to manually remove a finger.</summary> public void RemoveFinger(LeanFinger finger) {

85

Use.RemoveFinger(finger); } /// <summary>If you've set Use to ManuallyAddedFingers, then you can call this method to manually remove all fingers.</summary> public void RemoveAllFingers() { Use.RemoveAllFingers(); } #if UNITY_EDITOR protected virtual void Reset() { Use.UpdateRequiredSelectable(gameObject); } #endif protected virtual void Awake() { Use.UpdateRequiredSelectable(gameObject); } protected virtual void Update() { // Store var oldPosition = transform.localPosition; var oldRotation = transform.localRotation; // Get the fingers we want to use var fingers = Use.GetFingers(); // Calculate the rotation values based on these fingers var twistDegrees = LeanGesture.GetTwistDegrees(fingers); if (twistDegrees != 0.0f) { if (Relative == true) { var twistScreenCenter = LeanGesture.GetScreenCenter(fingers); if (transform is RectTransform) { TranslateUI(twistDegrees, twistScreenCenter); RotateUI(twistDegrees); } else { Translate(twistDegrees, twistScreenCenter); Rotate(twistDegrees); } } else { if (transform is RectTransform) { RotateUI(twistDegrees); } else { Rotate(twistDegrees); }

86

} } // Increment remainingTranslation += transform.localPosition - oldPosition; remainingRotation *= Quaternion.Inverse(oldRotation) * transform.localRotation; // Get t value var factor = LeanTouch.GetDampenFactor(Dampening, Time.deltaTime); // Dampen remainingDelta var newRemainingTranslation = Vector3.Lerp(remainingTranslation, Vector3.zero, factor); var newRemainingRotation = Quaternion.Slerp(remainingRotation, Quaternion.identity, factor); // Shift this transform by the change in delta transform.localPosition = oldPosition + remainingTranslation - newRemainingTranslation; transform.localRotation = oldRotation * Quaternion.Inverse(newRemainingRotation) * remainingRotation; // Update remainingDelta with the dampened value remainingTranslation = newRemainingTranslation; remainingRotation = newRemainingRotation; } protected virtual void TranslateUI(float twistDegrees, Vector2 twistScreenCenter) { // Screen position of the transform var screenPoint = RectTransformUtility.WorldToScreenPoint(Camera, transform.position); // Twist screen point around the twistScreenCenter by twistDegrees var twistRotation = Quaternion.Euler(0.0f, 0.0f, twistDegrees); var screenDelta = twistRotation * (screenPoint - twistScreenCenter); screenPoint.x = twistScreenCenter.x + screenDelta.x; screenPoint.y = twistScreenCenter.y + screenDelta.y; // Convert back to world space var worldPoint = default(Vector3); if (RectTransformUtility.ScreenPointToWorldPointInRectangle(transform.parent as RectTransform, screenPoint, Camera, out worldPoint) == true) { transform.position = worldPoint; } } protected virtual void Translate(float twistDegrees, Vector2 twistScreenCenter) { // Make sure the camera exists

87

var camera = LeanTouch.GetCamera(Camera, gameObject); if (camera != null) { // Screen position of the transform var screenPoint = camera.WorldToScreenPoint(transform.position); // Twist screen point around the twistScreenCenter by twistDegrees var twistRotation = Quaternion.Euler(0.0f, 0.0f, twistDegrees); var screenDelta = twistRotation * ((Vector2)screenPoint - twistScreenCenter); screenPoint.x = twistScreenCenter.x + screenDelta.x; screenPoint.y = twistScreenCenter.y + screenDelta.y; // Convert back to world space transform.position = camera.ScreenToWorldPoint(screenPoint); } else { Debug.LogError("Failed to find camera. Either tag your cameras MainCamera, or set one in this component.", this); } } protected virtual void RotateUI(float twistDegrees) { transform.rotation *= Quaternion.Euler(0.0f, 0.0f, twistDegrees); } protected virtual void Rotate(float twistDegrees) { // Make sure the camera exists var camera = LeanTouch.GetCamera(Camera, gameObject); if (camera != null) { var axis = transform.InverseTransformDirection(camera.transform.forward); transform.rotation *= Quaternion.AngleAxis(twistDegrees, axis); } else { Debug.LogError("Failed to find camera. Either tag your cameras MainCamera, or set one in this component.", this); } } } }

88

APPENDIX F: CODING DRAG OBJECT

using UnityEngine; namespace Lean.Touch { /// <summary>This component allows you to translate the current GameObject relative to the camera using the finger drag gesture.</summary> [HelpURL(LeanTouch.HelpUrlPrefix + "LeanDragTranslate")] [AddComponentMenu(LeanTouch.ComponentPathPrefix + "Drag Translate")] public class LeanDragTranslate : MonoBehaviour { /// <summary>The method used to find fingers to use with this component. See LeanFingerFilter documentation for more information.</summary> public LeanFingerFilter Use = new LeanFingerFilter(true); /// <summary>The camera the translation will be calculated using.\n\nNone = MainCamera.</summary> [Tooltip("The camera the translation will be calculated using.\n\nNone = MainCamera.")] public Camera Camera; /// <summary>If you want this component to change smoothly over time, then this allows you to control how quick the changes reach their target value. /// -1 = Instantly change. /// 1 = Slowly change. /// 10 = Quickly change.</summary> [Tooltip("If you want this component to change smoothly over time, then this allows you to control how quick the changes reach their target value.\n\n-1 = Instantly change.\n\n1 = Slowly change.\n\n10 = Quickly change.")] public float Dampening = -1.0f; [HideInInspector] [SerializeField] private Vector3 remainingTranslation; /// <summary>If you've set Use to ManuallyAddedFingers, then you can call this method to manually add a finger.</summary> public void AddFinger(LeanFinger finger) { Use.AddFinger(finger); } /// <summary>If you've set Use to ManuallyAddedFingers, then you can call this method to manually remove a finger.</summary> public void RemoveFinger(LeanFinger finger) { Use.RemoveFinger(finger); } /// <summary>If you've set Use to ManuallyAddedFingers, then you can call this method to manually remove all fingers.</summary> public void RemoveAllFingers() { Use.RemoveAllFingers(); } #if UNITY_EDITOR protected virtual void Reset()

89

{ Use.UpdateRequiredSelectable(gameObject); } #endif protected virtual void Awake() { Use.UpdateRequiredSelectable(gameObject); } protected virtual void Update() { // Store var oldPosition = transform.localPosition; // Get the fingers we want to use var fingers = Use.GetFingers(); // Calculate the screenDelta value based on these fingers var screenDelta = LeanGesture.GetScreenDelta(fingers); if (screenDelta != Vector2.zero) { // Perform the translation if (transform is RectTransform) { TranslateUI(screenDelta); } else { Translate(screenDelta); } } // Increment remainingTranslation += transform.localPosition - oldPosition; // Get t value var factor = LeanTouch.GetDampenFactor(Dampening, Time.deltaTime); // Dampen remainingDelta var newRemainingTranslation = Vector3.Lerp(remainingTranslation, Vector3.zero, factor); // Shift this transform by the change in delta transform.localPosition = oldPosition + remainingTranslation - newRemainingTranslation; // Update remainingDelta with the dampened value remainingTranslation = newRemainingTranslation; } private void TranslateUI(Vector2 screenDelta) { // Screen position of the transform var screenPoint = RectTransformUtility.WorldToScreenPoint(Camera, transform.position); // Add the deltaPosition screenPoint += screenDelta;

90

// Convert back to world space var worldPoint = default(Vector3); if (RectTransformUtility.ScreenPointToWorldPointInRectangle(transform.parent as RectTransform, screenPoint, Camera, out worldPoint) == true) { transform.position = worldPoint; } } private void Translate(Vector2 screenDelta) { // Make sure the camera exists var camera = LeanTouch.GetCamera(Camera, gameObject); if (camera != null) { // Screen position of the transform var screenPoint = camera.WorldToScreenPoint(transform.position); // Add the deltaPosition screenPoint += (Vector3)screenDelta; // Convert back to world space transform.position = camera.ScreenToWorldPoint(screenPoint); } else { Debug.LogError("Failed to find camera. Either tag your camera as MainCamera, or set one in this component.", this); } } } }

91

APPENDIX G: CODING QUIZ SCORE

using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class Jawab : MonoBehaviour { public GameObject feed_TRUE, feed_FALSE; void Start() { } public void jawaban(bool jawab) { if (jawab) { feed_TRUE.SetActive(false); feed_TRUE.SetActive(true); int skor = PlayerPrefs.GetInt("skor") + 10; PlayerPrefs.SetInt("skor", skor); } else { feed_FALSE.SetActive(false); feed_FALSE.SetActive(true); } gameObject.SetActive(false); transform.parent.GetChild(gameObject.transform.GetSiblingIndex()+ 1).gameObject.SetActive(true); } void update() { } }

92

APPENDIX H: CODING VIRTUAL BUTTON

using System.Collections; using System.Collections.Generic; using UnityEngine; using Vuforia; public class clickVB1 : MonoBehaviour, IVirtualButtonEventHandler { public GameObject model, vbutton; // Start is called before the first frame update void Start() { vbutton.GetComponent<VirtualButtonBehaviour>().RegisterEventHandler(this); model = GameObject.Find("PopupImageCone"); model.SetActive(false); } // Update is called once per frame public void OnButtonPressed(VirtualButtonBehaviour vb) { model.SetActive(true); } public void OnButtonReleased(VirtualButtonBehaviour vb) => model.SetActive(false); }

93

APPENDIX I: POSTER FINAL YEAR PROJECT

learn colors and shapes for toddler via ......learn colors and shapes for toddler via augmented...

Documents