-
Notifications
You must be signed in to change notification settings - Fork 1
/
life.html
96 lines (83 loc) · 3 KB
/
life.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
<!DOCTYPE html>
<html>
<head>
<title>Game of life</title>
<script src="myr.js"></script>
<script src="convTex.js"></script>
</head>
<body>
<canvas id="renderer" width=1200 height=800></canvas>
<script>
const canvas = document.getElementById("renderer");
const rect = canvas.getBoundingClientRect();
const mousePrevious = new Myr.Vector(0, 0);
const mouseCurrent = new Myr.Vector(0, 0);
const myr = new Myr(canvas);
const scale = 2;
const texture = new ConvTex(
myr,
new myr.Shader(
"int get(int dx, int dy) {" +
"return int(texture(source, uv + pixelSize * vec2(dx, dy)).r);" +
"}" +
"void main() {" +
"int live = get(0, 0);" +
"int neighbors =" +
"get(-1, -1) +" +
"get(0, -1) +" +
"get(1, -1) +" +
"get(-1, 0) +" +
"get(1, 0) +" +
"get(-1, 1) +" +
"get(0, 1) +" +
"get(1, 1);" +
"if (live == 1 && neighbors < 2)" +
"color = vec4(0);" +
"else if (live == 1 && (neighbors == 2 || neighbors == 3))" +
"color = vec4(1);" +
"else if (live == 1 && neighbors == 3)" +
"color = vec4(0);" +
"else if (live == 0 && neighbors == 3)" +
"color = vec4(1);" +
"else color = vec4(0);" +
"}",
["source"],
[]
),
myr.getWidth() / scale,
myr.getHeight() / scale);
let brushDown = false;
myr.setClearColor(new Myr.Color(0.1, 0.3, 0.6));
myr.utils.loop(function(timeStep) {
texture.update();
myr.bind();
myr.clear();
texture.getFront().drawScaled(0, 0, scale, scale);
myr.flush();
return true;
});
canvas.addEventListener("mousedown", event => {
brushDown = true;
});
canvas.addEventListener("mouseup", () => {
brushDown = false;
});
canvas.addEventListener("mousemove", event => {
mousePrevious.x = mouseCurrent.x;
mousePrevious.y = mouseCurrent.y;
mouseCurrent.x = (event.clientX - rect.left) / scale;
mouseCurrent.y = (event.clientY - rect.top) / scale;
if (brushDown && !mousePrevious.equals(mouseCurrent)) {
texture.getFront().bind();
myr.primitives.drawLine(
Myr.Color.WHITE,
mousePrevious.x,
mousePrevious.y,
mouseCurrent.x,
mouseCurrent.y
);
}
});
</script>
</body>
</html>