-
Notifications
You must be signed in to change notification settings - Fork 0
/
content.js
175 lines (144 loc) · 4.96 KB
/
content.js
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
var emoji = require("./emoji.js");
var utils = require("./utils.js");
var compass = require("./compass.js");
/* @flow */
function drawGridLines(context) {
context.strokeStyle = "#5FB661";
context.stroke();
}
function drawGrid(canvas, context) {
var bw = 400;
var bh = bw;
var p = 10;
for (var x = 0; x <= bw; x += 40) {
context.moveTo(0.5 + x + p, p);
context.lineTo(0.5 + x + p, bh + p);
}
for (var y = 0; y <= bh; y += 40) {
context.moveTo(p, 0.5 + y + p);
context.lineTo(bw + p, 0.5 + y + p);
}
context.fillStyle = "#89603e";
context.fillRect(0, 0, canvas.width, canvas.height);
drawGridLines(context);
}
var currentGridState = Array.from(new Array(100), () => []);
var xOffset = 10;
var yOffset = 28;
function printTo(objFunc, ctxt) {
function f(x, y) {
ctxt.fillText(objFunc.call(), x + xOffset, y + yOffset);
}
return f;
}
function gPrint(context, e, i) {
var [x, y] = compass.positionFromId(i);
var squareSize = 39;
// for debugging
function printNums() {
context.fillStyle = "grey";
context.fillText(i, x + xOffset, y + yOffset);
}
// grey out previous
context.fillStyle = "rgba(137,96,62,0.9)";
context.fillRect(x, y, squareSize, squareSize);
switch (e.length) {
case 0:
context.fillStyle = "#89603e";
context.fillRect(x, y, squareSize, squareSize);
drawGridLines(context);
break;
default:
context.fillStyle = "#5FB661";
context.fillRect(x, y, squareSize, squareSize);
context.fillText(emoji.lucky(), x + xOffset, y + yOffset);
break;
}
}
function populateGrid(context) {
for (var i = 1; i <= 50; i += 1) {
var activeId = utils.getRandomIntInclusive(0, 99);
currentGridState[activeId].push(compass.positionFromId(activeId));
gPrint(context, currentGridState[activeId], activeId);
}
}
function seedGlider(context) {
currentGridState = Array.from(new Array(100), () => []);
var centerId = utils.getRandomIntInclusive(0, 99);
var neighborhood = compass.getNeighbors(centerId);
// glider from centerId: N, E, SE, S, SW
var gliderPositions = [0, 6, 4, 3, 5];
gliderPositions.map(function(p) {
currentGridState[neighborhood[p]] = [compass.positionFromId(neighborhood[p])];
gPrint(context, currentGridState[neighborhood[p]], neighborhood[p]);
});
}
function isLive(grid, a) {
var e = grid[a.mod(99)];
return e.length > 0 ? 1 : 0;
}
function calculateCellIn(grid, cell, i) {
function live(cell,i) {
cell.push(compass.positionFromId(i));
}
function dead(cell) {
cell.length = 0;
}
var neighborhood = compass.getNeighbors(i);
var liveNeighbors = neighborhood.map(function(e) { return isLive(grid, e); });
var numberOfLiveNeighbors = liveNeighbors.filter(utils.intAsBool).length.clamp(0, 4);
// rules from http://disruptive-communications.com/conwaylifejavascript/
//If a live cell has less than two live neighbours, it dies
//If a live cell has more than three live neighbours, it dies
//If a live cell has two or three live neighbours, it continues living
var nextLivingState = [dead, dead, live, live, dead];
//If a dead cell has exactly three live neighbours, it comes to life
var nextDeadState = [dead, dead, dead, live, dead];
var nextPossibleState = [nextDeadState, nextLivingState];
nextPossibleState[isLive(grid, i)][numberOfLiveNeighbors].call(null, cell, i);
return cell;
}
module.exports = (function() {
document.addEventListener("DOMContentLoaded", function(event) {
var runButton = document.getElementById("run");
var stopButton = document.getElementById("stop");
var reseedButton = document.getElementById("reseed");
var gliderButton = document.getElementById("glider");
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
context.font = "24px Arial";
drawGrid(canvas, context);
populateGrid(context);
function gPrintWithContext(context) {
return function(e, i) {
gPrint(context, e, i);
};
}
var interval = null;
runButton.addEventListener('click', function() {
interval = setInterval(function() {
var lastGridState = Object.freeze(currentGridState.slice());
var newGridState = Array.from(new Array(100), () => []);
newGridState.map(function(e,i) {
return newGridState[i] = calculateCellIn(lastGridState,e,i);
});
currentGridState = newGridState;
drawGrid(canvas, context); // clear
currentGridState.forEach(gPrintWithContext(context));
}, 500);
}, false);
stopButton.addEventListener('click', function() {
clearInterval(interval);
}, false);
gliderButton.addEventListener('click', function() {
clearInterval(interval); // just in case
drawGrid(canvas, context); // clear
seedGlider(context);
}, false);
reseedButton.addEventListener('click', function() {
clearInterval(interval); // just in case
drawGrid(canvas, context); // clear
populateGrid(context);
}, false);
});
})();