feat: add visualization type

Author: Oskar Widmark

src/ColorTab.tsx

@@ -1,5 +1,5 @@
 import { FormControl, Stack, Grid2 } from '@mui/material';
-import { ColorPreset, ColorSettings } from './types';
+import { ColorPreset, ColorSettings, VisualizationType } from './types';
 import { TitledSelect } from './components/TitledSelect';
 import { ColorField } from './components/ColorField';
 
@@ -14,51 +14,68 @@ export function ColorTab(props: {
       columnColor2,
       highlightColor,
       backgroundColor,
+      visualizationType,
     },
     setColorSettings,
   } = props;
 
   return (
-    <FormControl component="fieldset">
-      <Stack direction="column" spacing={2} alignItems="left">
-        <TitledSelect
-          title="Preset"
-          value={colorPreset}
-          onSelect={(value) =>
-            setColorSettings({ colorPreset: value as ColorPreset })
-          }
-          options={Object.values(ColorPreset)}
-        />
-        {(colorPreset === ColorPreset.Custom ||
-          colorPreset === ColorPreset.CustomGradient) && (
-          <Grid2 container spacing={2}>
-            <ColorField
-              label={
-                colorPreset === ColorPreset.Custom ? 'Columns' : 'Columns(1)'
-              }
-              color={columnColor1}
-              setColor={(value) => setColorSettings({ columnColor1: value })}
-            />
-            {colorPreset === ColorPreset.CustomGradient && (
+    <>
+      <FormControl component="fieldset">
+        <Stack direction="column" spacing={2} alignItems="left">
+          <TitledSelect
+            title="Preset"
+            value={colorPreset}
+            onSelect={(value) =>
+              setColorSettings({ colorPreset: value as ColorPreset })
+            }
+            options={Object.values(ColorPreset)}
+          />
+          {(colorPreset === ColorPreset.Custom ||
+            colorPreset === ColorPreset.CustomGradient) && (
+            <Grid2 container spacing={2}>
               <ColorField
-                label="Columns(2)"
-                color={columnColor2}
-                setColor={(value) => setColorSettings({ columnColor2: value })}
+                label={
+                  colorPreset === ColorPreset.Custom ? 'Columns' : 'Columns(1)'
+                }
+                color={columnColor1}
+                setColor={(value) => setColorSettings({ columnColor1: value })}
               />
-            )}
-            <ColorField
-              label="Background"
-              color={backgroundColor}
-              setColor={(value) => setColorSettings({ backgroundColor: value })}
-            />
-            <ColorField
-              label="Highlight"
-              color={highlightColor}
-              setColor={(value) => setColorSettings({ highlightColor: value })}
-            />
-          </Grid2>
-        )}
-      </Stack>
-    </FormControl>
+              {colorPreset === ColorPreset.CustomGradient && (
+                <ColorField
+                  label="Columns(2)"
+                  color={columnColor2}
+                  setColor={(value) =>
+                    setColorSettings({ columnColor2: value })
+                  }
+                />
+              )}
+              <ColorField
+                label="Background"
+                color={backgroundColor}
+                setColor={(value) =>
+                  setColorSettings({ backgroundColor: value })
+                }
+              />
+              <ColorField
+                label="Highlight"
+                color={highlightColor}
+                setColor={(value) =>
+                  setColorSettings({ highlightColor: value })
+                }
+              />
+            </Grid2>
+          )}
+        </Stack>
+      </FormControl>
+      <TitledSelect
+        title="Visualization type"
+        value={visualizationType}
+        onSelect={(value) =>
+          setColorSettings({ visualizationType: value as VisualizationType })
+        }
+        options={Object.values(VisualizationType)}
+      />
+    </>
   );
 }

src/canvas-controller.ts

@@ -1,4 +1,4 @@
-import { ColorPreset, DrawData, SortValue } from './types';
+import { ColorPreset, DrawData, SortValue, VisualizationType } from './types';
 import { hsvToRgbHex, rgbHexToHsv } from './utils';
 
 export class CanvasController {
@@ -17,6 +17,7 @@ export class CanvasController {
       columnColor1: string;
       columnColor2: string;
       highlightColor: string;
+      visualizationType: VisualizationType;
     },
   ) {}
 
@@ -69,6 +70,10 @@ export class CanvasController {
     this.context.highlightColor = value;
   }
 
+  set visualizationType(value: VisualizationType) {
+    this.context.visualizationType = value;
+  }
+
   getGradientColor(value: number) {
     // eslint-disable-next-line prefer-const
     let [h1, s1, v1] = rgbHexToHsv(this.context.columnColor1);
@@ -245,13 +250,38 @@ export class CanvasController {
 
   private drawColumn = (arr: SortValue[], i: number, color?: string) => {
     const width = this.canvas2dCtx.canvas.width / this.context.columnNbr;
-    const height =
-      (this.canvas2dCtx.canvas.height / this.context.columnNbr) *
-      (arr[i].value + 1);
+    const height = this.getColumnHeight(arr[i].value);
     const startX = width * i;
+    const startY = this.getColumnStartY(arr[i].value);
 
     this.canvas2dCtx.fillStyle = color || this.getColumnColor1(arr[i].value);
-    this.fillRect(startX, 0, width, height);
+    this.fillRect(startX, startY, width, height);
+  };
+
+  private getColumnStartY = (value: number) => {
+    switch (this.context.visualizationType) {
+      case VisualizationType.Dots:
+        return (
+          (this.canvas2dCtx.canvas.height / this.context.columnNbr) *
+          (value - 1)
+        );
+      default:
+        return 0;
+    }
+  };
+
+  private getColumnHeight = (value: number) => {
+    switch (this.context.visualizationType) {
+      case VisualizationType.Bars:
+        return (
+          (this.canvas2dCtx.canvas.height / this.context.columnNbr) *
+          (value + 1)
+        );
+      case VisualizationType.Dots:
+        return this.canvas2dCtx.canvas.width / this.context.columnNbr;
+      case VisualizationType.Colors:
+        return this.canvas2dCtx.canvas.height;
+    }
   };
 
   private fillRect = (

src/constants.ts

@@ -4,6 +4,7 @@ import {
   ResetPreset,
   Settings,
   SortName,
+  VisualizationType,
 } from './types';
 
 export const RAINBOW_BACKGROUND_COLOR = '#282c34';
@@ -39,6 +40,7 @@ export const INIT_SETTINGS: Settings = {
   columnColor2: '#ffffff',
   backgroundColor: '#000000',
   highlightColor: '#ff0000',
+  visualizationType: VisualizationType.Bars,
   soundVolume: DEFAULT_SOUND_VOLUME,
   soundType: DEFAULT_SOUND_TYPE,
   frequencyRange: [200, 640],

src/types.ts

@@ -48,6 +48,12 @@ export type DrawData = {
   value: number;
 };
 
+export enum VisualizationType {
+  Bars = 'Bars',
+  Dots = 'Dots',
+  Colors = 'Colors',
+}
+
 export enum ColorPreset {
   Rainbow = 'Rainbow',
   Custom = 'Custom',
@@ -84,6 +90,7 @@ export type ColorSettings = {
   columnColor2: string;
   highlightColor: string;
   backgroundColor: string;
+  visualizationType: VisualizationType;
 };
 
 export type SoundSettings = {