RandomMapGenerator/index.html at master · Olsyx/RandomMapGenerator · GitHub

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
<html>
    <head>
        <title>Olsyx Map Generation</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

		<script src="JSColor/jscolor.js"></script>
        <div id="settings">
			<div id="panel">
				<form id="form">
					<label>Width: </label><input type="number" id="width" value="300" min="2"><br>
					<label>Height: </label><input type="number" id="height" value="300" min="2"><br>
					<label>Square Size: </label><input type="number" id="squareSize" value="3" min="1"><br>
					<label>Fill Proportion: </label><input type="number" id="fillProportion" value="50" min="1" max="100" step="0.01"><br>
					<hr>
					<label>Initial Passes: </label><input type="number" id="passes" value="5" min="0"><br>

					<label>Pass type: </label>
					<select type="text" id="pass_type">
						<option value="simple" selected>Simple</option>
						<option value="async">Asynchronous</option>
					</select><br>
					<hr>
					<label>Rule: </label>
					<select type="text" id="rule">
						<option value="fixed" selected>Fixed Threshold</option>
						<option value="random">Random Choice</option>
						<option value="latitude">Latitude Choice</option>
						<option value="randomLatitude">Random Latitude</option>
					</select>
					<label>Value: </label><input type="number" id="ruleValue" value="4" min="1" step="0.01"><br>
					<hr>
					<label>Neighborhood: </label>
					<select type="text" id="neighborhood">
						<option value="moore" selected>Moore</option>
						<option value="vnm">Von Neumann - Manhattan</option>
					</select><br>

					<label>Range: </label><input type="number" id="range" value="1" min="1"><br>

					<hr>

					<input type="checkbox" id="heightMap" value="heightMap" checked>Height<br>
					<input type="checkbox" id="forest" value="forest" checked>Forest<br>

					<label>Sea: </label><input class="jscolor" id="seaColor" value="6B93B4"><br>
					<label>Ground: </label><input class="jscolor" id="groundColor" value="748647"><br>
					<label>Forest: </label><input class="jscolor" id="forestColor" value="406F4C"><br>
					<label>Mountain: </label><input class="jscolor" id="mountainColor" value="8F624C">

					<hr>

					<button class="controlButton" type="button" id="nextPassButton">Next Pass</button>
					<button class="controlButton" id="generateButton">Generate New Map!</button>
				</form>

			</div>

			<div id="panel">
				<h3>References & Cool Links</h3><br/>
				<a href="https://en.wikipedia.org/wiki/Cellular_automaton" target="_blank">Cellular Automaton</a><br>
				<a href="https://en.wikipedia.org/wiki/Asynchronous_cellular_automaton" target="_blank">Asynchronous Cellular Automaton</a><br>
				<a href="https://en.wikipedia.org/wiki/Stochastic_cellular_automaton" target="_blank">Stochastic Cellular Automaton</a><br>
				<br>
				<a href="https://en.wikipedia.org/wiki/Moore_neighborhood" target="_blank">Moore Neighborhood</a><br>
				<a href="https://en.wikipedia.org/wiki/Von_Neumann_neighborhood" target="_blank">Von Neumann - Manhattan Neighborhood</a><br>
				<br>
				<a href="https://femdevs.org/" target="_blank">FemDevs</a><br>
				<a href="https://sirikon.github.io/udca/" target="_blank">Sirikon's Unidimensional Cellular Automata</a><br>
			</div>
		</div>
        <canvas id="canvas"></canvas>
        <script src="maths.js"></script>
        <script src="graphics.js"></script>
        <script src="settings.js"></script>
        <script src="rules.js"></script>
        <script src="passes.js"></script>
        <script src="neighborhoods.js"></script>
        <script src="mapGenerator.js"></script>

        <script src="index.js"></script>
    </body>
</html>