-
Notifications
You must be signed in to change notification settings - Fork 1
/
html_renderer.js
70 lines (63 loc) · 1.6 KB
/
html_renderer.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
var clientRenderPage = function(frameData, delay) {
return `
<html>
<body>
<canvas id="canvas" style="background: black;" width="510px" height="170px"></canvas>
<script type="text/javascript">
function renderFrame(frameData) {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var j = 0; j < 8; j++) {
for (var i = 0; i < 25; i++) {
ctx.beginPath();
ctx.arc(10+20*i, 10+20*j, 5, 0, 2 * Math.PI);
ctx.fillStyle = "rgba(" +
frameData[j+i*8].r + "," +
frameData[j+i*8].g + "," +
frameData[j+i*8].b + ")";
ctx.fill();
}
}
}
function render(frames, delay) {
var remainingFrames = frames.splice(1);
if (remainingFrames.length > 0) {
renderFrame(frames[0]);
setTimeout(
function() {
render(remainingFrames, delay);
},
delay
);
} else {
renderFrame(frames[0]);
}
}
function loopRender() {
var animationData = ${frameData};
var totalDelay = ${delay} * (animationData.length + 1);
render(animationData, ${delay});
setTimeout(loopRender, totalDelay);
}
loopRender();
</script>
</body>
</html>
`
}
module.exports = class HTMLRenderer {
render(frames, delay) {
var out = "[";
for (var frame = 0; frame < frames.length; frame++ ) {
out += "[";
for (var i = 0; i < frames[frame].frameData.length; i++) {
var data = frames[frame].frameData[i];
out += `{r:${data.r},g:${data.g},b:${data.b}},`;
}
out += "],"
}
out += "]";
return clientRenderPage(out, delay);
}
}