fix: add gaps to spiral

Author: Oskar Widmark

TODO.md

@@ -4,7 +4,7 @@ Features:
 - [x] Parallelization for algorithms
 - [ ] Merge sort
 - [x] 2D color matrix visualization
-- [ ] Spiral visualization
+- [x] Spiral visualization
 - [x] Highlight color based on action type
 - [x] Mobile browser support
 

src/canvas-controller.ts

@@ -1,3 +1,4 @@
+import { MAX_ANGLE_GAP_FACTOR } from './constants';
 import {
   ColorPreset,
   ColorSettings,
@@ -398,14 +399,20 @@ export class CanvasController {
       (maxRadius / (this.context.columnNbr + 1)) * (arr[i].value + 1);
     const startAngle = anglePerColumn * i;
     const endAngle = anglePerColumn * (i + 1);
+    const gap =
+      (anglePerColumn *
+        this.context.gapSize *
+        arr[i].value *
+        MAX_ANGLE_GAP_FACTOR) /
+      this.context.columnNbr;
 
     this.canvas2dCtx.fillStyle = color || this.getColumnColor(arr[i].value);
     this.canvas2dCtx.beginPath();
     this.canvas2dCtx.arc(
       centerX,
       centerY,
       this.snap(radius),
-      startAngle,
+      startAngle + gap,
       endAngle,
     );
     this.canvas2dCtx.lineTo(centerX, centerY);

src/constants.ts

@@ -12,6 +12,7 @@ import {
 export const RAINBOW_BACKGROUND_COLOR = '#282c34';
 export const DEFAULT_SOUND_VOLUME = 50;
 export const DEFAULT_SOUND_TYPE = 'triangle';
+export const MAX_ANGLE_GAP_FACTOR = 0.05;
 
 export const INIT_STATE: Omit<AppState, 'settings'> = {
   isSorting: false,

src/utils.ts

@@ -50,7 +50,6 @@ export const sleep = (ms: number, counter: number) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
 
-// something that sounds good
 export const toHz = (
   value: number,
   columnNbr: number,