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 |