|
| 1 | +# Sorting Algorithm Visualizer |
| 2 | + |
| 3 | +View sorting algorithms [here](https://sorting-algorithm-jet.vercel.app/). |
| 4 | + |
| 5 | +## How to View |
| 6 | +Simply prepare your favorite modern browser. |
| 7 | + |
| 8 | +1. Navigate to https://sorting-algorithm-jet.vercel.app/. |
| 9 | + |
| 10 | +2. To select a specific sorting algorithm: |
| 11 | + |
| 12 | + a. Press the button on the top of the page after the "Sorting with" text. |
| 13 | + |
| 14 | + b. Press on any of the buttons displayed. |
| 15 | + |
| 16 | +3. To customize graph, sound, samples, or sorting: |
| 17 | + |
| 18 | + a. Look either below the graph or to the right. Click on the menu, for example: *Sound Settings*. |
| 19 | + |
| 20 | + b. Look over the slider menu that appeared below the menu containing button you clicked. |
| 21 | + |
| 22 | + c. To change an option, slide the square along th
8A63
e slider. |
| 23 | + |
| 24 | +## Contributing |
| 25 | +If you wanted to add additional algorithms, such as sorting algorithms. Navigate to `src/settings/{Setting Name}` and create a `.ts` file. To help with when creating algorithms, please take these advice. |
| 26 | + |
| 27 | +| Settings Name | Advice | |
| 28 | +|:-:|:-| |
| 29 | +| Sorting Algorithm | <li>Variables that persist after every iteration is stored in the `data` parameter as `any`.</li><li>Sorting algorithms are supposed to only perform a few actions to the array everytime it's called.</li><li>With recusive algorithms (like *Stooge Sort*) you could unravel algorithms into a "nests" array. Replace each recursive call by pushing to the "nests" array instead. Refer to `StoogeSort.ts` for better understanding.</li><li>With Iterative algorithms (like *Gnome Sort*) replace all `for(a; b; c) {d}` with: `a; if (b) { d }; c`. Refer to `GnomeSort.ts` for better understanding.</li><li>Push indexes of coordinates changing or comparing to `data.highlight`. Define the most important coordinate to `data.actionPoint` </li> | |
| 30 | +| Graph Color | <li>Parameters: `final position`, `total length`, `beginning position`.</li><li>Highlight color is the color of the "sweeper".</li>| |
| 31 | +| Graph Type | <li>Variables that persist after every iteration is stored in the `graphData` parameter as `any`.</li><li>This is the slowest operation due to canvas. Minimize the number of times stroke or filled.</li> | |
| 32 | +| Sample Type | <li>Parameters: `available numbers`, `index`, `sample count`</li>. | |
| 33 | +| Sound Type | <li>Stopping the oscillator results in a *clicking* sounds that does not sound good every 4 millisecond. Instead, modify the oscillator in the parameter. | |
| 34 | + |
| 35 | +It's better to contribute something small/broken than to contribute nothing. |
0 commit comments