S A A T (S.A.A.T.)

wakecabbagepatchSoftware and s/w Development

Nov 18, 2013 (3 years and 11 months ago)

123 views

S
ORTING

A
LGORITHM

A
NIMATION

T
UTOR

(S.A.A.T.)

Tristan Trumbla

I
NTRODUCTION


There

are

many

times

that

a

computer

science

student

will

need

to

use

a

sorting

algorithm

that

they

may

not

understand

fully

or

may

not

be

familiar

with

at

all
.

There

are

many

mediums

used

by

these

students

to

help

them

grasp

the

concept

of

a

particular

sorting

algorithm
.

Many

of

these

students

will

turn

to

the

internet

to

find

the

information

they

need
.

Many

sorting

algorithm

tutorials

found

on

the

web

today

only

offer

text
-
based

information

to

explain

the

concept
.

This

project

offers

a

web
-
based

visual

learning

environment

for

people

looking

to

learn

about

sorting

algorithms

but

learn

best

with

visual

representations
.


A
BSTRACT


The

internet

is

a

very

useful

tool

to

learn

various

different

subjects
.

The

developed

software

for

this

project

provides

a

visual

learning

experience

for

students

looking

to

learn

about

sorting

algorithms

in

a

simple,

easy

to

use

web
-
based

format
.

The

software

can

also

be

used

by

instructors

to

give

their

students

a

visual

aid

to

help

them

understand

the

concept

of

various

sorting

algorithms
.

This

differs

from

many

other

sorting

algorithm

tutorials

that

present

information

with

no

visual

aids

leaving

it

up

to

the

user

to

visualize

how

the

algorithms

work
.

The

expected

result

is

that

the

software

will

be

able

to

provide

a

visual

representation

of

various

sorting

algorithms

that

will

allow

visual

learners

an

easier

way

to

learn

how

sorting

algorithms

work
.


M
ETHODOLOGY


As

the

project

was

constructed

the

integrated

applet

was

developed

with

an

object

oriented

approach

using

the

Java

programming

language
.

The

user

interface

website

was

developed

using

a

structured

approach

in

HTML

and

CSS
.

The

step

by

step

examples

were

developed

using

Adobe

Flash

and

Action

Script

3
.
0
.

The

HTML,

CSS,

and

Java

files

were

all

constructed

using

TextPad
.

The

Flash

and

Action

Script

3
.
0

were

created

using

Adobe

Flash

Professional

CS
6
.

The

final

product

was

tested

with

Google

Chrome,

Microsoft

Internet

Explorer,

and

Mozilla

Firefox

browsers
.


U
SE

C
ASE

S
CENARIO

Running a sorting algorithm

1.
The user navigates to the website.

2.
The user selects an algorithm from the menu to run.

3.
The system displays the chosen sorting algorithms user
interface.

4.
The system displays a short animation of the sort chosen. (Java)
e.g. Heapsort

5.
The system displays a description of the sort chosen.

6.
The system displays a step by step animation in which the user
progresses through at their own pace.

7.
The system displays the sorting algorithms performance details.

8.
The user can select a different algorithm from the menu or exit.

I
MPLEMENTATION


The software currently runs in my personal space on the NSU
Arapaho web server. The software for this project consists of four
modules. The user interface module was implemented in HTML and
CSS using TextPad. This module uses the CSS file to keep a
consistent look and feel to the main HTML pages. This enables the
user to navigate the system easily. The main module is the sorting
module which was implemented in Java using TextPad. Each sorting
algorithm has its own methods that are called. An example for
Heapsort is shown in Figure 4.1 and a code segment for creating the
heap can be found in Figure 3.1. The whole sorting component is
implemented using the “factory” method so that the client (Sort class)
is completely decoupled from the sorting algorithms. The step by step
module (Figure 2.1) was implemented using Adobe Flash Professional
CS6 and Action Script 3.0. This module enables the user to step
through the algorithms to gain a better understanding. The structure
for this can be found in Figure 4.1. The final module is the sorting
graph display found in Figure 1.1. This module consists of one method
with two sub
-
methods. First makeSortDisplay( ) is called which in
turn calls getArraySize( ) and display( ). A code segment for display( )
can be found in Figure 1.2. The structure for this module is found in
Figure 4.1.


F
IGURE

1.1 F
IGURE

1.2

Java animation for
Heapsort.














Java code segment
for Heapsort.

F
IGURE

2.1

Flash animation
for Heapsort.

S
TRUCTURE

C
HART


H
EAPSORT

F
IGURE

4.1

makeSortDisplay

Sorting Graph
Display
(Figure 1.1)

Flash Graphics

(Figure 2.1)

reset

next

back

Step by Step
Illustration

sort

downheap

(Figure 3.1)

Heapsort
Algorithm

User Interface

display

(Figure 1.2)

getArraySize

Action Script

C
LASS

D
IAGRAM


D
ISPLAY

S
TRATEGY


BarSortDisplay
Class

StaticSortDisplayFactory
Class

SortDisplayFactory
Interface

SortDisplay
Interface

Sort2 Class

Sort Class

theDisplay

displayFactory

Creates

C
LASS

D
IAGRAM


A
LGORITHM

S
TRATEGY


MergeSortAlgorithm
Class

sort( )

HeapSortAlgorithm
Class

sort( )

QuickSortAlgorithm
Class

sort( )

BubbleSortAlgorithm
Class

sort( )

StaticAlgoFactory
Class

makeSortAlgorithm( )

AlgorithmFactory
Interface

makeSortAlgorithm( )

SortAlgorithm Class

sort( )

Sort Class

algorithm( )

AlgorithmAnimation
Class

algorithm( )

theAlgorithm

animator

Creates

algorithmFactory

C
ONCLUSION


By implementing this system, people will have a tutorial on
sorting algorithms that provides both text
-
based information
as well as a visual representation of various sorting
algorithms. This allows for people of all learning styles to have
and effective medium for learning sorting algorithms. The
code for this system is laid out in a way that allows easy
implementation of more sorting algorithms. The original
objectives have been achieved but future work on this project
will include a few different things. First of all, I would like to
show the array values on the visual representation so that the
user can see the data being used. I would also like to add
several more sorting algorithms to the system. Also, I would
like the step by step visuals to be linked to the Java code
instead of it being a manual walk through.