Visualizers

Author: NellowTCS

Build/src/platform/visualizers/visualizerLoader.ts

@@ -14,6 +14,20 @@ interface VisualizerDrawFunction {
   ): void;
 }
 
+export function getByteFrequencyData(
+  analyser: AnalyserNode,
+  dataArray: Uint8Array | Float32Array,
+): void {
+  analyser.getByteFrequencyData(dataArray as Uint8Array<ArrayBuffer>);
+}
+
+export function getByteTimeDomainData(
+  analyser: AnalyserNode,
+  dataArray: Uint8Array | Float32Array,
+): void {
+  analyser.getByteTimeDomainData(dataArray as Uint8Array<ArrayBuffer>);
+}
+
 export interface VisualizerType {
   name: string;
   draw: VisualizerDrawFunction;

Build/src/ui/resources/themes/Wallpapers/MusicViz/MusicViz.wallpaper.tsx

@@ -32,7 +32,7 @@ const MusicViz: React.FC<WallpaperProps> = ({ playbackState }) => {
         (analyser as any).getByteFrequencyData(dataArray);
         const barWidth = canvas.width / dataArray.length;
         for (let i = 0; i < dataArray.length; i++) {
-          const v = dataArray[i] / 255;
+          const v = (dataArray[i] ?? 0) / 255;
           const h = v * canvas.height;
           ctx.fillStyle = `hsl(${(i / dataArray.length) * 360}, 80%, ${30 + v * 50}%)`;
           ctx.fillRect(i * barWidth, canvas.height - h, Math.ceil(barWidth), h);

Build/src/ui/resources/themes/Wallpapers/Particles/Particles.wallpaper.tsx

@@ -36,7 +36,7 @@ const ParticlesWallpaper: React.FC<WallpaperProps> = () => {
     vy: (Math.random() - 0.5) * 0.5,
     size: Math.random() * 3 + 1,
     opacity: Math.random() * 0.8 + 0.2,
-    color: colors[Math.floor(Math.random() * colors.length)],
+    color: colors[Math.floor(Math.random() * colors.length)] ?? "#dda0dd",
   });
 
   const updateParticles = (width: number, height: number) => {

Build/src/ui/resources/visualizers/abstractart.visualizer.tsx

@@ -1,4 +1,4 @@
-import { VisualizerType } from "../../../platform/visualizers";
+import { VisualizerType, getByteFrequencyData } from "../../../platform/visualizers";
 
 const abstractArt: VisualizerType = {
   name: "Abstract Art",
@@ -20,13 +20,13 @@ const abstractArt: VisualizerType = {
     } = settings;
 
     if (dataType !== "frequency") return;
-    analyser.getByteFrequencyData(freqDataArray);
+    getByteFrequencyData(analyser, freqDataArray);
 
     ctx.fillStyle = backgroundColor;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
     for (let i = 0; i < shapeCount; i++) {
-      const amplitude = (freqDataArray as Uint8Array)[i] / 256.0;
+      const amplitude = (freqDataArray[i] ?? 0) / 256.0;
 
       ctx.fillStyle = shapeColor
         .replace("{hue}", `${(i * 360) / bufferLength}`)

Build/src/ui/resources/visualizers/architecturalblueprint.visualizer.tsx

@@ -1,4 +1,4 @@
-import { VisualizerType } from "../../../platform/visualizers";
+import { VisualizerType, getByteFrequencyData } from "../../../platform/visualizers";
 
 const architecturalBlueprint: VisualizerType = {
   name: "Architectural Blueprint",
@@ -22,15 +22,15 @@ const architecturalBlueprint: VisualizerType = {
     } = settings;
 
     if (dataType !== "frequency") return;
-    analyser.getByteFrequencyData(freqDataArray);
+    getByteFrequencyData(analyser, freqDataArray);
 
     ctx.fillStyle = backgroundColor;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
     const gridSize = (canvas.width - margin * 2) / Math.sqrt(bufferLength);
 
     for (let i = 0; i < bufferLength; i++) {
-      const amplitude = freqDataArray[i] / 256.0;
+      const amplitude = (freqDataArray[i] ?? 0) / 256.0;
       const col = i % Math.floor(Math.sqrt(bufferLength));
       const row = Math.floor(i / Math.floor(Math.sqrt(bufferLength)));
 

Build/src/ui/resources/visualizers/bargraph.visualizer.tsx

@@ -28,7 +28,7 @@ const barGraph: VisualizerType = {
     let x = 0;
 
     for (let i = 0; i < bufferLength; i++) {
-      const barHeight = (dataArray[i] / 255) * canvas.height;
+      const barHeight = ((dataArray[i] ?? 0) / 255) * canvas.height;
       ctx.fillStyle = barColor.replace("{hue}", `${(i * 360) / bufferLength}`);
       ctx.shadowBlur = shadowBlur;
       ctx.shadowColor = ctx.fillStyle as string;

Build/src/ui/resources/visualizers/biologicalcell.visualizer.tsx

@@ -1,4 +1,4 @@
-import { VisualizerType } from "../../../platform/visualizers";
+import { VisualizerType, getByteFrequencyData } from "../../../platform/visualizers";
 
 const biologicalCell: VisualizerType = {
   name: "Biological Cell",
@@ -22,7 +22,7 @@ const biologicalCell: VisualizerType = {
     } = settings;
 
     if (dataType !== "frequency") return;
-    analyser.getByteFrequencyData(freqDataArray);
+    getByteFrequencyData(analyser, freqDataArray);
 
     ctx.fillStyle = backgroundColor;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
@@ -37,7 +37,7 @@ const biologicalCell: VisualizerType = {
     ctx.stroke();
 
     for (let i = 0; i < bufferLength; i++) {
-      const amplitude = freqDataArray[i] / 256.0;
+      const amplitude = (freqDataArray[i] ?? 0) / 256.0;
       const angle = (i * Math.PI * 2) / bufferLength;
       const radius = cellRadius * (0.2 + amplitude * 0.6);
 

Build/src/ui/resources/visualizers/circuitboard.visualizer.tsx

@@ -1,4 +1,4 @@
-import { VisualizerType } from "../../../platform/visualizers";
+import { VisualizerType, getByteFrequencyData } from "../../../platform/visualizers";
 
 const circuitBoard: VisualizerType = {
   name: "Circuit Board",
@@ -20,13 +20,13 @@ const circuitBoard: VisualizerType = {
     } = settings;
 
     if (dataType !== "frequency") return;
-    analyser.getByteFrequencyData(freqDataArray);
+    getByteFrequencyData(analyser, freqDataArray);
 
     ctx.fillStyle = backgroundColor;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
     for (let i = 0; i < bufferLength; i++) {
-      const amplitude = freqDataArray[i] / 256.0;
+      const amplitude = (freqDataArray[i] ?? 0) / 256.0;
       const x = (i % (canvas.width / gridSize)) * gridSize;
       const y = Math.floor(i / (canvas.width / gridSize)) * gridSize;
 

Build/src/ui/resources/visualizers/circularspectrogram.visualizer.tsx

@@ -1,4 +1,4 @@
-import { VisualizerType } from "../../../platform/visualizers";
+import { VisualizerType, getByteFrequencyData } from "../../../platform/visualizers";
 
 const circularSpectrogram: VisualizerType = {
   name: "Circular Spectrogram",
@@ -20,7 +20,7 @@ const circularSpectrogram: VisualizerType = {
     } = settings;
 
     if (dataType !== "frequency") return;
-    analyser.getByteFrequencyData(freqDataArray);
+    getByteFrequencyData(analyser, freqDataArray);
 
     ctx.fillStyle = backgroundColor;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
@@ -31,7 +31,7 @@ const circularSpectrogram: VisualizerType = {
 
     for (let i = 0; i < bufferLength; i++) {
       const angle = (i * 2 * Math.PI) / bufferLength;
-      const amplitude = freqDataArray[i] / 256.0;
+      const amplitude = (freqDataArray[i] ?? 0) / 256.0;
       const x = centerX + radius * amplitude * Math.cos(angle);
       const y = centerY + radius * amplitude * Math.sin(angle);
 

Build/src/ui/resources/visualizers/circularwave.visualizer.tsx

@@ -1,4 +1,4 @@
-import { VisualizerType } from "../../../platform/visualizers";
+import { VisualizerType, getByteTimeDomainData } from "../../../platform/visualizers";
 
 const circularWave: VisualizerType = {
   name: "Circular Wave",
@@ -20,7 +20,7 @@ const circularWave: VisualizerType = {
     } = settings;
 
     if (dataType !== "time") return;
-    analyser.getByteTimeDomainData(timeDataArray);
+    getByteTimeDomainData(analyser, timeDataArray);
 
     ctx.fillStyle = backgroundColor;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
@@ -32,7 +32,7 @@ const circularWave: VisualizerType = {
     ctx.beginPath();
     for (let i = 0; i < bufferLength; i++) {
       const angle = (i * 2 * Math.PI) / bufferLength;
-      const value = (timeDataArray as Uint8Array)[i] / 128.0 - 1;
+      const value = (timeDataArray[i] ?? 0) / 128.0 - 1;
       const r = radius + value * waveAmplitude;
       const x = centerX + r * Math.cos(angle);
       const y = centerY + r * Math.sin(angle);