dissertaion-new 8722742

Pratinav Pratap Singh A Cat Behavior Simulator

1

BSC (Hons) Software Engineering

FINAL YEAR PROJECT REPORT

A CAT BEHAVIOUR

SIMULATOR

Author: Pratinav Pratap Singh

Supervisor: Jock McNaught

May 2015


2

I. ABSTRACT

A cat behavior simulator is an interactive website application that has been developed to simulate the

behavior of a domestic cat. It shows a cats reaction to changing environment and its interaction with a

moving ball. It is a game based website where the environment in chosen for the cat and then the users

have to save the cat from getting hit by the ball.

The report is based on the third year project and contains detailed information regarding all the

processes of the simulator. It holds data regarding design and implementation made, tools and

technique used, testing and evaluation process of the project. The report talks about the methodology

used for the development process and the detailed history regarding the research and background of the

project. Finally, the conclusion that discusses about the challenges faced, lessons learned and future

advancement to the project.

Project Title: A Cat Behavior Simulator

Author: Pratinav Pratap Singh

Supervisor: Jock McNaught

Date: May 2015


3

II. ACKNOWLEDGEMENT

I would like to take this opportunity to thank all the people who have assisted and helped me

throughout the project.

Firstly, I would like to thank my supervisor for his guidance and motivation. He has assisted me

through every step and given me valuable advice regarding all the issues. I would also like to thank my

second supervisor, Mrs Liping Zhao, who has provided me feedback and given essential advice during

the presentation.

I would also like to show gratitude towards my family, who have always believed and supported me in

every way. They have always encouraged and motivated me to complete my project on time.


4

Table of Contents

I. ABSTRACT ...................................................................................................................................................... 2

II. ACKNOWLEDGEMENT ............................................................................................................................... 3

1. INTRODUCTION ........................................................................................................................................... 6

1.1The Project Overview .......................................................................................................................... 6

1.2 Project Objectives ................................................................................................................................ 7

1.3Critical Assumptions Made ................................................................................................................ 8

1.4Report Overview ................................................................................................................................... 8

1.5Main Milestones .................................................................................................................................... 9

1.6Acronyms ................................................................................................................................................. 9

2. RESEARCH AND BACKGROUND ........................................................................................................... 10

2.1 About Cats and their Behavior ..................................................................................................... 10

2.2 Motivation ........................................................................................................................................... 11

2.2.1 Related Examples ................................................................................................................... 11

2.3 Tools and Technique Used ............................................................................................................. 13

2.3.1 Java Programming Language [JPL] .................................................................................. 13

2.3.2 Extensible Markup Language [XML] ............................................................................... 14

2.3.3 Extensible Stylesheet Language [XSL] ............................................................................ 15

2.3.4 Software Development Methods [SDM] ......................................................................... 16

2.4 Architecture of Website .................................................................................................................. 17

2.4.1 Client-‐Server Architecture ................................................................................................. 17

2.4.2 Peer-‐to-‐Peer [P2P] Architecture ...................................................................................... 18

3. DESIGN ........................................................................................................................................................ 19

3.1 Agile Development Methodology ................................................................................................ 19

3.1.1 Short Iteration ......................................................................................................................... 21


5

3.2 General Design and Layout ............................................................................................................ 25

3.2.1 Fancy Box ................................................................................................................................. 26

3.2.2 Home Page ............................................................................................................................... 28

3.2.3 Simulator Page ....................................................................................................................... 29

3.3 Structure of The Cat ......................................................................................................................... 30

4. IMPLEMENTATION .................................................................................................................................. 32

4.1 Languages Used ................................................................................................................................. 32

4.2 Cat's Body Movement ...................................................................................................................... 32

4.2.1 Left-‐Right movement ............................................................................................................. 33

4.2.2 Jump Movement ...................................................................................................................... 34

4.2.3 Expressions .............................................................................................................................. 35

4.2.4 Keyboard Control ................................................................................................................... 36

4.2.5 Flight Time and Ball Movement ......................................................................................... 36

5. TESTING ...................................................................................................................................................... 37

5.1 User Stories ......................................................................................................................................... 38

5.2 Survey ................................................................................................................................................... 42

6. CONCLUSION .............................................................................................................................................. 47

6.1 Challenges ........................................................................................................................................... 47

6.2 Lessons Learned ................................................................................................................................ 47

6.3 Future Advancement to the Project ............................................................................................ 48

6.4 Summary……………………………………………………………………………………………………………...…48

7.Bibliography……………………………………………………………………………………....…49


6

1. INTRODUCTION

The initial section gives brief information about the project. It underlines the basic idea of the website,

the important milestones and sketches out the details of the report. It also traces out the brief

description about domestic cats and their behavior.

1.1The Project Overview

The main purpose of my 3rd year project is to develop a website that simulates some feature of

domestic cat behavior. The main focus of concern about the website is to make it as interactive as

possible for the users. The project is a 2D game based website. In the game, the cats figure is seen as a

medium, which depicts the reaction of a house cat to features like playing with a ball or environmental

change.

The basic concept behind the game is that the cat has three lives in total and the user has to save the cat

from getting hit by the ball. The user will experience a different type of functionality when the cat

jumps over the ball or gets hit by it. The emotion of happiness and sadness is perceived respectively.

The game comes to a halt after the user has lost three lives in order to save the cat. The user can restart

the game at any moment, either when the game is halted or when it's being played. Depending upon

how long the cat stays in the air, the flight time is calculated accordingly. The flight time is only

calculated when the game begins and not during the free state.

