Skip to content

Commit ffc5310

Browse files
Rishav159Rishav159
committed
Adds proper color coding in graphs of BFS, Adds DFS, Code rafactored
Node expansion code refactored Added BFS visualization and FIFO queue Added ajax for bfs code Fixes nodeExpansion Bug, BFS reuses nodeExpansion code, Actual bfs code hidden from the user Changes color of the next node to be expanded in graph of bfs Adds next node correspondance to graph nodes and adds dfs Adds green color to the initial queue in dfs
1 parent 0825297 commit ffc5310

File tree

8 files changed

+362
-663
lines changed

8 files changed

+362
-663
lines changed

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

Lines changed: 2 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,3 @@
1-
2-
var breadthFirstSearch = function(problem){
3-
this.problem = problem;
4-
this.node = problem.INITIAL;
5-
if(this.problem.GOAL_TEST(this.node)){
6-
return this.problem.NO_ACTION;
7-
}
8-
this.frontier = [this.node];
9-
this.explored = {};
10-
this.iterate = function(){
11-
var isNewState = false;
12-
//If Goal reached, Return No Action
13-
if(this.problem.GOAL_TEST(this.node)){
14-
return [isNewState,this.problem.NO_ACTION];
15-
}
16-
//If stack is empty, return No Action
17-
if(this.frontier.length == 0){
18-
return [isNewState,this.problem.NO_ACTION];
19-
}
20-
//Extract the shallowest node from the queue
21-
node = this.frontier.shift();
22-
this.node = node;
23-
//Add Extracted node to explored
24-
this.explored[node] = true;
25-
actions = this.problem.ACTIONS(node)
26-
for(var i = 0; i < actions.length; i++){
27-
var action = actions[i]
28-
child = this.problem.CHILD_NODE(node,action);
29-
if(!this.explored[child]){
30-
this.frontier.push(child);
31-
this.explored[child] = true;
32-
}
33-
}
34-
isNewState = true;
35-
return [isNewState,node]
36-
}
1+
var breadthFirstSearch = function(frontier){
2+
return frontier[0];
373
}

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

Lines changed: 47 additions & 183 deletions
Original file line numberDiff line numberDiff line change
@@ -1,190 +1,54 @@
1-
var bfsProblemStatement = function(graph,start,end){
2-
3-
this.graph = graph;
4-
this.ROWS = this.graph.length;
5-
this.COLS = this.graph[0].length;
6-
this.TOTAL_STATES = this.ROWS * this.COLS;
7-
this.INITIAL = start;
8-
this.END = end;
9-
10-
this.NO_ACTION = 0;
11-
this.UP = 1;
12-
this.RIGHT = 2;
13-
this.DOWN = 3;
14-
this.LEFT = 4;
15-
16-
this.at = function(i,j){
17-
return i * this.COLS + j;
18-
};
19-
this.getIJ = function(x){
20-
return [parseInt(x/this.COLS),x%this.COLS];
21-
};
22-
this.GOAL_TEST = function(state){
23-
return this.END == state;
24-
};
25-
this.ACTIONS = function(state){
26-
var actions = [this.NO_ACTION];
27-
var i = this.getIJ(state)[0];
28-
var j = this.getIJ(state)[1];
29-
if(i - 1 >= 0 && !this.graph[i-1][j]) actions.push(this.UP);
30-
if(i + 1 < this.ROWS && !this.graph[i+1][j]) actions.push(this.DOWN);
31-
if(j - 1 >= 0 && !this.graph[i][j-1]) actions.push(this.LEFT);
32-
if(j + 1 < this.COLS && !this.graph[i][j+1]) actions.push(this.RIGHT);
33-
return actions;
34-
};
35-
this.CHILD_NODE = function(state,action){
36-
var x = this.getIJ(state)[0];
37-
var y = this.getIJ(state)[1];
38-
switch(action){
39-
case this.NO_ACTION: break;
40-
case this.UP:x--;break;
41-
case this.RIGHT:y++;break;
42-
case this.DOWN:x++;break;
43-
case this.LEFT:y--;break;
44-
}
45-
return this.at(x,y)
46-
}
47-
};
48-
49-
501

512
$(document).ready(function(){
52-
$.ajax({
53-
url : "breadthFirstSearch.js",
54-
dataType: "text",
55-
success : function (data) {
56-
$("#breadthFirstSearchCode").html(data);
57-
}
58-
});
59-
60-
61-
var two,canvas,bfs;
62-
63-
var graph = [[0,0,0,0,1,1,0,0,1,1],
64-
[1,1,0,0,1,0,1,0,0,0],
65-
[0,0,0,0,0,0,0,0,1,1],
66-
[0,0,1,0,1,1,0,0,0,0],
67-
[0,1,1,0,1,1,1,1,0,1],
68-
[0,0,1,0,1,1,0,1,0,0],
69-
[1,0,1,0,1,0,0,0,0,0]];
70-
71-
var start = 0;
72-
var end = 19;
73-
74-
var DELAY = 0.5 *60;
75-
var SIZE = 40;
76-
var NONBLOCKING = "#AAAACC";
77-
var BLOCKING = "#555577";
78-
var EXPLORED = "#edb168";
79-
var STARTCOLOR = "#EE6622";
80-
var ENDCOLOR = "#66EE22";
81-
var FINISHCOLOR = "#0d6d1e";
82-
var w,h,baseX,baseY;
83-
84-
var problem = undefined;
85-
var state,lastState;
86-
var m_frame = DELAY;
87-
var tiles = [];
88-
var isBinded = false;
89-
90-
function clickHandler(){
91-
two.unbind('update');
92-
tiles = [];
93-
m_frame = DELAY;
94-
//Block-Unblock the clicked cell
95-
//Index attribute of the tag will contain its index in the graph
96-
index = this.getAttribute('index');
97-
if(index != start && index != end){
98-
[x,y] = problem.getIJ(index);
99-
if(graph[x][y] == 1){
100-
graph[x][y] = 0;
101-
}else{
102-
graph[x][y] = 1;
103-
}
104-
}
105-
isBinded = false;
106-
init();
107-
}
108-
function updateHandler(frameCount){
109-
//We need to check if two has already rendered the tags before attempting
110-
//to bind the click event.
111-
if(!isBinded && document.getElementById(tiles[0].id)){
112-
for(var i=0;i<tiles.length;i++){
113-
var elem = document.getElementById(tiles[i].id);
114-
//Each path tag will now have index attribute containing its index
115-
//in the graph array
116-
elem.setAttribute('index',i)
117-
elem.addEventListener('click',clickHandler)
118-
}
119-
isBinded = true;
120-
}
121-
--m_frame;
122-
lastState = state;
123-
if(m_frame == 0){
124-
step();
125-
m_frame = DELAY
126-
}else{
127-
interpolate();
128-
}
129-
};
130-
3+
var w = 600, h = 350;
4+
var visGraph = null;
5+
var visQueue = null;
6+
var agent = null;
7+
var initial = 0;
8+
var end = 16;
9+
var canvas = null;
10+
var queueCanvas = null;
11+
var DELAY = 2000;
12+
var updateFunction = null;
13+
var intervalFunction = null;
14+
var nextNodeColor = 'hsl(108, 96%, 50%)';
13115
function init(){
13216
canvas = document.getElementById('breadthFirstSearchCanvas');
133-
canvas.innerHTML = "";
134-
w = canvas.offsetWidth, h = 300;
135-
two = new Two({width:w , height:h}).appendTo(canvas);
136-
problem = new bfsProblemStatement(graph,start,end);
137-
bfs = new breadthFirstSearch(problem);
138-
139-
state = lastState = problem.INITIAL;
140-
baseX = two.width/2 - problem.COLS/2 * SIZE;
141-
baseY = two.height/2 - problem.ROWS/2 * SIZE;
142-
143-
two.bind('update',updateHandler).play();
144-
145-
drawBackground();
146-
147-
};
148-
149-
function step(){
150-
var isNewState,newState;
151-
[isNewState,newState] = bfs.iterate();
152-
if(isNewState){
153-
state = newState;
154-
155-
}
156-
};
157-
158-
159-
160-
function drawBackground(){
161-
for(var i = 0; i < problem.ROWS; i++){
162-
for(var j = 0; j < problem.COLS; j++){
163-
var temp = two.makeRectangle(SIZE/2+j*SIZE,SIZE/2+i*SIZE,SIZE,SIZE);
164-
if(problem.graph[i][j])
165-
temp.fill = BLOCKING;
166-
else
167-
temp.fill = NONBLOCKING;
168-
temp.noStroke();
169-
tiles.push(temp);
17+
queueCanvas = document.getElementById('fifoQueueCanvas');
18+
graph = new makeDefaultGraph();
19+
agent = new nodeExpansionAgent(graph.adjMatrix,initial);
20+
visGraph = new drawGraph(canvas,h,w,agent,graph.nodes,graph.adjMatrix);
21+
visQueue = new drawQueue(queueCanvas,h,w,agent,graph.nodes);
22+
visGraph.init();
23+
visQueue.init();
24+
visGraph.nodeGroups[initial].children[0].fill = nextNodeColor;
25+
visQueue.rectangles[0].fill = nextNodeColor;
26+
visGraph.two.update();
27+
visQueue.two.update();
28+
updateFunction = function(){
29+
frontier = agent.frontier;
30+
if(frontier.length == 0){
31+
clearInterval(intervalFunction,DELAY);
32+
}else{
33+
var x = breadthFirstSearch(frontier);
34+
agent.expand(x);
35+
visGraph.iterate();
36+
visQueue.iterate();
37+
if(agent.frontier.length != 0){
38+
visGraph.nodeGroups[agent.frontier[0]].children[0].fill = nextNodeColor;
39+
visGraph.two.update();
40+
visQueue.rectangles[0].fill = nextNodeColor;
41+
visQueue.two.update();
42+
}
17043
}
171-
}
172-
173-
tiles[problem.INITIAL].fill = STARTCOLOR;
174-
tiles[problem.END].fill = ENDCOLOR;
175-
var backgroundGroup = two.makeGroup(tiles);
176-
backgroundGroup.translation.set(baseX,baseY);
44+
};
45+
intervalFunction = setInterval(updateFunction,DELAY);
46+
$('#fifoWaiting').css('background-color',visQueue.waitingColor);
47+
$('#fifoNextNode').css('background-color',nextNodeColor);
17748
};
178-
179-
function interpolate(){
180-
if(state != problem.INITIAL && state!= problem.END){
181-
tiles[state].fill = EXPLORED;
182-
}
183-
if(state == problem.END){
184-
tiles[state].fill = FINISHCOLOR;
185-
186-
}
187-
}
188-
18949
init();
190-
});
50+
$('#bfsRestartButton').click(function(){
51+
clearInterval(intervalFunction,DELAY);
52+
init();
53+
})
54+
})

0 commit comments

Comments
 (0)