-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (97 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<title>CanvasLife</title>
<meta charset="utf-8">
<meta name="description" content="HTML5 canvas implementation of Conway's Game of Life."/>
<meta name="author" content="Tjerk Ameel"/>
<meta name="robots" content="index, follow"/>
<link rel="stylesheet" href="/css/universe.css" media="all"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script src="/js/life.js"></script>
<script>
function updateRangeLabel(id, value, suffix) {
$(id).html(value + suffix);
}
$(document).ready(function () {
// EventListeners
$("#showGrid").click(function () {
myLife.setGridEnabled(this.checked);
});
$("#startstop").click(function () {
myLife.toggleEvolution();
});
$("#next").click(function () {
myLife.evolve();
});
$("#reset").click(function () {
myLife.resetUniverse();
});
$("#lifetime").change(function () {
var newCycleTime = $("#lifetime").val();
updateRangeLabel("#lifetime_label", newCycleTime, 'ms');
myLife.setCycleTime(newCycleTime);
});
$("#celsize").change(function () {
var newCelSize = $("#celsize").val();
updateRangeLabel("#celsize_label", newCelSize, 'px');
myLife.setCelSize(newCelSize);
});
$("#celsize").mousemove(function () {
updateRangeLabel("#celsize_label", $("#celsize").val(), 'px');
});
$("#lifetime").mousemove(function () {
updateRangeLabel("#lifetime_label", $("#lifetime").val(), 'ms');
});
// Initialization
var celSize = 5;
$("#celsize").val(celSize);
updateRangeLabel("#celsize_label", celSize, 'px');
var cycleTime = 240;
$("#lifetime").val(cycleTime);
updateRangeLabel("#lifetime_label", cycleTime, 'ms');
var myLife;
myLife = life.createUniverse('#universe', {
hasGrid: false,
debugMode: true,
celSize: celSize,
cycleTime: cycleTime,
startStopButtonSelector: '#startstop'
});
myLife.startEvolving();
});
</script>
</head>
<body>
<canvas id="universe">
<strong>Your browser does not support canvas. You should probably upgrade and come back.</strong>
</canvas>
<a href="https://github.com/nocturnalfrog/living-canvas"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<footer>
<div class="inner">
<div class="settings-toggle">
<img class="cogwheel" src="images/cog.svg" width="36" height="36" alt="settings"/>
<h1>Living Canvas</h1>
</div>
<div class="controls">
<div class="buttons">
<button class="button" id="startstop">start/stop</button>
<button class="button" id="next">next</button>
<button class="button" id="reset">reset</button>
</div>
<div class="range-slider">
<label>Generation lifetime: </label><span id="lifetime_label">999ms</span><br>
<input type="range" name="lifetime" id="lifetime" step="10" min="20" max="1000"><br>
</div>
<div class="range-slider">
<label>Cel Size: </label><span id="celsize_label">999px</span><br>
<input type="range" name="size" id="celsize" min="1" max="60"><br>
</div>
<!--<div class="advanced">-->
<!--<label><input type="checkbox" id="showGrid" name="showGrid" value="">Show Grid</label><br>-->
<!--</div>-->
</div>
</div>
</footer>
</body>
</html>