-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
93 lines (83 loc) · 4.49 KB
/
index.html
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
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>The Nature of Code!</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="lib/class.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/paper-full.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/math.min.js"></script>
<script src="lib/random.js"></script>
<script src="lib/box2dweb.js"></script>
<script src="js/math.js"></script>
<script src="js/utils.js"></script>
<script src="js/draw.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<a id='title-link' href=".">
<h2>The Nature of Code!</h2>
</a>
</div>
<div class="row">
<div class="col-sm-3">
<form class="" role="form">
<div class="form-group">
<label for="paper-script">Script</label>
<select id="paper-script" class="form-control">
<option>None</option>
<!--<option value="playground.js">Test Playground</option>-->
<option value="walker.js">Random Walker</option>
<option value="forces.js">Forces</option>
<option value="attraction.js">Attraction</option>
<option value="spiral.js">Spiral</option>
<option value="clock.js">Clock (Radians)</option>
<option value="particle.js">Particle Smoke</option>
<option value="box.js">Box2D</option>
<option value="arrive.js">Vehicle Arrive</option>
<option value="separation.js">Separation</option>
<option value="flock.js">Flocking</option>
<option value="elemca.js">Elementary CA</option>
<option value="gol.js">Game of Life</option>
<option value="cantor.js">Cantor Lines</option>
<option value="mandelbrot.js" data-desc="Use + and - to zoom in and out. Use arrows to move the center.">Mandelbrot Fractals</option>
<option value="evolution.js">Smart Rockets (Evolution/GA)</option>
</select>
<p id="desc" class="help-block"></p>
</div>
<button id="refresh" type="button" class="btn btn-default"><span class="glyphicon glyphicon-repeat"></span> Refresh</button>
<button id="pause" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-pause"></span> </button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-circle-arrow-down"></span> Export <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a id="export-svg"><span class="glyphicon glyphicon-picture"></span> SVG</a></li>
<li><a id="export-image"><span class="glyphicon glyphicon-camera"></span> PNG</a></li>
</ul>
</div>
</form>
<form id="log-form">
<div class="form-group">
<label for="log">Messages</label>
<textarea id="log" class="form-control" readonly rows="20"></textarea>
</div>
</form>
</div>
<div class="col-sm-9">
<canvas id="main-canvas" width="800" height="600" keepalive="true" data-paper-keepalive="true"></canvas>
</div>
</div>
<footer>
These samples are <i>mostly</i> based on algroritms from <a href="http://natureofcode.com/" target="_blank">The Nature of Code</a> book.
You can find the code <a href="https://github.com/bahaa/nature-of-code">here</a>.
</footer>
</div>
</body>
</html>