The homepage is like an initial start up page, in which the user can find information about the game

and the developer. The 'Start Game' button takes the user to the next page which is the main page of the

website. This is where a user comes across all the functionality related to cat behavior and plays the

simulation game. Initially, the game is in the rest position and the cat is in the free state. At this state,

the user can navigate the cat in two dimensions or make it jump around by pressing the space bar. The

movement of the cat is very precise to how a domestic cat moves and responds. So, before the user

starts to play the game, they have to choose a suitable environment for the cat to play. So far, the

options available are summer and winter. According to research, cats usually prefer the season of

summer to winter; therefore the users can see the cat's reaction to the changing environment. As soon

as the user selects the environment, the ball starts moving in a continuous motion. This sets the game to


7

its initial progress.

Initially, the cat is in a relaxed position. So, in order to make it look detailed and accurate to what a real

world cat looks like, a slight movement of cat’s head and the tail is shown even in its relaxed position.

Therefore, it doesn't look like a static image of a cat. The navigation is accountable for the aligned

movement of the cat’s body and the space bar is liable for it’s jumping. In order to enhance the user

usability function, the cat can go through physical and emotional change at any time during the usage

of the website. If the user presses the key L then the cat goes from relaxed state to more excited state

and shows the emotion of happiness for the total time the key is being pressed. Similarly, if the user

presses the key S then the cat goes from relaxed state to more stressed state and shows the emotion of

surprise for the total time the key is being pressed.

1.2 Project Objectives

The main purpose of this project is to make the website as interactive as possible and show an accurate

simulation by executing a precise body movement and facial expression of the cat. The system is

implemented using Html5, CSS, Html Canvas, jQuery and Photoshop etc. The implementation of

further requirements was needed in order to structure the components of the website.

• Photoshop the image of different body parts and then set the image in one frame. Then, the cat

is in relaxed position.

• Showing the movement of the cat in per frame to depict the motion with the help of Html

Canvas.

• Showing the movement of the ball so that it looks like that the game is in continuous process

and making the initial movement of ball restricted to when the environment is chosen for the

cat. The functionality for making the cat to jump over the ball and changing its expression

accordingly.

• The functionality for making the cat to jump over the ball and changing its expression

accordingly.

• Putting the options for choosing the environment for the cat to start the game.

• Building the homepage for the project.


8

1.3Critical Assumptions Made

During the initial development process, various assumptions were made in order to get a better

approach to the evolution of the project. These assumptions remained persistent throughout the

development process. This section is mainly mentioned for users who are cat lovers or have first-hand

experience with cat behavior so that they understand the build of the system. Various other cats might

react in a different way in a real life situation. So, the assumption might refute or contradict the claim,

which users will make. Therefore, the assumptions were made to get a better and wider outlook with

realistic results.

The assumptions are:

1. A cat gets happy when it jumps over the ball.

2. A cat gets surprised or stressed when hit by a ball.

3. Cats prefer summer to winter. Therefore, their reaction to the changing environment.

1.4Report Overview

This section gives a perfunctory view of the entire report by putting forth a description about each

chapter in the report.

1. Introduction: This section gives an overview of the entire project by describing the main

objectives of the project, various assumptions that were made during the initial development

and presents the report analysis.

2. Research and Background: This section contains information about technical aspects of the

project and how these details were helpful in its development. It also tells about the motivation

behind the general idea of the website and about the possible architectures of a website that can

be implemented.

3. Design: This section contains detailed information about the software development

methodology that has been enacted to implement the structure of the project. The general design

and layout of the website is discussed such as the background, basic structuring of the cat or the

layout etc.

4. Implementation: In this section, the technical points are thoroughly discussed and what


9

techniques were used in order to implement these points. Screenshots of code are used to give

more comprehensive outlook. It talks about cat’s behavior change and its movement, and what

tools are used to implement it.

5. Web Pages: The final product of the website is shown with the help of the screenshots. Talks

about different aspects of the web pages and portrays its plus point.

6. Testing and Evaluation: This section talks about the testing phases and highlights the

evaluation of the final outcome.

7. Conclusion: The report is finally concluded here and the challenges are discussed. It also talks

about the possible future advancement that can be made to the website.

8. Bibliography: This is the final section where the important source materials are listed.

1.5Main Milestones

Throughout the term time, there were few turning points, which included assessment and

implementation of the project. The focus was on the development and delivery of the website by the

end of the deadline. There existed different academic milestones, such as:

• Initial Plan Submission: 26th September 2014

• Seminar: 17th November 2014

• Presentation of Result: 11th March 2015

• Project Code Submission: 23rd March 2015

• Final Report and Screencast: 28th April 2015

1.6Acronyms

JPL: Java Programming Language W3C: World Wide Web Consortium

OOP: Object Oriented Language SDM: Software Development Methods

EML: Extensible Markup Language P2P: Peer-to-Peer

SGML: Standardized Generalized Markup Language

HTML: HyperText Markup Language

XML: Extensible Markup Language

XSL: Extensible StyleSheet Language

CSS: Cascading Style Sheets


10

2. RESEARCH AND BACKGROUND

This chapter explains the non-technical and technical aspect of the project and how they were executed

during the development process.

2.1 About Cats and their Behavior

Cats are small, carnivorous mammal, which are more popular as a household pet. Just like other

mammal, cats use their body language and face expressions in order to communicate. For example, if

any object is intriguing to them, then as a sign of greediness or acquisitiveness they will flick their tail,

or rub their body against it or when someone tries to talk to them, they tend to flick their ear and show

a slight tilting movement of the head.

