OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 | |
5 <meta charset=utf8> | |
6 | |
7 <!-- | |
8 Copyright (C) 2007 Apple Inc. All rights reserved. | |
9 Copyright (C) 2010 Mozilla Foundation | |
10 | |
11 Redistribution and use in source and binary forms, with or without | |
12 modification, are permitted provided that the following conditions | |
13 are met: | |
14 1. Redistributions of source code must retain the above copyright | |
15 notice, this list of conditions and the following disclaimer. | |
16 2. Redistributions in binary form must reproduce the above copyright | |
17 notice, this list of conditions and the following disclaimer in the | |
18 documentation and/or other materials provided with the distribution. | |
19 | |
20 THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY | |
21 EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | |
22 IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR | |
23 PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE COMPUTER, INC. OR | |
24 CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, | |
25 EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, | |
26 PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR | |
27 PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY | |
28 OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | |
29 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | |
30 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | |
31 --> | |
32 | |
33 <title>Kraken JavaScript Benchmark: A* Search Algorithm</title> | |
34 <link rel="stylesheet" href="../kraken.css"> | |
35 <script src="astar.js"></script> | |
36 <script> | |
37 function getCanvasContext() { | |
38 var canvas = document.getElementById('display'); | |
39 if (canvas.getContext) | |
40 return canvas.getContext('2d'); | |
41 } | |
42 | |
43 function drawEndpoints(ctx, start, end) { | |
44 drawCanvasCell(ctx, start.x, start.y, "rgb(256,0,0)"); | |
45 drawCanvasCell(ctx, end.x, end.y, "rgb(256,256,0)"); | |
46 } | |
47 | |
48 function drawSuccessfulPath(nodeList) { | |
49 var ctx = getCanvasContext(); | |
50 for (var i=0; i < nodeList.length; i++) { | |
51 ctx.fillStyle = "rgb(256,0,0)"; | |
52 ctx.fillRect((nodeList[i].x * 5) + 1, (nodeList[i].y * 5) + 1, 3, 3); | |
53 } | |
54 } | |
55 | |
56 function drawCanvas(graphSet) { | |
57 var ctx = getCanvasContext(); | |
58 for (var i = 0; i < graphSet.length; i++) { | |
59 for (var j = 0; j < graphSet.length; j++) { | |
60 var node = graphSet[i][j]; | |
61 if (node.isWall()) { | |
62 drawCanvasCell(ctx, node.x, node.y, "rgb(0,0,0)"); | |
63 } else { | |
64 drawCanvasCell(ctx, node.x, node.y, "rgb(50,50,50)"); | |
65 } | |
66 } | |
67 } | |
68 drawEndpoints(ctx, start, end); | |
69 } | |
70 | |
71 function drawCanvasCell(ctx, x, y, style) { | |
72 ctx.fillStyle = style; | |
73 ctx.fillRect(x * 5, y * 5, 5, 5); | |
74 } | |
75 | |
76 function doIt() { | |
77 var div = document.getElementById("console"); | |
78 div.innerHTML += go(); | |
79 div.innerHTML += "<br>"; | |
80 drawSuccessfulPath(path); | |
81 } | |
82 </script> | |
83 <style> #display { border: 5px solid rgb(0,0,50);}</style> | |
84 </head> | |
85 | |
86 <body onload="drawCanvas(g1);"> | |
87 <div id="content"> | |
88 <h2>Kraken JavaScript Benchmark: A* Search Algorithm</h2> | |
89 <div id="results"> | |
90 <p>This benchmark uses the <a href="http://en.wikipedia.org/wiki/A*_search_a
lgorithm">A* search algorithm</a> is used to automatically plot an efficient pat
h between two points,<br> in the presence of obstacles. Adapted from code by <a
href="http://www.briangrinstead.com/blog/astar-search-algorithm-in-javascript">B
rian Gringstead</a>.</p> | |
91 <p>Below, you can watch the algorithm plot a path through the maze.</p> | |
92 <canvas id="display" width=500 height=500></canvas> | |
93 <p><input onclick="drawCanvas(g1); setTimeout(doIt, 10);" type="button" valu
e="Try It!"></p> | |
94 <div id="console"></div> | |
95 </div> | |
96 </div> | |
97 </body> | |
98 </html> | |
OLD | NEW |