summaryrefslogtreecommitdiff
path: root/lsys/index.html
blob: 7197b7f548c0e9d933861d81c03fd7df79dc6bf3 (plain)
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
<!DOCTYPE html>
<html>
	<head>
		<title>L-System test</title>
		<meta charset="utf-8" />
		<style type="text/css" media="screen">
			body { margin: 0; padding: 15px; border-top: solid 10px #000; }
			canvas { border: solid 1px #999; }	
			#controls { font-family: "Lucida Grande", Helvetica, Arial, sans-serif; font-size: 11px; margin-bottom: 10px; }
			#controls input[type="text"] { border: solid 1px #ccc; font-weight: bold; padding: 2px; font-size: 12px; width: 35px; margin-right: 10px; }
			#controls input#axiom { width: 75px; }
			#controls input#ruleset { width: 200px; }
		</style>
	</head>
	<body>
		<div id="controls">
			<form action="" onsubmit="generate(); return false;">
			Axiom: <input type="text" id="axiom" name="axiom" value="F" />
			Ruleset: <input type="text" id="ruleset" name="ruleset" value="F-F+FF-F-F+F" />
			Angle: <input type="text" id="angle" name="angle" value="200" />
			Iterations: <input type="text" id="iterations" name="iterations" value="4" />
			Zoom: <input type="text" id="zoom" name="zoom" value="10" />
			X: <input type="text" id="x" name="x" value="600" />
			Y: <input type="text" id="y" name="y" value="300" />

			<select id="drawtype" name="drawtype" onchange="generate()">
				<option value="line">Line</option>
				<option value="hollow_circle">Hollow Circle</option>
				<option value="filled_circle">Filled Circle</option>
				<option value="small_circles">Small Circles</option>
				<option value="more_circles">More Circles</option>
				<option value="faint">Faint</option>
				<option value="triangles">Triangles</option>
				<option value="hatch">Hatch</option>
			</select>

			<input id="generateButton" type="submit" value="Generate" />
			<input id="saveButton" type="button" value="Download" onclick="saveImage()" />
		</form>
		</div>
		<canvas width="1200" height="600"></canvas>

		<script>
			var c = document.getElementsByTagName('canvas')[0];
			var a = c.getContext('2d');
		</script>
		<script type="text/javascript" charset="utf-8" src="lsystem.js"></script>
		<script type="text/javascript" charset="utf-8" src="app.js"></script>
	</body>
</html>