Cats tend to have a thick layer of skin that protects them from cold winter and winds by keeping them

warm but in summer the skin prevents them from absorbing too much unnecessary heat. Cats are meant

to be homeotherms, which means that they can maintain a constant body temperature by adjusting the

internal heat loss and heat gain. [2] The quality of weather choice is highly variable in the case of

domestic cats, as cats tend to prefer the heat but still it depends from one cat to another.

Cats use a different type of diverse signals like body postures or facial expressions in order to deliver

their message. The type of cat depicted in the website is the 'Relaxed Cat' which manifest a different

type of facial expressions based on the simulation produced. Generally for such type of cat, their ears

will point to the side and slightly forward, their posture will be very subtle and their tail will be in high

upright position expressing confidence and contentment.

All animals need to play. Play is a kind of a behavior that gives a cat the chance to develop physical

coordination and problem-decoding ability. For example, when a cat plays with a toy, chasing other

cats, playing with a ball, when two cats show a degree of aggression while invading the same thing,

when cats play with their owner etc.


11

2.2 Motivation

As an animal lover and my prior experience with cats, it made more sense to choose this project as my

first preference. In my first-year group project, I gained some basic knowledge regarding website

development. Before I could start implementing, I wanted a full insight into how a website is developed

and different aspect of cats behavior. A proper understanding of the technical aspect was important in

order to use the knowledge to its peak availability. Surfing on web and researching about different

framework played an important role.

2.2.1 Related Examples

There are many examples of simulation on Internet, but the one that gave me an initial idea for the

implementation of my design was http://www.scirra.com/arcade/action/6515/being-a-cat-simulator.

This website is basically a game where the users can initially move the cat around in the living area.

But as soon as the cat jumps out of the window, it takes the users to a game based window where they

have to save the cat from dying.

The Home Page: This is the page which the users see after they have started the game. The users can

navigate the cat, make it jump or turn it around. The cat is in a free state so the users can move the cat

only in aligned x-axis. Figure 1 shows the home page. In Figure 2, you can see the cat jumping.

Figure 1: Screenshot of an example of cat simulator


12

Figure 2: Screenshot of an example of cat simulator

The Game Page: When the user makes the cat jump from the window then the game initially begins.

The cat's image is transformed, becomes more rigid. The basic idea of the game is that when the cat is

in the house, it is more relaxed and calm, but as soon as it goes out of the house, it has to face many

challenges for example jumping over the pond, fighting the dog etc. Since it is a continuous game,

Figure 3, shows a screenshot of level 1.

Figure 3: Screenshot of example of cat simulator, Level 1.


13

2.3 Tools and Technique Used

This section features the implementation of the tools and techniques in the development of the

simulator. Defines the entire technical element in a comprehensive manner and talks about the

architecture of the website. It includes Extensible Markup Language, Java Programming Language, and

Style Sheet Language etc.

2.3.1 Java Programming Language [JPL]

In the early 90s, technology and computer science growth was at its peak, and with the establishment of

Java, it reached the pinnacle of its career. It was developed as a high-level programming language by a

small group of Sun Microsystems in 1995. Initially Java was introduced as a project called 'Oak' by

James Gosling in 1991.

Java is a programming language, which is class-based, and object oriented. Unlike other languages,

JPL helps in eliminating various common programming errors which make it more preferable. Java is

referred as 'High-Level' because it can be easily read and written by humans and it has a bunch of rules

for writing the instruction, which is read and executed by the computer.

JPL has many characteristics such as object orientation, which is a method that defines programming

and language design. Object Oriented Programming [OOP] use objects and classes to organize the data,

which is combined with its applicable operations so that a stable system is designed. The main

advantages of OOP are that it provides an explicit structure for programs; it can easily amend the

existing code and provide a good structure for code libraries. Other Characteristic is performance

independence, according to which, if a program is written once then it can be run and executed

anywhere. The primary advantage of this process is that it makes the execution of the program easy.

The reasons for choosing Java as my programming language are as follows:

• It is easy to write, debug, compile, run, execute and make changes to than other programming

languages.


14

• It has highly reliable and it checks the error in the early state of execution.

• Multitasking, the ability to check and execute different task simultaneously within a program,

which makes the working faster and easier.

• It is object oriented and platform independent.

2.3.2 Extensible Markup Language [XML]

It is a markup language that explains a bunch of rules in order to encode the documents in such a way

that it can be read by both humans and machine. Its establishment began with the development of

Standardized Generalized Markup Language [SGML] whose main purpose was to mark up documents

with tags. During the enhancement of SGML over the years, it resulted in the development of

HyperText Markup Language [HTML] in 1998, which gained rapid popularity. This was more flexible,

organized and easy to use.

XML has various explicit characteristics, which plays an important role in rendering its structure, such

as:

• XML is structured in such a way that the data can be defined or ordered within the program,

therefore the structure of the file is known in advance and the process is easier.

• In a XML file, each item can be easily read by both human and machine, which makes it more

efficient.

• Because of its broad spectrum, XML makes the tailoring of the date more smooth according to

users demand.

• If the program was written once then it can be used anywhere. The file within the program is

kept updated and valid.

• It is said to be extensible because it only declares a set of tags, and with the help of provided

syntax, data can be shared between different applications.

The diagram below shows how to give a title to the web page. The reason why I considered XML to be

a top choice for formatting the data of the project are as follows:

• More Flexible


15

• Simple and easily Readable

• Representation of Data in Structural way

Figure 4: code snippet that creates the title

2.3.3 Extensible Stylesheet Language [XSL]

