/
unminified.html
91 lines (76 loc) · 2.09 KB
/
unminified.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
<canvas></canvas>
<script>
w = window;
d = document;
c = d.querySelector('canvas');
cx = c.getContext('2d');
c.width = w.innerWidth;
c.height = w.innerHeight;
e = [];
ma = 100;
mx = 0;
my = 0;
f = 0;
h = 1;
o = null;
r = () => {
ma = (ma + Math.PI / 360) % (Math.PI * 2);
mx = (c.width / 2) + 10 * Math.cos(ma * 10);
my = (c.height / 2) + 50 * Math.sin(ma * 10);
f += h;
if(o) o.frequency.value = -my*30;
e.push({x:mx, y:my, scale:5});
for(var i=0; i<=e.length-1 ;i++) {
if(i == e.length - 1) drawStar(e[i].x, e[i].y, 5, 5, 12);
else {
e[i].scale += e[i].scale/13;
cx.beginPath();
cx.arc(e[i].x, e[i].y, e[i].scale, 0, 2 * Math.PI, false);
cx.fillStyle ="#fff";
cx.fill();
cx.lineWidth = 1;
cx.strokeStyle ='hsl(' + (i / f * 900) + ', 50%,70%)';
cx.stroke();
}
}
if(e.length > 70) e.shift();
if(f > 70) h = -1;
if(f <= 0) h = 1;
w.requestAnimationFrame(r)
}
drawStar = (ax, ay, spikes, outerRadius, innerRadius) => {
var rot=Math.PI/2*3;
var x=ax;
var y=ay;
var step=Math.PI/spikes;
cx.beginPath();
cx.moveTo(ax, ay-outerRadius)
for(i=0;i<spikes;i++){
x=ax+Math.cos(rot)*outerRadius;
y=ay+Math.sin(rot)*outerRadius;
cx.lineTo(x,y)
rot+=step
x=ax+Math.cos(rot)*innerRadius;
y=ay+Math.sin(rot)*innerRadius;
cx.lineTo(x,y)
rot+=step
}
cx.lineTo(ax, ay-outerRadius);
cx.closePath();
cx.lineWidth=2;
cx.strokeStyle='686735';
cx.stroke();
cx.fillStyle='fdfb56';
cx.fill();
}
s = 0;
d.addEventListener('click', (e)=> {
if(s==1) return;
ax = new AudioContext();
o = ax.createOscillator();
o.connect(ax.destination);
o.start();
s=1;
});
r();
</script>