Skip to content

Commit 331d8c1

Browse files
lee-naishlee-naish
committed
projects file
1 parent 741b9a7 commit 331d8c1

File tree

2 files changed

+195
-0
lines changed

2 files changed

+195
-0
lines changed

‎addNewAlgorithm.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const rl = readline.createInterface({
2020

2121
let algName;
2222
let algID;
23+
let algCat = 'Sort'; // XXX Need to input this also
2324
console.log("What's the name of your new algorithm used in menus etc, eg 2-3-4 Tree? ");
2425

2526
rl.on('line', (line) => {
@@ -43,10 +44,14 @@ let doIt = (algName, algID) => {
4344
console.log("");
4445
console.log("To add algorithm named " + algName + " with ID " + algID + ":");
4546
console.log("Execute the following commands from the AIA repository directory:");
47+
console.log("");
48+
console.log("git switch +c add_" + algID);
49+
console.log("# When stable, do git switch <development branch>; git merge add_" + algID);
4650
console.log("cp src/algorithms/controllers/heapSort.js src/algorithms/controllers/" + algID + ".js");
4751
console.log("git add src/algorithms/controllers/" + algID + ".js");
4852
console.log("cp src/algorithms/pseudocode/heapSort.js src/algorithms/pseudocode/" + algID + ".js");
4953
console.log("git add src/algorithms/pseudocode/" + algID + ".js");
54+
console.log("# The files above will need to be edited during development" + algID + ".js");
5055
console.log("echo \"export { default as " + algID + "} from './" + algID + "'\" >> src/algorithms/controllers/index.js");
5156
// XXX + other index.js files, explanations, extra-info, edit instructions
5257
console.log("");

‎projects.md‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
# Algorithms in Action Projects
2+
3+
Here we describe possible projects for extending the [Algorithms in
4+
Action](https://dev-aia.vercel.app/mainmenu) algorithm animation system
5+
in semester 2, 2025,
6+
with the clients [Lee Naish](https://lee-naish.github.io/) and Linda
7+
Stern. AIA was developed for the purposes of teaching computer science
8+
algorithms. It features animation, pseudocode, and textual explanations,
9+
run in coordinated fashion. A key feature of AIA, not found in other
10+
algorithm animations, is that students can view an algorithm at varying
11+
levels of detail. Starting with a high level pseudocode description
12+
of the algorithm, with accompanying high level animation and textual
13+
explanation, students can expand sections of the pseudocode to expose more
14+
detail. Animation and explanation are controlled in coordinate fashion,
15+
becoming correspondingly more detailed as the pseudocode is expanded.
16+
17+
The current implementation is primarily written in JavaScript, using
18+
the popular Node.js/React framework. It has been coded primarily
19+
by students over several years and more recently Lee Naish has
20+
done some coding also. It is open-source with the code in a [github
21+
repository](https://github.com/algorithms-in-action/algorithms-in-action.github.io).
22+
The following projects aim to enhance and extend AIA. Students
23+
participating in these projects will be contributing to a good open-source
24+
teaching and learning tool while getting valuable software engineering
25+
experience. We have had excellent feedback from previous groups who have
26+
made contributions to AIA. As clients, we need to have good communication
27+
with groups. In developing algorithm animations we don't always have a
28+
precise idea of what will work best at the outset - often it is good to
29+
see a prototype and then give feedback on how it can be improved. There
30+
are also some aspects we want control over, such as the details of the
31+
pseudocode. Finally, we want multiple projects to be merged into a single
32+
AIA version by the end of semester, so the way things are coordinated
33+
in the github repository throughout the semester is important.
34+
35+
## 1. Global Issues
36+
37+
This project addresses several desirable enhancements to AIA that affect
38+
multiple algorithms. Some are related to making future development of the
39+
code easier, for example, adding new algorithms modules. Others concern
40+
the function of AIA.
41+
42+
### Simplifying addition of new algorithms
43+
44+
This is the first task to tackle. The aim is to get at least a simple
45+
version of this working quickly and committed to the repository to help
46+
the teams that are adding new algorithms. Later it can be refined further
47+
if needed, preferably in a way that does not impact the other teams. There
48+
are two main components to this. This first is to rationalise the
49+
multiple lists of algorithms that appear in the code. The second is to
50+
complete some simple code that helps with some tedious aspects.
51+
52+
#### Lists of algorithms in the code
53+
54+
Once in AIA there was a single master list of algorithms that had all the
55+
required information. Sadly, some modifications to the system resulted
56+
in four separate lists, each with slightly different information etc,
57+
and each of which needs to be edited for each new algorithm. The single
58+
list design is what we want; the other lists should be generated from
59+
the master list.
60+
61+
#### Reducing tedium in adding new algorithms
62+
63+
To add a new algorithm, several new files must be created (eg, for
64+
the animation code, the pseudocode and extra information) and entries
65+
must be added to numerous lists. We have prototype JavaScript code that
66+
inputs the algorithm name and a unique identifier to be used in code and
67+
outputs unix commands to create files, append to files and instructions
68+
about what code to add to other files, allowing lots of copy and paste
69+
rather than tedious typing. This prototype should be completed.
70+
71+
### Algorithm menus
72+
73+
The main AIA page has a list of algorithms, divided into categories, but
74+
depending on the window size and font size, some may not be visible. This
75+
must be fixed. Also, due to the way the formatting is done, adding new
76+
algorithms can be a nightmare. Finally, there is a search function
77+
that relies on algorithm names but ideally it should support keywords
78+
associated with each algorithm.
79+
80+
### Colors
81+
82+
The way colors have been implemented in AIA has changed over time to
83+
improve flexibility (eg, color choice) and consistency (eg, between
84+
colors of array elements, graph/tree nodes and edges). Some primitives
85+
have been added for flexible coloring of arrays and similar primitives
86+
should be implemented for graphs. It may be worthwhile retro-fitting
87+
the more flexible primitives to existing animation code and deleting
88+
some legacy code.
89+
90+
A second issue is the choice of different color palettes supported in
91+
AIA. The intention is for AIA to be accessible to those with different
92+
color perception. Some of the more recent color choices should be
93+
re-visited with this in mind. Also, there are some uses of color in AIA
94+
that don't vary when different color palettes are selected; ideally this
95+
should not be the case.
96+
97+
### Specialised URLs
98+
99+
AIA uses specialised URLS to allowing links to a particular algorithm with
100+
particular input. However, not all options etc can be specified with
101+
URLS, similarly for the step of the algorithm execution and expansion
102+
of pseudocode. It would be desirable to extend the URL mechanism to
103+
specify more information.
104+
105+
## 2. Binary search tree variants
106+
107+
XXX
108+
109+
## 3. Linked list merge sort
110+
111+
Currently AIA has algorithm animations that visualise arrays, various
112+
forms of trees and graphs but none that visualise linked lists. This
113+
project will add linked list visualisation to AIA, initially using a
114+
version of merge sort. There should also be consideration of how the
115+
code could be used or adapted to other linked list algorithms (some of
116+
which may also be completed in this project).
117+
118+
### Prototype merge sort for lists
119+
120+
AIA has a prototype of merge sort for lists implemented (it doesn't
121+
appear in the menus but can be found from the main page via the search
122+
function). The pseudocode is written so it is independent of the way lists
123+
are represented, and should not be changed in this project. Some steps of
124+
the execution are not animated and these need to be filled in. However,
125+
the main job is to change the way lists are visualised. In the prototype,
126+
lists are represented using two arrays: one for the data (the head of each
127+
list) and another for the "next pointers" (the tail of each list). Thus
128+
**head[i]** together with **tail[i]** represent the two components of a
129+
single list cell. Instead of a pointer to a list cell we use the index
130+
of the arrays that represents the next list cell (so the integer **i**
131+
represents a pointer to the list cell described above). Empty lists are
132+
represented by "Null".
133+
134+
### Preferred visualisation of linked lists
135+
136+
Linked lists are better represented by either some symbol that represents
137+
the empty list or an arrow that points to a box that is divided into
138+
two parts (or two boxes that are joined). The first will contain the
139+
list elements and the second will contain the empty list symbol or
140+
an arrow to the next list cell. AIA contains a module that implements
141+
graphs, including various forms of trees, and this has similar visual
142+
elements. Extending it to support lists seems like the best solution.
143+
144+
### Visualisation in merge sort
145+
146+
Exactly how the algorithm is visualised will be determined in consultaion
147+
with the clients, who have some ideas but these may change as prototypes
148+
are developed. For example, a key operation in mergesort is merging two
149+
sorted lists **L* and **R** to form a new list **M**. The two input lists
150+
could each be displayed horizontally, one above the other. All arrows
151+
would point to the right. As the merge operation proceeds, the list cells
152+
could remain in the same positions but the arrows and labels such as **L**
153+
and **R** could change (helping illustrate that the algorithm changes pointers
154+
but not the data in list cells). Arrows may then point right, up, down or
155+
diagonally. At the end of the merge operation the resulting list **M**
156+
could be re-rendered horizontally for clarity, with all arrows pointing
157+
to the right again.
158+
159+
160+
161+
## 4. Convex Hull
162+
163+
Currently AIA has no geometric algorithm animations. This project will
164+
add an animation of a two dimensional convex hull algorithm animation (or
165+
more if time permits), which is particularly amenable to visualisation:
166+
the "Jarvis March" or "gift wrapping" algorithm. Given a set of points
167+
in two dimensions, the convex hull is the smallest convex polygon that
168+
contains all points. If you think of each point being a nail sticking
169+
out of a board, the algorithm is analogous to tying a string to the
170+
leftmost nail, pulling the string tight and wrapping it around the
171+
collection of nails until it touches reaches the leftmost nail again.
172+
In three dimensions it is like wrapping paper around the points, hence
173+
"gift wrapping". There are optimisations to this algorithm and several
174+
other more efficient convex hull algorithms that could be tackled.
175+
176+
### Visualisation in AIA
177+
178+
We anticipate the existing AIA modules for visualising graphs will be
179+
sufficient for animating conxex hull algorithms with little or no
180+
modifications. The points can be depicted by graph nodes and the string
181+
can be depicted by graph edges. We may want to adjust the size of nodes
182+
and write new code to generate random inputs to the algorithm. Also,
183+
AIA animations currently do not do "tweening" for graph edges (smooth
184+
movement between two different edge positions). If this could be
185+
implemented it would be beneficial and could also be retro-fitted to
186+
other algorithms.
187+
188+
## 4. Simple sorting algorithms
189+
190+
XXX (lowest priority - CH better???)

0 commit comments

Comments
 (0)