Extensible Stylesheet Language is responsible for the structure presentation of the data on the web.

XSL was established as a part of World Wide Web Consortium (W3C), and they released its first

working draft on XSL in 1998. In 1999 W3C, split the working into two parts. The first one dealt with

syntax and the other one handled the semantics of XSL.

It creates a style sheet whose main purpose is to send the data over the web with the help of XML. It

represents stylesheets and presents the content in a way; that is, how it should be laid-out, styled or

formatted etc. The most famous style sheet language that is widely practiced is Cascading Style Sheets

(CSS), whose main purpose is to declare the style and format of the documents and then apply them to

Html pages or any other markup language.

Figure 5: code snippet showing CSS method of styling.


16

The above diagram shows the syntax if you want to change the fonts size, format or color. The reason I

prefer CSS to any other styling language are as follows:

• High Consistency rate- if a change is made on a webpage then the same change can be

automatically made to the other pages of the website. This result in a consistent styling and on

the other side, it saves a lot of time.

• The coding technique required is very efficient; CSS leaves us with more content than code.

Therefore making it more suitable for coding.

• With the help of CSS features, the users can easily adapt to the website. This makes it really

convenient for the users to use the website.

• The layout of the website can be easily changed with respective to the device. This broadens its

usability.

2.3.4 Software Development Methods [SDM]

Software Development Method is a development methodology whose main purpose is to plan and

structure the process of developing the system. Few advantages of using software development

methodology are:

1. If there is a requirement change during the development process, then it can easily deal with the

change without hindering the process.

2. It is time efficient. Saves a lot of time during the development process.

3. Customers are continuously involved in the process, which makes it easier for the developers to

develop the system and keep the customers updated. .

4. Because of the efficient testing process, the problems are identified earlier. Therefore, the

adjustments are made accordingly.

There are different types of SDM involved with any project. Some of them are described below:

i. Different type of agile method used in my project are:

a. Short Iterations: In this type of method, the term time is divided into short chunks or


17

iterations and by the end of each iteration, requirements are completed and changes are

made accordingly. Therefore for the next iteration, new requirements are set.

b. User Stories: In this method, requirements are gathered depending upon the

functionality. Short sentences are written which describe the completed/ongoing

functionality.

ii. Waterfall Software Development: This is a sequential model in which each phase has to be

completed before moving on to the next one. Each phase is reviewed and requirements are met

accordingly. The phases do not overlap.

Figure 6: Waterfall process

2.4 Architecture of Website

Every website has its unique structure and design based on its development process and user

requirements. Some of the possible architectures are listed below:

2.4.1 Client-Server Architecture

In such type of architecture, the client sends a request to the server. The request is delivered over a

network. The network acts as a medium of communication between the client and the server. One of

the main examples is dynamic HTML web page, in which initially, the client requests for the HTML

file. The server locates the HTML file and passes it to the client. The web page remains unchanged

until a new request is made from the client. I have implemented this form of architecture in my project

and the advantages of choosing it are:

• The flies can be easily managed because all the data is stored at one place and the data can be

easily backed up in case of data loss.

• Network is centrally distributed and server can be accessed remotely.


18

• The data is secure. Server does access right and resource allocation.

Figure 7: Client-Server Architecture

2.4.2 Peer-to-Peer [P2P] Architecture

The nodes are interconnected and either of them can initiate the communication. The network is not

centralized, but it is distributed between the nodes. Therefore, P2P allows each node to work as both a

client and server. [21] All the content is shared among all the peers, hence minimum loss of data. But

there are few downfalls to it, for example if the server goes down then all the computers connected

within the same network crashes and if you expand the number of peers, the server goes down. Files

cannot be backed up and there is less security, so users don't need special permission to access the data.

Figure 8: Peer-to-Peer System


19

3. DESIGN

This session deals with the design and development aspect of the project. It describes the methodology

used, different development phases and the structure of the cat. The advantages of choosing a specific

layout for the website is discussed.

3.1 Agile Development Methodology

When a self-regulated or a multifunctional team works on a project under Agile Software Development

methodology, then the requirements evolve throughout the development process. Gathering

information regarding the requirement plays an important role in order to begin the development

process. The requirements should be gathered in a just-in-time and just-enough manner so that they are

value driven.

The Agile Software Development methodology has an incremental and time-boxed iterative approach

that deals with the changing requirement. Time-boxed means that a team has to complete the decided

work in a period of time. Rather than continuing the work until the goal is reached, they stop working

at the end of each iteration by making changes to the requirement and evaluating the work accordingly.

New requirements are set according to the amount of work done. To build a system in an Iterative

model, we repeat the process more than once. We work through the steps of the process from

requirement gathering to deployment. We go through all the process when building a prototype and

again when we use that knowledge to build the system. Therefore, we get a complete system only after

every iteration has been completed. The concept of incrementation is to divide the process into small

units or chunks of iteration that are a complete set in them. Requirements are set for each increment

and by the end of each session, part of the system is delivered which can be used and deployed. At the

end of each iteration, the requirements are implemented based on the amount of work that is evaluated.

In agile, the method has to iterative and incremental both because we need customer feedback during

the development process of each iteration so that changes can be made accordingly. The diagram below

shows the iterative and incremental process in Agile methodology.


20

Figure 9: Agile Methodology

In February 2001, seventeen developers met in Snowbird, Utah and published a document known as

Manifesto for Agile Software Development, which describes the main values that should be considered

in an agile development process. The Manifesto is described as:

“ Individual and interactions over process and tools

Working software over comprehensive documentation

Customer collaboration over contract negotiation

