91 lines
3.0 KiB
HTML
91 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>p5.js example</title>
|
|
<style>
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.column {
|
|
float: left;
|
|
}
|
|
|
|
/* Clear floats after the columns */
|
|
.row:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
</style>
|
|
<script>
|
|
function updateCanvasWidth(){
|
|
let w = document.getElementById('canvasWidthTextbox').value;
|
|
resizeCanvas(w, height);
|
|
}
|
|
|
|
function updateCanvasHeight(){
|
|
let h = document.getElementById('canvasHeightTextbox').value;
|
|
|
|
}
|
|
|
|
function toggleForm(enabled){
|
|
document.getElementById("canvasProperties").disabled = !enabled;
|
|
document.getElementById("algo").disabled = !enabled;
|
|
document.getElementById("misc").disabled = !enabled;
|
|
document.getElementById("runButton").disabled = !enabled;
|
|
}
|
|
|
|
function rerun(){
|
|
algo = {};
|
|
maze.resetMazeState();
|
|
maze.updateMazeDisplay();
|
|
loop();
|
|
}
|
|
</script>
|
|
<script src="maze-solver.js"></script>
|
|
<script src="cell.js"></script>
|
|
<script src="gen-maze.js"></script>
|
|
<script src="../p5.js"></script>
|
|
<script src="../addons/p5.sound.min.js"></script>
|
|
<script src="sketch.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="sketch-holder" class="column"></div>
|
|
<div class="column">
|
|
<label id="information"></label>
|
|
<form action="">
|
|
<fieldset id="canvasProperties" name="canvasProperties" disabled="disabled">
|
|
<legend>Canvas Properties</legend>
|
|
<label for="canvasWidthTextbox" >Canvas Size Width: </label><input type="number" id="canvasWidthTextbox" value="500" onchange="updateCanvasWidth()"/>
|
|
<label for="canvasHeightTextbox"> Height: </label><input type="number" id="canavasHeightTextbox" value="500" onchange="updateCanvasHeight()"/><br/>
|
|
<label for="genFrameRate">Framerate During Maze Generation: </label><input type="number" id="genFrameRate" min="1" max="144" step="1" value="30" /><br />
|
|
<label for="solvingFrameRate">Framerate During Maze Solving: </label><input type="number" id="solvingFrameRate" min="1" max="144" step="1" value="30" /><br />
|
|
<input id="reuseMaze" type="checkbox" checked="true" /><label for="reuseMaze">Reuse current maze on next run (uncheck to generate a new maze)</label>
|
|
</fieldset>
|
|
<fieldset id="algo" name="algo" disabled="disabled">
|
|
<legend>Search Algorithms</legend>
|
|
<label for="searchAlgo">Search Algorithm to Find Maze Anwser: </label>
|
|
<select id="searchAlgo">
|
|
<option value="depthFirst">Depth First</option>
|
|
<option value="breadthFirst">Breadth First</option>
|
|
<option value="a*">a*</option>
|
|
</select>
|
|
</fieldset>
|
|
<fieldset id="misc" disabled="disabled">
|
|
<legend>Misc.</legend>
|
|
<label for="cellWidthInput">Cell Width: </label><input type="number" id="cellWidthInput" value="50" />
|
|
</fieldset>
|
|
<button id="runButton" type="button" onClick="rerun()" disabled>Re-run</button>
|
|
</form>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|