-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
257 lines (234 loc) · 12.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Learn Algorithm</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="57x57" href="icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<head>
<body>
<html>
<body style="background-image:url()">
<nav class="navbar navbar-expand-lg fixed-top ">
<center> <a class="navbar-brand" href="#">Greedy Best First Search</a></center>
</nav>
<header>
</header>
<h2></h2><br><br><br>
<header>
<h1 style="padding-top: 16px">
<span style="color: white">Let's start with the <b>basics!</b></span>
</h1>
</header><br>
<article>
<p style="text-align:justify; font-family:Consolas"><b><mark>Do you know,</mark></b> all these algorithms are somehow related to our daily life! Don't beleive? Let's have a quick demonstartion.</p>
<p style="text-align:justify; font-family:Consolas">For some moments <b>Stop</b> thinking<i class="em em-thinking_face"></i> about any algorithms and look at this diagram. </p>
</article>
<article>
<img id="thefstimg" src="images/1st.png">
</article>
<article>
<p style="text-align:justify; font-family:Consolas"><b>Suppose</b> you’re travelling <i class="em em-airplane"></i> from your office to your home and you want to reach <mark>as soon as possible</mark>, then which path will you choose? Think for a while.
</p>
</article>
<article>
<p style="text-align:justify; font-family:Consolas"><b>Ok</b>, now <b>let's</b> look at the diagram below.<i class="em em-point_down"></i>
</p>
</article>
<article>
<img id="thefstimg" src="images/2nd.png">
</article>
<article>
<p style="text-align:justify; font-family:Consolas"><b></b>
If I’m not wrong, you might have thought about this path, which seems the shortest among all, right? If it is right then you’ve just tried to be <b>greedy</b>. <i class="em em-money_mouth_face"></i>
</p>
</article>
<article>
<p style="text-align:justify; font-family:Consolas"><b></b>
In this way, we as a human, decide which case/path is best for us. Now let's think from an computer's perspective. I think you all have played <mark>Counter Strike!</mark> <b>Have you ever wondered how an enemy agent finds the location of the player in the Game World?</b>
</p>
<p style="text-align:justify; font-family:Consolas">This is where <b>Algorithms</b> comes into play. In games, <b>best-first search</b> may be used as a path-finding algorithm for game characters.</p>
</article>
<header>
<h1 style="padding-top: 16px">
<span style="color: white">What is Greedy Best First Search Algorithm?</span>
</h1>
</header><br>
<article>
<p style="text-align:justify; font-family:Consolas"><b>Greedy best-first search</b> tries to expand the node that is closest to the goal, on the grounds that it is likely to lead
to a solution quickly. Thus, it evaluates nodes by using just the heuristic function; that is, <i>f(n)=h(n).</i></p>
<p style="text-align:justify; font-family:Consolas">Let us see how this works for the route-finding problems. Here we use the <b>straight-line distance heuristic,</b> which we will call <i>h<sub>SLD</sub></i>. If the goal node is I, we need to know the straight-line distances to the node I, which is shown below:</p>
</article>
<header>
<h1 style="padding-top: 2px">
<span style="color: white">Static Visualization</span>
<span></span>
</h1>
</header><br>
<article class="art">
<img id="img1" src="images/nodes.jpg">
<img id="img2" src="images/EA.jpg">
<img id="img3" src="images/EB.jpg">
<img id="img4" src="images/EF.jpg"><br><br>
</article>
<article>
<p style="text-align:justify; font-family:Consolas">The first node to be expanded from A will be B because it is closer to I than either B or C.
The next node to be expanded will be F because it is closest. F, in turn, generates I, which is the goal. For this particular problem,
greedy best-first search using <i>h<sub>SLD</sub></i> finds a solution without ever expanding a node that is not on the solution path; hence, its search
cost is minimal. This shows why the algorithm is called <b>"Greedy"</b> - at each step it tries to get as close to the goal as it can.</p>
</article>
<header>
<h1 style="padding-top: 2px">
<span style="color: white">Dynamic Visualization</span>
<span></span>
</h1>
</header>
<article>
<div class="wrapper">
<div class="gameboard">
<div class="heading">
<strong>Let's play this Game!</strong>
</div><br>
<p style="text-align:center; font-family:Consolas"><mark>Instructions!</mark></p>
<ul type="square">
<li>Click the node "S" to expand it.</li>
<li>Always try to click the node with smallest value.</li>
<li>Repeat the process.</li>
</ul>
<div class="Row1">
<div id="cell1" class="cell"></div>
<div id="cell2" class="cell"></div>
<div id="cell3" class="cell"><p class="fst">5</p></div>
<div id="cell4" class="cell"><p class="fst">7</p></div>
</div>
<div class="Row2">
<div id="cell5" class="cell"></div>
<div id="cell6" class="cell"></div>
<div id="cell7" class="cell"></div>
<div id="cell8" class="cell"></div>
</div>
<div class="Row3">
<div id="cell9" class="cell"></div>
<div id="cell10" class="cell"><p class="fst">6</p></div>
<div id="cell11" class="cell"><p class="fst">S</p></div>
<div id="cell12" class="cell"><p class="fst">3</p></div>
</div>
<div class="Row4">
<div id="cell13" class="cell"><p class="fst">6</p></div>
<div id="cell14" class="cell"></div>
<div id="cell15" class="cell"></div>
<div id="cell16" class="cell"></div>
</div>
<div class="Row5">
<div id="cell17" class="cell"><p class="fst">6</p></div>
<div id="cell18" class="cell"><p class="fst">9</p></div>
<div id="cell19" class="cell"><p class="fst">4</p></div>
<div id="cell20" class="cell"><p class="fst">2</p></div>
</div>
<div class="Row6">
<div id="cell21" class="cell"><p class="fst">4</p></div>
<div id="cell22" class="cell"></div>
<div id="cell23" class="cell"></div>
<div id="cell24" class="cell"></div>
</div>
<div class="Row7">
<div id="cell25" class="cell"><p class="fst">2</p></div>
<div id="cell26" class="cell"><p class="fst">3</p></div>
<div id="cell27" class="cell"><p class="fst">2</p></div>
<div id="cell28" class="cell"><p class="fst">3</p></div>
</div>
<div class="Row8">
<div id="cell29" class="cell"><p class="fst">4</p></div>
<div id="cell30" class="cell"></div>
<div id="cell31" class="cell"></div>
<div id="cell32" class="cell"></div>
</div>
<div class="Row9">
<div id="cell33" class="cell"><p class="fst">4</p></div>
<div id="cell34" class="cell"><p class="fst">7</p></div>
<div id="cell35" class="cell"><p class="fst">6</p></div>
<div id="cell36" class="cell"><p class="fst">5</p></div>
</div>
<div class="Row10">
<div id="cell37" class="cell"><p class="fst">5</p></div>
<div id="cell38" class="cell"></div>
<div id="cell39" class="cell"></div>
<div id="cell40" class="cell"></div>
</div>
<div class="Row11">
<div id="cell41" class="cell"><p class="fst">3</p></div>
<div id="cell42" class="cell"><p class="fst">5</p></div>
<div id="cell43" class="cell"><p class="fst">7</p></div>
<div id="cell44" class="cell"><p class="fst">2</p></div>
</div>
<div class="Row12">
<div id="cell45" class="cell"><p class="fst">1</p></div>
<div id="cell46" class="cell"><p class="fst">2</p></div>
<div id="cell47" class="cell"><p class="fst">F</p></div>
<div id="cell48" class="cell"></div>
</div>
<div class="Row13">
<div id="cell49" class="cell"><p class="fst">2</p></div>
<div id="cell50" class="cell"><p class="fst">3</p></div>
<div id="cell51" class="cell"><p class="fst">2</p></div>
<div id="cell52" class="cell"><p class="fst">3</p></div>
</div>
<div class="Row14">
<div id="cell53" class="cell"><p class="fst">9</p></div>
<div id="cell54" class="cell"></div>
<div id="cell55" class="cell"></div>
<div id="cell56" class="cell"></div>
</div>
<div class="Row15">
<div id="cell57" class="cell"><p class="fst">9</p></div>
<div id="cell58" class="cell"><p class="fst">5</p></div>
<div id="cell59" class="cell"><p class="fst">6</p></div>
<div id="cell60" class="cell"><p class="fst">5</p></div>
</div>
<div class="Row16">
<div id="cell61" class="cell"></div>
<div id="cell62" class="cell"></div>
<div id="cell63" class="cell"></div>
<div id="cell64" class="cell"></div>
</div>
</div>
</div>
</article>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js', {
scope: '.'
}).then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
}
</script>
<script src="main.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
</body>
</html>