Responding to change over following a plan.”

The item on the left is valued more than the items on the right in The Manifesto. Based on the

Manifesto, few principles were described in the report and out of those principles, the ones

implemented and applied in the project are:

1. Welcoming changing requirements, even late in development.

2. Deliver working software frequently, from a couple of weeks to a couple of months.

3. The most efficient and effective way of conveying information to anyone is by face-to-face

conversation.


21

4. Working software is the primary measure of progress.

5. Continuous attention to technical excellence and good design enhances agility.

6. Simplicity- the art of maximizing the amount of work not done- is essential.

The Waterfall method is a substitute to Agile Methodology, but it has its own drawbacks. In The

Waterfall Method, processing takes place in a sequence. The developer goes to the next step only when

the previous phase is completed and the developers can't go back to the process. There are many

advantages of choosing The Waterfall process, but there are many disadvantages as well. For my

project, I picked The Agile process over The Waterfall process for the following reasons:

1. Since my project deals with a lot of requirement change, in The Waterfall process, initial

requirements are set and any change in them results in the failure of the project.

2. For an unprofessional programmer like me, there are high chances of error throughout the

development process. But in case of waterfall, if there is any error, the project has to start from

the beginning.

3. The testing process takes place at the end of the process, so any fault in the code results in

changing the whole code.

Out of all the development methods available, I have chosen few from the agile development

methodology.

3.1.1 Short Iteration

In this type of method, the term time is divided into set of chunks or iteration and requirements are set

accordingly. Based on the development progress at the end of each iteration, changes are made in the

next iteration. The reason I preferred Short Iteration to all other methods are:

• Reduces complexity.

• It is more efficient.

• Errors are estimated more accurately.

• Validation process is easier.

• Easily deals with requirement change.


22

For my project, I split the term time into 6 iterations, where the period time of each iteration was three

weeks. The work was distributed accordingly and the iterations are discussed below:

Iteration 1

TIME PERIOD OBJECTIVES

Week 1 – Week 3 1. Research and background about the project

is initiated.

2. Basic idea about website development.

3. Heavy research on cats and their behavior.

4. Research on Html5

Iteration 2


Week 4 – Week 6 1. Research on CSS3 and jQuery.

2. Idea behind Parallax scrolling [changes

were made after the seminar]

Iteration 3


Week 7 – Week 9 1. Cats image is built and Photoshopped.

2. The layout and design of the website is

decided

Iteration 4


23


Week 10 – Week 12 1. The interface of the website is

implemented.

2. The cat's posture is implemented.

3. Implementing the functionality of making

the cat jump.

Christmas Break -Week 13 – Week 18

Iteration 5


Week 19 – Week 21 1. Movement of the cat.

2. Implementing the functionality of cats

expression and behavior

3. The environment for the cat is build.

Iteration 6


Week 22 – Week 24 1. Keys are allocated.

2. Testing process starts in this iteration.

3. Tested for: User Task Analysis, Site

Navigation, Accessibility and User

Experience.

During the initial planning process, I made a Gantt chart to depict the schedule for the project. The

diagram below shows the distribution of work and term time. It also shows the changes made during

and after the development process. You can see in the chart, how I have made changes to the iteration,

for example; changes made to parallax scrolling.


24

Figure 10: Gantt Chart


25

3.2 General Design and Layout

The design for my Homepage and the Main page is kept simple so that the user experience is enhanced.

The designing is done in such a way that the need of front-end users is met. This is done with the help

of mark-up language. The contents are arranged in such a way that it’s easier for the users to navigate

around the web pages.

Before I started implementing the home page, I decided to make a blueprint, which helped me decide

its design or layout.

Figure 11: Blueprint of the website


26

At the start of the designing process my main objectives were:

• The contents should be clearly visible to the users, by carefully choosing the dimension of each

component.

• Usage of generic color, so that it’s easier for color-blind people to navigate. For example: black,

white, orange etc. But, avoiding colors like red, green etc.

• Users should be able to pause or restart the game at anytime, so that the functionality of user

usability is enhanced.

• Making the design and layout as simple as possible

3.2.1 Fancy Box

It is a technique of zooming in the image and html content on the web page. It can be easily customized

according to the users usability. It is an elegant way of distributing the content of the web pages. It was

built on Java Script framework jQuery and is very easy to implement. Every element has a path of its

own, so in order to implement it using fancy box, we need to connect the path with the href attribute.

The main advantages of using Fancy Box are:

1. The contents can be easily customized

2. It adds a drop shadow effect when the element is zoomed in, which highlights the content and

makes it look more appealing.

3. It can be used for multiple elements, like images, Html content, Iframes, Ajax etc

I have used this technique to implement the 'ABOUT' and 'HELP' pop up box. 'Help' gives a basic idea

about the website and also talks about different functionality of the game. Where 'About' gives a

general description about the developer and website. The diagrams below will depict the technique of

Fancy Box and how the effect of drop shadow highlights the content.


27

Figure 12: ABOUT PAGE

Figure 13: HELP PAGE


28

3.2.2 Home Page

Home page is the initial page which the users see when they visit the website. It has information about

the website and the developer. It navigates the user to the next page. For the Home page I took black

and white as my basic color, as it is more appealing to the users. Usage of multiple colors leads to more

complication and reduces the simplicity of the website. The combined usage of Black-White makes a

contrast that gives out an appealing effect. I decided to make the background color black so that the

text is highlighted when it appears white on the web page. The title of the website is placed in the

middle of the web page. The 'Help' and 'About' button gives a brief description about the website and

