feat: sub 1ms draw times

Author: Oskar Widmark

TODO.md

@@ -1,6 +1,6 @@
 Features:
 
-- [ ] Sub 1ms draw times
+- [x] Sub 1ms draw times
 - [ ] Parallelization for algorithms
 - [ ] Merge sort
 - [x] 2D color matrix visualization

src/App.tsx

@@ -45,6 +45,9 @@ class App extends React.Component<Props> {
   private nbrOfSwaps: number = 0;
   private nbrOfComparisons: number = 0;
   private nbrOfAuxWrites: number = 0;
+  private swapCounter = 0;
+  private comparisonCounter = 0;
+  private auxWriteCounter = 0;
   state: AppState;
   canvasController: CanvasController;
 
@@ -203,7 +206,7 @@ class App extends React.Component<Props> {
         nbrOfSwaps: prevState.nbrOfSwaps + 1,
       }));
       this.canvasController.highlight(arr, [i1, i2]);
-      await sleep(this.state.settings.swapTime);
+      await sleep(this.state.settings.swapTime, this.swapCounter++);
     }
   };
 
@@ -255,7 +258,7 @@ class App extends React.Component<Props> {
       }));
       const indexes = 'value' in params ? [i1] : [i1, params.i2];
       this.canvasController.highlight(arr, indexes);
-      await sleep(this.state.settings.compareTime);
+      await sleep(this.state.settings.compareTime, this.comparisonCounter++);
     }
 
     const value = 'value' in params ? params.value : arr[params.i2].value;
@@ -296,7 +299,7 @@ class App extends React.Component<Props> {
         nbrOfAuxWrites: prevState.nbrOfAuxWrites + 1,
       }));
       this.canvasController.highlight(arr, [i]);
-      await sleep(this.state.settings.auxWriteTime);
+      await sleep(this.state.settings.auxWriteTime, this.auxWriteCounter++);
     }
   };
 

src/components/TimeSlider.tsx

@@ -15,7 +15,7 @@ export function TimeSlider(props: {
       valueLabelDisplay="auto"
       min={0}
       step={0.1}
-      max={10}
+      max={14}
       scale={(x) => timeScale(x)}
       onChangeCommitted={(_, value) => changeTime(timeScale(value as number))}
       valueLabelFormat={(value: number) => `${value} ms`}

src/utils.ts

@@ -37,10 +37,16 @@ export const createArr = (columnNbr: number): SortValue[] =>
     return { value: a, id: idx };
   });
 
-export const timeScale = (x: number) => Math.round(2 ** x) - 1;
-export const inverseTimeScale = (x: number) => Math.log2(x + 1);
+export const timeScale = (x: number) => (Math.round(2 ** x) - 1) / 10;
+export const inverseTimeScale = (x: number) => Math.log2((x + 1) * 10);
 
-export const sleep = (ms: number) => {
+export const sleep = (ms: number, counter: number) => {
+  if (ms < 1) {
+    const hz = Math.round(1 / ms);
+    if (counter % hz !== 0) {
+      return Promise.resolve();
+    }
+  }
   return new Promise((resolve) => setTimeout(resolve, ms));
 };