music video renderer web app
deftoku.digi.rip
audio
visualizer
webapp
cd-bottom: gradients no longer rotate with cd
+10
-7
+10
-7
src/visualizers/cd-bottom.ts
+10
-7
src/visualizers/cd-bottom.ts
···
43
43
const streakSize = outerRadius * STREAK_SIZE_RATIO;
44
44
const rotationSpeed = Number(options.speed) * dt;
45
45
46
-
// rotation
46
+
// stationary lighting layer (disc surface)
47
47
ctx.save();
48
48
ctx.translate(cx, cy);
49
-
ctx.rotate(angle);
50
49
51
-
// disc surface (clipped)
52
-
ctx.save();
50
+
// clip to disc donut shape
53
51
ctx.beginPath();
54
52
ctx.arc(0, 0, outerRadius, 0, Math.PI * 2);
55
-
ctx.arc(0, 0, hubInnerRadius, 0, Math.PI * 2, true); // exclude inner ring
53
+
ctx.arc(0, 0, hubInnerRadius, 0, Math.PI * 2, true);
56
54
ctx.clip();
57
55
58
56
// base radial gradiant
···
100
98
[1.0, "rgba(255,255,255,0)"],
101
99
]);
102
100
103
-
ctx.restore(); // end disc shape
101
+
ctx.restore(); // end stationary lighting
102
+
103
+
// rotating elements (hub, text, rings)
104
+
ctx.save();
105
+
ctx.translate(cx, cy);
106
+
ctx.rotate(angle);
104
107
105
108
// hub ring - lead in
106
109
ctx.beginPath();
···
177
180
ctx.fillStyle = "rgba(255,255,255,0.15)";
178
181
ctx.fill();
179
182
180
-
ctx.restore(); // end rotation
183
+
ctx.restore(); // end rotating elements
181
184
182
185
// specular highlight
183
186
ctx.save();