game. When the 'START GAME' button is pressed, it takes the user to the next page, which the main

simulator page.

Figure 14: Home Page


29

3.2.3 Simulator Page

This is the main page of the website. Initially, the game is in pause mode, so in order to begin the game

the users need to choose the environment for the cat and the cat is in relaxed state, so the users can

navigate the cat in the free state. The distribution of the about and help page is done according to Fancy

box technique. To detect any element in Java, jQuery uses selector method in which the href link is put

for the image. In this method the anchorTag is called, so whatever the href is defined in it will detect

the element. This technique is used for setting the background of the web page. Below you can see

different screenshots of the simulator page.

Figure 15: Simulation Page Screenshot 1


30

Figure 16: Stimulation Page Screenshot 2

3.3 Structure of The Cat

The cat's image is taken and is broken down into pieces, which serves their own purpose, such as tail,

head and leg movement. The cat's body part is photoshopped and with the help of Html Canvas, the

image rendering is done that sets a frame, which is recalled at 1/30 per second. At every call the image

is changed. Below you can see different images of the cat that depicts its structure.


31

Figure 17: Structures of cat


32

4. IMPLEMENTATION

Since I have followed Agile methodology, the implementation process began at early stage. As

mentioned earlier, I have chosen java as my programming language. This section talks about the

implementation of the technical aspect of the project. It also explains different functionality that’s been

covered in the project.

4.1 Languages Used

As described earlier, all the languages used are explained in detail. Their objectives are described in

detail. Below is the list of the languages and how I have used them in my development process.

1. HTML5: with the help of Html5 'canvas' the rendering of the cat’s image is done in such a way

that the cat’s movement is developed. This markup language has helped in the overall

implementation of the website. The format is decided and the content of the pages are included

with this.

2. CSS: The websites background color is decided and the layout is implemented. For example,

putting the heading in the middle, visual effect on the page, font size and format etc.

3. JavaScript: With the combined usage of JavaScript and Html5 'canvas', the image is recalled

and the key is assigned for the cat’s movement, for example, space for jump etc.

4. Photoshop: This is just used to create different images of the cat and related diagrams to the

project, which are used in the seminar, and this project.

4.2 Cat's Body Movement

The cat can be navigated in the left-right direction. So, in order to move the cat around, the images

need to be loaded, which is done with the help of Html Canvas. The loadImage() function is created

which makes an array of all the images. Each image has a path and name, so with the help of

resourceLoad() function, the images are loaded on canvas and the interval is set for the images to

be called at 30 frame per sec.


33

Figure 18: code Snippet that is responsible for loading image

4.2.1 Left-Right movement

Initially, the cat is loaded in the centre of the page. This is done with the help of redraw() function. This

defines the x and y axis where the character needs to be loaded. In order for the cat to be properly

pixilated, the initial dimension was decided to be 241 pixels by width and 170 pixels by height.

Figure 19: code snippet showing the

When ever the redraw() function is called and it declares whether the left or right button is pressed,

so accordingly the if(leftkey) or if(rightkey)is called. So the cat moves to the left and right,

but when the user takes the cat to extreme left or right, then the cat appears on the other side. So, we

check if the value of charX has gone to negative, we change the value of charX accordingly and make

it equivalent to the width of the window. When the user presses left and right navigation key then the

cat's face direction changes accordingly. This is done with the help of variable catDirection, whose

value is 1 for left and -1 for the right direction.


34

Figure 20: code snippet showing the left and right movement.

4.2.2 Jump Movement

Whenever the redraw() function is called, it declares if space key is pressed to make the cat jump.

The initial value of jumpkey is 'false' so when the user presses the space bar it becomes true and then

the values are checked.

1. The height of the jump is calculated and it shouldn't exceed the maximum height assigned.

2. If the cat's motion is upward or downward. So, accordingly the value is assigned.

3. If the cat is moving from bottom to top then the value of height is incremented.

4. If the cat is moving from top to bottom then the value of height is decremented.

Figure 21: code snippet of jump functionality.


35

4.2.3 Expressions

With redraw() function, there are more functions, which are called in parallel to it. Such as

updatecat(), which is responsible for updating the cat's expression. With the help of jQuery, a code

is assigned to each key, which is called every time it is pressed. There are predefined function

onKeyDown(info) and onKeyUp(info) which helps is determining if the key is pressed or released.

Therefore, the updatecat() takes the output from the predefined function and accordingly updates

the expression of cat. The default value of 'laugh' is false. So, as soon as the key is pressed the value of

laugh changes to true and the expression changes accordingly. The cat’s expression changes every time

the ball hits the cat. So, every two-second the value changes and is set to false.

Figure 22: code snippet of cats expression.


36

4.2.4 Keyboard Control

jQuery predefines two function keyup and keydown, which is executed every time a event is triggered.

Every time the user presses or releases the specified key on the keyboard, the even associated with the

key is executed. When the user releases the key then keyup event is triggered and when the user presses

the key then keydown event is triggered. Every key on the board has a code, which is known to the

program through 'info' property. In order to determine the key that was pressed, jQuery uses the

property of ‘which’ that retrieves the key code and executes the element.

Figure 23: Code snippet of keyboard control.

4.2.5 Flight Time and Ball Movement

Flight time is only calculated when the game has started and when the cat jumps over the ball. The

flight time is static when the cat is in free state. When the user selects the environment for the cat, then

drawball() function is called which loads the ball image on the canvas and is recalled at 1/30 frame

per second. The color of the ball changes when it hits the cat. The ball moves at a specific speed at x-

