Skip to content

Commit d78f48e

Browse files
Rishav159Rishav159
committed
Updated
1 parent 9fd4613 commit d78f48e

File tree

7 files changed

+208
-114
lines changed

7 files changed

+208
-114
lines changed

‎3-Solving-Problems-By-Searching/c_breadthFirstSearch.js‎

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,48 @@
11
$(document).ready(function() {
22
var w = 600,
33
h = 350;
4-
var DELAY = 2000;
54
var intervalFunction = null;
65

76
function init() {
8-
clearInterval(intervalFunction, DELAY);
9-
var graph = new DefaultGraph();
10-
var graphProblem = new GraphProblem(graph.nodes, graph.edges, 'A', 'A');
11-
var graphAgent = new GraphAgent(graphProblem);
127
var options = new DefaultOptions();
138
options.nodes.next.fill = 'hsla(126, 100%, 69%, 1)';
14-
var graphDrawAgent = new GraphDrawAgent(graphProblem, 'breadthFirstSearchCanvas', options, h, w);
15-
var queueDrawAgent = new QueueDrawAgent('fifoQueueCanvas', h, w, graphProblem, options);
16-
//Update handler is the function that would be executed every DELAY ms.
17-
var updateFunction = function() {
18-
if (graphProblem.frontier.length > 0) {
19-
var nextNode = breadthFirstSearch(graphProblem);
20-
graphAgent.expand(nextNode);
21-
//If frontier is still present, find the next node to be expanded so it
22-
//could be colored differently
9+
10+
var drawState = function(n) {
11+
var graph = new DefaultGraph();
12+
var graphProblem = new GraphProblem(graph.nodes, graph.edges, 'A', 'A');
13+
var graphAgent = new GraphAgent(graphProblem);
14+
15+
var graphDrawAgent = new GraphDrawAgent(graphProblem, 'breadthFirstSearchCanvas', options, h, w);
16+
var queueDrawAgent = new QueueDrawAgent('fifoQueueCanvas', h, w, graphProblem, options);
17+
18+
while (n--) {
2319
if (graphProblem.frontier.length > 0) {
24-
graphProblem.nextToExpand = breadthFirstSearch(graphProblem);
20+
var nextNode = breadthFirstSearch(graphProblem);
21+
graphAgent.expand(nextNode);
22+
//If frontier is still present, find the next node to be expanded so it
23+
//could be colored differently
24+
if (graphProblem.frontier.length > 0) {
25+
graphProblem.nextToExpand = breadthFirstSearch(graphProblem);
26+
} else {
27+
graphProblem.nextToExpand = null;
28+
}
2529
} else {
26-
graphProblem.nextToExpand = null;
30+
break;
2731
}
28-
graphDrawAgent.iterate();
29-
queueDrawAgent.iterate();
30-
} else {
31-
clearInterval(intervalFunction, DELAY);
3232
}
33+
graphDrawAgent.iterate();
34+
queueDrawAgent.iterate();
3335
}
34-
intervalFunction = setInterval(updateFunction, DELAY);
36+
37+
let ac = new AnimationController({
38+
selector: '#bfsAC',
39+
min: 0,
40+
max: 15,
41+
renderer: drawState
42+
});
43+
ac.renderFirst();
3544
};
45+
3646
$('#bfsRestartButton').click(init);
3747
$('#fifoWaiting').css('background-color', 'hsl(0,50%,75%)');
3848
$('#fifoNextNode').css('background-color', 'hsl(126, 100%, 69%)');

‎3-Solving-Problems-By-Searching/c_depthFirstSearch.js‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,43 @@ $(document).ready(function() {
55
var intervalFunction = null;
66

77
function init() {
8-
clearInterval(intervalFunction, DELAY);
9-
var graph = new DefaultGraph();
10-
var graphProblem = new GraphProblem(graph.nodes, graph.edges, 'A', 'A');
11-
var graphAgent = new GraphAgent(graphProblem);
128
var options = new DefaultOptions();
139
options.nodes.next.fill = 'hsla(126, 100%, 69%, 1)';
14-
var graphDrawAgent = new GraphDrawAgent(graphProblem, 'depthFirstSearchCanvas', options, h, w);
15-
var queueDrawAgent = new QueueDrawAgent('lifoQueueCanvas', h, w, graphProblem, options);
16-
var updateFunction = function() {
17-
if (graphProblem.frontier.length > 0) {
18-
var nextNode = depthFirstSearch(graphProblem);
19-
graphAgent.expand(nextNode);
20-
//If frontier is still present, find the next node to be expanded so it
21-
//could be colored differently
10+
11+
var drawState = function(n) {
12+
var graph = new DefaultGraph();
13+
var graphProblem = new GraphProblem(graph.nodes, graph.edges, 'A', 'A');
14+
var graphAgent = new GraphAgent(graphProblem);
15+
16+
var graphDrawAgent = new GraphDrawAgent(graphProblem, 'depthFirstSearchCanvas', options, h, w);
17+
var queueDrawAgent = new QueueDrawAgent('lifoQueueCanvas', h, w, graphProblem, options);
18+
19+
while (n--) {
2220
if (graphProblem.frontier.length > 0) {
23-
graphProblem.nextToExpand = depthFirstSearch(graphProblem);
21+
var nextNode = depthFirstSearch(graphProblem);
22+
graphAgent.expand(nextNode);
23+
//If frontier is still present, find the next node to be expanded so it
24+
//could be colored differently
25+
if (graphProblem.frontier.length > 0) {
26+
graphProblem.nextToExpand = depthFirstSearch(graphProblem);
27+
} else {
28+
graphProblem.nextToExpand = null;
29+
}
2430
} else {
25-
graphProblem.nextToExpand = null;
31+
break;
2632
}
27-
graphDrawAgent.iterate();
28-
queueDrawAgent.iterate();
29-
} else {
30-
clearInterval(intervalFunction, DELAY);
3133
}
34+
graphDrawAgent.iterate();
35+
queueDrawAgent.iterate();
3236
}
33-
intervalFunction = setInterval(updateFunction, DELAY);
37+
38+
let ac = new AnimationController({
39+
selector: '#dfsAC',
40+
min: 0,
41+
max: 15,
42+
renderer: drawState
43+
});
44+
ac.renderFirst();
3445
};
3546
$('#dfsRestartButton').click(init);
3647
$('#lifoWaiting').css('background-color', 'hsl(0,50%,75%)');

‎3-Solving-Problems-By-Searching/c_uniformCostSearch.js‎

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -20,45 +20,51 @@ $(document).ready(function() {
2020
}).appendTo(exploredQueueCanvas);
2121
//Intial value for separation is 0
2222
$('.ucsSeparation').html(0);
23-
var graph = new DefaultGraph();
24-
//Precompute costs of all nodes from the initial node
2523
var costMap = precomputedCosts();
26-
var graphProblem = new GraphProblem(graph.nodes, graph.edges, 'A', 'A');
27-
//Change the text of all the nodes to its cost
28-
for (key in graphProblem.nodes) {
29-
graphProblem.nodes[key].text = costMap[graphProblem.nodes[key].id];
30-
}
31-
var graphAgent = new GraphAgent(graphProblem, 'ucs');
24+
3225
var options = new DefaultOptions();
3326
options.nodes.next.fill = 'hsla(126, 100%, 69%, 1)';
3427
options.edges.showCost = true;
35-
var graphDrawAgent = new GraphDrawAgent(graphProblem, 'uniformCostSearchCanvas', options, h, w);
36-
drawList(priorityTwo, graphProblem.frontier, graphProblem, options, costMap);
37-
drawList(exploredTwo, graphProblem.explored, graphProblem, options, costMap);
38-
var updateFunction = function() {
39-
if (graphProblem.frontier.length > 0) {
40-
var nextNode = uniformCostSearch(graphProblem);
41-
graphAgent.expand(nextNode);
28+
29+
var drawState = function(n) {
30+
var graph = new DefaultGraph();
31+
var graphProblem = new GraphProblem(graph.nodes, graph.edges, 'A', 'A');
32+
var graphAgent = new GraphAgent(graphProblem);
33+
for (key in graphProblem.nodes) {
34+
graphProblem.nodes[key].text = costMap[graphProblem.nodes[key].id];
35+
}
36+
37+
var graphDrawAgent = new GraphDrawAgent(graphProblem, 'uniformCostSearchCanvas', options, h, w);
38+
var maxCost;
39+
while (n--) {
4240
if (graphProblem.frontier.length > 0) {
43-
graphProblem.nextToExpand = uniformCostSearch(graphProblem);
41+
var nextNode = uniformCostSearch(graphProblem);
42+
graphAgent.expand(nextNode);
43+
//If frontier is still present, find the next node to be expanded so it
44+
//could be colored differently
45+
if (graphProblem.frontier.length > 0) {
46+
graphProblem.nextToExpand = uniformCostSearch(graphProblem);
47+
maxCost = graphProblem.nodes[graphProblem.nextToExpand].cost;
48+
} else {
49+
graphProblem.nextToExpand = null;
50+
}
4451
} else {
45-
graphProblem.nextToExpand = null;
46-
}
47-
graphDrawAgent.iterate();
48-
drawList(priorityTwo, graphProblem.frontier, graphProblem, options, costMap);
49-
drawList(exploredTwo, graphProblem.explored, graphProblem, options, costMap);
50-
let maxCost = 0;
51-
//Find the max cost which separates the explored from frontier nodes
52-
if (graphProblem.nextToExpand) {
53-
maxCost = graphProblem.nodes[graphProblem.nextToExpand].cost;
52+
break;
5453
}
55-
//Draw it in the front end
56-
$('.ucsSeparation').html(maxCost);
57-
} else {
58-
clearInterval(intervalFunction, DELAY);
5954
}
55+
graphDrawAgent.iterate();
56+
drawList(priorityTwo, graphProblem.frontier, graphProblem, options, costMap);
57+
drawList(exploredTwo, graphProblem.explored, graphProblem, options, costMap);
58+
//Draw it in the front end
59+
$('.ucsSeparation').html(maxCost);
6060
}
61-
intervalFunction = setInterval(updateFunction, DELAY);
61+
let ac = new AnimationController({
62+
selector: '#ucsAC',
63+
min: 0,
64+
max: 15,
65+
renderer: drawState
66+
});
67+
ac.renderFirst();
6268
};
6369
$('#ucsRestartButton').click(init);
6470
$('#ucsWaiting').css('background-color', 'hsl(0,50%,75%)');
@@ -81,7 +87,6 @@ function drawList(two, list, problem, options, costMap) {
8187
let text = two.makeText(costMap[node.id], x, y);
8288
let fillColor = options.nodes[state].fill;
8389
circle.fill = fillColor;
84-
8590
}
8691
two.update();
8792
}

‎3-Solving-Problems-By-Searching/index.html‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.min.js"></script>
1111
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
1212

13+
<script type="text/javascript" src="../globalHelpers.js"></script>
1314
<script type="text/javascript" src="./helpers.js"></script>
1415
<script type="text/javascript" src="./gitter-grid.js"></script>
1516
<script type="text/javascript" src="./aStarSearch.js"></script>
@@ -111,10 +112,11 @@ <h2>Breadth First Search</h2>
111112
</div>
112113
</div>
113114

114-
<div class="row">
115+
<div class="row" id='bfsDiagram'>
115116
<div class="col-sm-6 col-md-6">
116-
<div class='btn btn-primary' id='bfsRestartButton'>Restart</div>
117-
<div class="canvas" id="breadthFirstSearchCanvas" height="300px">
117+
<div class="row" id='bfsAC'></div>
118+
<div class="row">
119+
<div class="canvas" id="breadthFirstSearchCanvas" height="300px"></div>
118120
</div>
119121
</div>
120122
<div class="col-sm-6 col-md-6">
@@ -135,6 +137,7 @@ <h4>FIFO Queue</h4>
135137
</div>
136138
</div>
137139
</div>
140+
138141
<div class="row">
139142
<div class="col-md-6 col-sm-6">
140143
<h2>Depth First Search</h2>
@@ -145,10 +148,11 @@ <h2>Depth First Search</h2>
145148
</div>
146149
</div>
147150

148-
<div class="row">
151+
<div class="row" id='dfsDiagram'>
149152
<div class="col-sm-6 col-md-6">
150-
<div class='btn btn-primary' id='dfsRestartButton'>Restart</div>
151-
<div class="canvas" id="depthFirstSearchCanvas" height="300px">
153+
<div class="row" id='dfsAC'></div>
154+
<div class="row">
155+
<div class="canvas" id="depthFirstSearchCanvas" height="300px"></div>
152156
</div>
153157
</div>
154158
<div class="col-sm-6 col-md-6">
@@ -238,10 +242,11 @@ <h2>Uniform Cost Search</h2>
238242
</div>
239243
</div>
240244

241-
<div class="row">
245+
<div class="row" id='ucsDiagram'>
242246
<div class="col-sm-6 col-md-6">
243-
<div class='btn btn-primary' id='ucsRestartButton'>Restart</div>
244-
<div class="canvas" id="uniformCostSearchCanvas" height="300px">
247+
<div class="row" id='ucsAC'></div>
248+
<div class="row">
249+
<div class="canvas" id="uniformCostSearchCanvas" height="300px"></div>
245250
</div>
246251
</div>
247252
<div class="col-sm-6 col-md-6">
@@ -378,12 +383,12 @@ <h2>Bi-directional BFS</h2>
378383
<div class="col-md-6">
379384
<h2 style="text-align:center;">Bi-directional BFS</h2>
380385
<div class="canvas" id='biCanvas' height="300px"></div>
381-
<h1 id = 'biStepCount' style="text-align:center;margin-top:0%;"></h1>
386+
<h1 id='biStepCount' style="text-align:center;margin-top:0%;"></h1>
382387
</div>
383388
<div class="col-md-6">
384389
<h2 style="text-align:center;">Standard BFS</h2>
385390
<div class="canvas" id='bfsCanvas' height="300px"></div>
386-
<h1 id = 'bfsStepCount' style="text-align:center;margin-top:0%;"></h1>
391+
<h1 id='bfsStepCount' style="text-align:center;margin-top:0%;"></h1>
387392
</div>
388393
</div>
389394
</div>

‎6-Constraint-Satisfaction-Problems/c_backtracking.js‎

Lines changed: 9 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -97,30 +97,14 @@ class BacktrackingDiagram {
9797
//Run the algorithm and record frames
9898
this.recordFrames(heuristics);
9999
this.addAssignmentTable(this.backtracker.variables);
100-
//Attach listener to the sliders and buttons
101-
let sliderElement = this.selector.select('#backtrackSlider');
102-
this.selector.select('.prevButton').on('mousedown', () => {
103-
let value = parseInt(sliderElement.property('value'));
104-
if (value > 0) {
105-
value -= 1;
106-
}
107-
sliderElement.property('value', value).dispatch('input');
108-
});
109-
this.selector.select('.nextButton').on('mousedown', () => {
110-
let value = parseInt(sliderElement.property('value'));
111-
if (value < this.frames.length - 1) {
112-
value += 1;
113-
}
114-
sliderElement.property('value', value).dispatch('input');
100+
//Create AnimationController
101+
let ac = new AnimationController({
102+
selector: '#backtrackingAC',
103+
min: 0,
104+
max: this.frames.length - 1,
105+
renderer: (n) => this.loadFrame(n)
115106
});
116-
sliderElement.attr('max', this.frames.length - 1)
117-
.property('value', 0)
118-
.on('input', () => {
119-
let frameIndex = parseInt(sliderElement.property('value'));
120-
this.loadFrame(this.frames[frameIndex], frameIndex);
121-
});
122-
//Load the first frame
123-
this.loadFrame(this.frames[0], 0);
107+
ac.renderFirst();
124108
}
125109

126110
addNewMap(assignment) {
@@ -268,7 +252,8 @@ class BacktrackingDiagram {
268252
}
269253

270254
//Given a frame, load it into the diagram.
271-
loadFrame(frame, frameIndex) {
255+
loadFrame(frameIndex) {
256+
let frame = this.frames[frameIndex];
272257
this.selector.selectAll('.map').remove();
273258
this.maps = [];
274259
this.mapElements = [];

‎6-Constraint-Satisfaction-Problems/index.html‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.min.js"></script>
1212
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
13+
<script type="text/javascript" src="../globalHelpers.js"></script>
1314
<script type="text/javascript" src="./AC3.js"></script>
1415
<script type="text/javascript" src="./backtracking.js"></script>
1516
<script type="text/javascript" src="./minConflicts.js"></script>
@@ -110,14 +111,10 @@ <h2>Backtracking Search</h2>
110111
<div class='btn btn-primary restart-button'>Restart</div>
111112
</div>
112113
<div class="row animation-controls">
113-
<div class="col-md-1">
114-
<div class='btn btn-default prevButton'>Previous</div>
115-
</div>
116-
<div class="col-md-4">
117-
<input class='slider' id='backtrackSlider' type="range" steps="1" min='0' value="0">
118-
</div>
119-
<div class="col-md-1">
120-
<div class='btn btn-default nextButton'>Next</div>
114+
<div class="col-md-6">
115+
<div class="row" id='backtrackingAC'>
116+
117+
</div>
121118
</div>
122119
</div>
123120
<div class="row">

0 commit comments

Comments
 (0)