-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (118 loc) · 5.38 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110827453-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-110827453-1');
</script>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500" rel="stylesheet">
<script src="https://use.fontawesome.com/0d445b6c29.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/addons/p5.dom.js"></script>
<link rel="stylesheet" href="./src/index.css">
<script src="./dist/bundle.js" charset="utf-8"></script>
<title></title>
</head>
<body>
<div class="app-container">
<div id="sketch">
</div>
<div id="main-bar">
<div id="app-title">
Conway Painter
</div>
<div id="social-links">
<a href="https://github.com/roblim" target="_blank"><i class="fa fa-github-alt" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com/in/limrobert/" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<a href="https://www.robertmoseslim.com/"><i class="fa fa-user-circle-o" aria-hidden="true"></i></a>
<i class="fa fa-question-circle" id="open-modal-button" aria-hidden="true"></i>
</div>
<div id="ui-control-container">
<div id="ui-controls">
</div>
<div id="speed-slider">
<span></span>
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close"><i class="material-icons">close</i></span>
<h2>Conway Painter</h2>
</div>
<div class="modal-body">
<p>
Conway Painter is a game inspired by <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life">Conway's Game of Life</a>,
a well-known cellular automaton invented by mathematician John Conway.
</p>
<p>
A cellular automaton consists of a regular grid of cells (the universe), with each
cell having a finite number of states. At set time intervals, the
state of each cell is updated according to a set of rules governed
by the state of other cells in each cell's "neighborhood".
When implemented visually, cellular automata can result in complex
and beautiful patterns and behavior, each with it's own personality.
</p>
<p>
In the classic Conway's Game of Life, the universe consists of
a regular square grid, with each cell being either "state" or "dead",
and influenced by an eight-cell neighborhood.
</p>
<p>
Conway Painter departs from its classic counterpart by using a regular
hexagonal grid, with each cell having one of three states (maybe "state", "bored", or "dead"?),
and influenced by a six-cell neighborhood.
</p>
<p>
To play Conway Painter, simply paint on the canvas and watch as your worlds come to life and
evolve. As you paint, you are bringing dead cells back to life. If you paint while
the universe is active, the spawned cells immediately start affecting their
neighborhood. Play around with painting different shapes to see what worlds you can create!
</p>
</div>
<div class="modal-footer">
<div class="modal-social-links">
<a href="https://github.com/roblim" target="_blank"><i class="fa fa-github-alt" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com/in/limrobert/" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<a href="https://www.robertmoseslim.com/"><i class="fa fa-user-circle-o" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("open-modal-button");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>