axis and after the color change, the default color is set when it’s called again.


37

5. TESTING

This section mainly deals with the testing process of the website. This is a very critical part of the

development process. This section talks about the method which is used to check if the functionalities

are met or not and the result of the survey is discussed in detail.

Figure 24: Testing Method

Other than full-filling the functionality, the website was tested for:

1. User Task Analysis: The users can easily learn about the task and they fairly understand its

complexity. The tasks are not prone to any kind of error. There is space for fault tolerance,

so that if a user makes a mistake then it is easily recovered.

2. Readability: The content of the website can be easily understood. The text font is big

enough and the contrast is maintained between the text and the background.

3. Site Navigation: The web pages are perfectly organized and the users can easily navigate

through the contents of the website. It should be easy for the users to perform any specific


38

task.

4. Accessibility and User Experience: The website should be perfectly responsive to all kind

of browsers. The users should be fully satisfied and gain some value after interacting with

the website.

5.1 User Stories

During the development process, testing was done with the help of User-Stories to check if the

functionalities were met or not. User story is usually a short description about the task that briefs the

requirement in a form of story. It is a part of an agile software development methodology. Each story

has a value that gives a brief description about the functionality.

Template: As a <user>, I want <aim> so that <reason>.

The reasons for choosing User Stories as my method for testing are as follows:

ñ It reduces the complexity of project planning.

ñ Having a good structure for the story helps the developer to prioritize the requirement.

ñ The developer can keep track of the progress.

The figure below shows the user-stories that I have build for my project.

Figure 25: User Story part1


39


40



41



42

5.2 Survey

With the help of www.surveymonkey.com, I created an online survey, which I asked the users to go

through after they have monitored my website. 17 people in total took the survey. The main purpose of

the survey was to collect user's view on the website and their overall experience. The survey had 6

questions in total, which dealt with User Task Analysis, Readability, User Experience, Site Navigation

and Accessibility etc.

Question 1: How likely is it that you would recommend www.catsimulator.org to a friend or

colleague?

Review: 47% of the voters strongly chose to recommend the website but there were few detractors as

well.

Figure 28: survey result screenshot


43

Question 2: The content of the website was easily readable?

Review: more than 50% of the voters believed that the content of the website was easily readable.

Figure 29: survey result screenshot for readability.

Question 3: The content of the website was easily accessible?

Review: 50% of the voters believed that it was easy to access the content of the website where as other

half believed that it wasn’t that easy. This shows that the content of the website needs to be distributed

properly.

Figure 30: survey result screenshot for accessibility


44

Question 4: Does the website appear easy to navigate?

Review: More than 60 percent of the voters agree that it was easy to navigate around the website.

Figure 31: survey result screenshot for site navigation.


45

Question 5: Was it easy to perform different tasks in the website?

Review: Almost half the people found it difficult to perform the task; this means that it needs some

improvement so that it is easier for the users to understand the task.

Figure 32: survey result screenshot for task usability.

Question 6: rate your experience as a user?

Review: almost 75% of the voters claimed that the experience was efficient and hardly 10% believed

that it needed any kind of improvement. This shows that users enjoyed the website and had a good

overall experience.

Figure 33: survey result screenshot for user experience


46


47

6. CONCLUSION

This section concludes the report. It talks about the challenges faced during the development process

and any future advancement that can be made to the project.

6.1 Challenges

I faced several challenges that had widely affected my overall progress. From beginning to the end of

development process, there were several changes made in the project as a result of requirement change.

The challenges faced are as follows:

• During the research process the biggest hurdle was to find the apt information regarding the

project.

• Since I am not a professional programmer, it was hard to gather all the knowledge in one go and

implement it in the programming. So, I had to give enough time to myself to understand tools

and techniques related to different programming language.

• Time management was the most difficult challenge out of all. I had to manage my time

efficiently and build a proper balance between the project and other academics.

• The project was based completely on self-work. So, there was lack of motivation which led to

delay in work but with the help of my supervisor, it helped me in overcoming the feeling of

discouragement.

6.2 Lessons Learned

Through out the term time and development process, I have achieved goals that have improved my

technical and as well as personal abilities such as:

• Thoroughly improved my technical skills of building a website and how to make it more

interactive and efficient.

• At a personal level, I have ameliorated my time management and decision making skills.

• Enhanced my knowledge regarding the technical tools such as Html5, jQuery, CSS etc. This has

given me an opportunity to learn more programming language and look beyond my own

abilities.


48

• Through out the term time, I have realized that how 'Change' can be a big factor when you are

working on a project. Accordingly, you have to adapt to the changes and move forward with

your work.

6.3 Future Advancement to the Project

Looking at the current state of the project, it has a lot of potential that it can be build into a more

professional website. There is a space for lot of improvement and changes. It is undeniable that the

project can be evolved beyond its potential. It can be lot more than a simple game. Therefore, the

project can be benefited from its advancement in many ways, such as:

• Many functionalities can be added to the website, such as making the cat run, purr, growl etc.

The cat’s expression can be customized to the users need.

• A new cat (or any other animal) can be added in order to show the interaction between the two

mammals.

• The type of environment can be added to show the cats reaction to it.

• The user can be asked to sign up so that they can talk with other users and share their beliefs.

This is way of making a cat community and spreading awareness.

6.4 Summary

It was a vulnerable experience while working on the third year project. It has improved my knowledge

by enhancing the technical and theoretical aspect of computer science. Therefore, there is space for

constant improvement and multiple functionalities that could still be implemented in order to order to

enhance its overall outlook.


49

7. BIBLIOGRAPHY

