-
Notifications
You must be signed in to change notification settings - Fork 1
/
life.js
118 lines (103 loc) · 2.74 KB
/
life.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
p5.disableFriendlyErrors = true;
let grid;
let cnv;
let speed = null; // higher number = slower render speed
let isRunning = false;
let startingResolution;
let blurAmount = 255;
function setup() {
cnv = createCanvas(windowWidth, windowHeight / 2);
cnv.parent("canvas");
startingResolution = windowWidth * (windowHeight / 2);
colorMode(HSB);
grid = new Grid(width, height, 6);
grid.init();
}
function draw() {
if (isRunning) {
if (frameCount % speed === 0) {
blur(blurAmount);
colorMode(HSB);
stroke(0);
grid.runSimulation();
let gen = generation.textContent;
generation.textContent = Number(gen) + 1;
}
}
}
function mousePressed() {
if (!isRunning) {
grid.clicked(mouseX, mouseY);
grid.render();
grid.countNeighbors();
}
}
function mouseDragged() {
// background(0);
if (!isRunning) {
// only run if mouse is within sketch bounds
if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
grid.clicked(mouseX, mouseY);
grid.render();
}
}
}
function mouseReleased() {
if (!isRunning) {
// don't bother counting neighbors until user drawing is complete
grid.countNeighbors();
}
}
function windowResized() {
// don't allow canvas to grow beyond initial size - prevents array out of bounds errors
// it could be possible to recreate the arrays on resize (larger than initial size) for a more complete fix
if (windowWidth * (windowHeight / 2) < startingResolution) {
resizeCanvas(windowWidth, floor(windowHeight * 0.5));
background(0);
grid.resize(width, height);
}
grid.render();
}
function blur(amount) {
colorMode(RGB);
fill(0, amount);
noStroke();
rect(0, 0, width, height);
}
// DOM stuff
const playBtn = document.querySelector("#playback");
const clearBtn = document.querySelector("#clear");
const reseed = document.querySelector("#reseed");
const speedSlider = document.querySelector("#speed");
const generation = document.querySelector("#generation");
const blurSlider = document.querySelector("#blur");
playBtn.addEventListener("click", () => {
isRunning = !isRunning;
if (isRunning) {
playBtn.textContent = "stop";
} else {
playBtn.textContent = "start";
}
});
clearBtn.addEventListener("click", () => {
grid.clear();
background(0);
isRunning = false;
playBtn.textContent = "start";
generation.textContent = 0;
});
reseed.addEventListener("click", () => {
clear();
background(0);
grid.reseed();
});
// set initial speed
// invert range (low values = high speeds)
// 60 = max value + 1
speed = 61 - speedSlider.value;
speedSlider.addEventListener("input", (e) => {
speed = 61 - e.target.value;
});
blurSlider.addEventListener("input", (e) => {
blurAmount = 260 - Number(e.target.value);
});