-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
55 lines (46 loc) · 1.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fireworks</title>
</head>
<body>
<canvas></canvas>
<script>
var t = 0;
var c = document.querySelector("canvas");
var $ = c.getContext('2d');
c.width = window.innerWidth;
c.height = window.innerHeight;
$.fillStyle = 'hsla(0,0%,0%,1)';
window.addEventListener('resize', function() {
c.width = window.innerWidth;
c.height = window.innerHeight;
}, false);
function draw() {
$.globalCompositeOperation = 'source-over';
$.fillStyle = 'hsla(0,0%,0%,.1)';
$.fillRect(0, 0, c.width, c.height);
var foo, i, j, r;
foo = Math.sin(t) * 2 * Math.PI;
for (i=0; i<400; ++i) {
r = 400 * Math.sin(i * foo);
$.globalCompositeOperation = '';
$.fillStyle = 'hsla(' + i + 12 + ',100%, 60%,1)';
$.beginPath();
$.arc(Math.sin(i) * r + (c.width / 2),
Math.cos(i) * r + (c.height / 2),
1.5, 0, Math.PI * 2);
$.fill();
}
t += 0.000005;
return t %= 2 * Math.PI;
};
function run() {
window.requestAnimationFrame(run);
draw();
}
run();
</script>
</body>
</html>