• http://www.animalport.com/cats.html, Animal Port, Complete animal portal, Cats.

[Accessed on: 28th March 2015]

• Barbara Elisse Najar, Dogs and cats can usually deal with the heat, but their owners

must be careful, The Washington Post, 2012.

http://www.washingtonpost.com/national/health-science/dogs-and-cats-can-usually-

deal-with-the-heat-but-their-owners-must-be-

careful/2012/07/09/gJQAlOqtYW_story.html [Accessed on: 29th March 2015]

• Adriane Bishko, Healthy Cats: What Your Cat's Body Language Is Saying, WebMD Pet

Health Feature, http://pets.webmd.com/cats/features/cat-body-language, [Accessed on:

2nd April 2015]

• http://www.hillspet.com/cat-care/tales-cat-tail-tells-ktn.html, The tales the cat tail tells,

[Accessed on: 28th April 2015]

• https://www.aspca.org/pet-care/virtual-pet-behaviorist/cat-behavior/cats-who-play-

rough, Pet Care: Cats Who Play Rough, [Accessed on: 21st April 2015]

• http://www.webopedia.com/TERM/J/Java.html, Webopedia: Java, [Accessed on: 5th

April 2015]

• http://www.freejavaguide.com/history.html, History of Java programming

language,[Accessed on: 10th April 2015]

• James Gosling, Bill Joy, Guy Steele, Gilad Bracha; The Java Language Specification,

2015, 8th Edition, https://docs.oracle.com/javase/specs/jls/se8/jls8.pdf, [Accessed on:

15th April 2015]

• http://java.about.com/od/gettingstarted/a/whatisjava.htm, About Tech: What is Java?


• http://wiki.tcl.tk/13398, wiki: Advantages and Disadvantages of OOP, [Accessed on:

28th April 2015]

• http://en.wikipedia.org/wiki/XML, Wikipedia – Extensible Markup Language,


• Chris Collins, A Brief History of XML, 2008,


50

https://ccollins.wordpress.com/2008/03/03/a-brief-history-of-xml/, [Accessed on: 23rd

April 2015]

• http://www.jkp-ads.com/Articles/XMLAndExcel02.asp , JKP – Characterstics of xml,


• Jason Aiken, The 3 Main Characteristics of XML Authoring, 2013,

http://www.terraxml.com/community/blog/bid/329742/The-3-Main-Characteristics-of-

XML-Authoring, [Accessed on: 11th April 2015]

• Dr. Herong Yang, XML Tutorials – Introduction of XML, 2015, Version 5.00,

http://www.herongyang.com/XML/Introduction-Main-Features-of-XML.html,


• http://xml.coverpages.org/xsl.html, Cover Pages- Extensible Stylesheet Language,

[Accessed on: 3rd May 2015]

• Sharon Adler. Et al., Extensible Stylesheet Language, 2001, Version 1.0,

http://www.w3.org/TR/2001/REC-xsl-20011015/slice1.html#section-N629-

Introduction-and-Overview, [Accessed on: 4th April 2015]

• http://www.networksolutions.com/education/css-web-design-advantages/, Network

Solutions – 5 Advantages of CSS Web Design, [Accessed on: 4th April 2015]

• http://www.itinfo.am/eng/software-development-methodologies/, itinfo – Software

Development Methodologies, [Accessed on: 22nd April 2015]

• Penna Sparrow, Client Server Network: Advantages and Disadvantages,

http://www.ianswer4u.com/2011/05/client-server-network-advantages-

and.html#axzz3XQNwShIh, [Accessed on: 5th May 2015]

• http://searchnetworking.techtarget.com/definition/peer-to-peer, SearchNetworking –

Peer-To-Peer (P2P) Definition,[Accessed on: 17th April 2015]

• ND Liyanage, Client/Server Architecture – Advantages and Disadvantages of the

architecture, 2013, http://clientserverarch.blogspot.co.uk/2013/03/advantages-and-

disadvantages-of.html, [Accessed on: 17th April 2015]

• Tony Marston, What is the 3-Tier Architecture,

2012,http://www.tonymarston.co.uk/php-mysql/3-tier-architecture.html#3-tier,


• http://whatis.techtarget.com/definition/model-view-controller-MVC, Techtarget –

model-view-Controller (MVC), [Accessed on: 9th April 2015]


51

• http://guide.agilealliance.org/guide/timebox.html, Agile Alliance – Timebox, [Accessed

on: 5th April 2015]

• https://moodle.cs.man.ac.uk/file.php/267/Handouts/UserStories/userStoriesHandout2014

.pdf, User stories, [Accessed on: 1st April 2015]

• http://scrummethodology.com/the-agile-manifesto-and-twelve-principles/, Scrum

Methodology – The Agile Manifesto and Twelve Principles,[Accessed on: 29th April

2015]

• Figure 1, Figure 2, Figure 3: http://www.scirra.com/arcade/action/6515/being-a-cat-

simulator

• Figure 5: http://www.iraqtimeline.com/maxdesign/basicdesign/principles/princss.html

• Figure 6: http://www.greenlinesystems.com/agile-software-development/

• Figure 7: http://en.kioskea.net/contents/151-networking-3-tier-client-server-architecture

• Figure 8: http://www.enggpedia.com/computer-engineering-

encyclopedia/dictionary/computer-networks/1621-client-server-vs-peer-to-peer-

networks

• Figure 9:

http://en.wikipedia.org/wiki/Iterative_and_incremental_development#/media/File:Iterati

ve_development_model.svg

dissertaion-new 8722742

Documents