8000 Feature: Added sample order. · KyleSmith0905/Sorting-Algorithm@51ac79b · GitHub
[go: up one dir, main page]
Skip to content

Commit 51ac79b

Browse files
KyleSmith0905KyleSmith0905
committed
Feature: Added sample order.
Sample type now refers to value
1 parent c302757 commit 51ac79b

25 files changed

+110
-104
lines changed

‎README.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,10 @@ If you wanted to add additional algorithms, such as sorting algorithms. Navigate
2727
| Settings Name | Advice |
2828
|:-:|:-|
2929
| 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>|
30+
| Graph Color | <li>Highlight color is the color of the "sweeper".</li>|
3131
| 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>. |
32+
| Sample Type | <li>The order of the output does not matter.</li>. |
33+
| Sample Order | <li>The coordinates will be sorted when received.</li>. |
3334
| 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. |
3435

3536
It's better to contribute something small/broken than to contribute nothing.

‎src/app/_components/submenu.component.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ <h2>Sorting Settings</h2>
1818
<p id='SampleTypeText'>Sample Type:</p>
1919
<input id='SampleType'class='Slider' type='Range' step=1 min=0 max=5 value=0 (input)='SetSampleType($event)'>
2020
</div>
21+
<div class='FormGroup'>
22+
<p id='SampleOrderText'>Sample Order:</p>
23+
<input id='SampleOrder'class='Slider' type='Range' step=1 min=0 max=1 value=0 (input)='SetSampleOrder($event)'>
24+
</div>
2125
</div>
2226
<div hidden>
2327
<h2>Visual Settings</h2>

‎src/app/_components/submenu.component.ts

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Component, Input } from '@angular/core';
2-
import { graphColors, graphTypes, sampleTypes, settings, soundTypes } from 'src/settings';
3-
import { SetCookie } from 'src/shared/cookies';
4-
import { IDataPoint } from 'src/shared/interfaces';
5-
import { RenderGraph } from 'src/shared/renderGraph';
2+
import { graphColors, graphTypes, sampleOrders, sampleTypes, settings, soundTypes } from '../../settings';
3+
import { SetCookie } from '../../shared/cookies';
4+
import { IDataPoint } from '../../shared/interfaces';
5+
import { RenderGraph } from '../../shared/renderGraph';
66

77
@Component({
88
selector: 'component-submenu',
@@ -66,10 +66,13 @@ export class submenuComponent {
6666
for (let i = 0; i < dataLength; i++) {
6767
data[i].index = i;
6868
}
69+
6970
data.sort((a, b) => a.id - b.id);
71+
7072
for (let i = 0; i < dataLength; i++) {
71-
data[i].color = graphColors[index].color(i, dataLength, data[i].index ?? i);
73+
data[i].color = graphColors[index].color(dataLength, i, data[i].index ?? i);
7274
}
75+
7376
data.sort((a, b) => {
7477
if (a.index !== undefined && b.index !== undefined) return a.index - b.index;
7578
return 0;
@@ -104,6 +107,18 @@ export class submenuComponent {
104107
const textElement = document.getElementById('SampleTypeText');
105108
if (textElement instanceof HTMLElement) textElement.innerText = 'Sample Type: ' + val;
106109
}
110+
111+
SetSampleOrder(object: Event | number) {
112+
if (typeof object !== 'number') {
113+
object = (<HTMLInputElement>object.currentTarget).valueAsNumber;
114+
SetCookie('SampleOrder', object.toString());
115+
}
116+
const val = sampleOrders[Math.round(object)].name;
117+
settings.SampleOrder = val;
118+
119+
const textElement = document.getElementById('SampleOrderText');
120+
if (textElement instanceof HTMLElement) textElement.innerText = 'Sample Order: ' + val;
121+
}
107122

108123
SetSoundType(object: Event | number) {
109124
if (typeof object !== 'number') {

‎src/app/home/home.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export class HomeComponent {
4040
setInput('GraphType', defaultSettings.GraphType);
4141
setInput('GraphColor', defaultSettings.GraphColor);
4242
setInput('SampleType', defaultSettings.SampleType);
43+
setInput('SampleOrder', defaultSettings.SampleOrder);
4344
setInput('SoundType', defaultSettings.SoundType);
4445
setInput('SoundVolume', defaultSettings.SoundVolume);
4546
setInput('ShowSweeper', defaultSettings.ShowSweeper);

‎src/settings/graphColor/gray.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const name = 'Gray';
2-
export const color = (index: number, totalArray: number) => {
3-
const grayHex = Math.floor((index / totalArray) * 255).toString(16).padStart(2, '0');
2+
export const color = (totalLength: number, startPosition: number, endPosition: number) => {
3+
const grayHex = Math.floor((endPosition / totalLength) * 255).toString(16).padStart(2, '0');
44
return '#' + grayHex + grayHex + grayHex;
55
};
66

‎src/settings/graphColor/monocolor.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const name = 'Monocolor';
2-
export const color = () => {
2+
export const color = (totalLength: number, startPosition: number, endPosition: number) => {
33
return '#ff0000';
44
};
55
export const highlightColor = () => {

‎src/settings/graphColor/rainbow.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { sineHSVToHex } from './_shared';
22

33
export const name = 'Rainbow';
4-
export const color = (index: number, totalArray: number) => {
5-
return sineHSVToHex((index / totalArray) * 360, 100, 100);
4+
export const color = (totalLength: number, startPosition: number, endPosition: number) => {
5+
return sineHSVToHex((endPosition / totalLength) * 360, 100, 100);
66
};
77
export const highlightColor = () => {
88
return '#ffffff';

‎src/settings/graphColor/reverse.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { sineHSVToHex } from './_shared';
22

33
export const name = 'Reverse';
4-
export const color = (_: number, totalArray: number, position: number) => {
5-
return sineHSVToHex((position / totalArray) * 360, 100, 100);
4+
export const color = (totalLength: number, startPosition: number, endPosition: number) => {
5+
return sineHSVToHex((startPosition / totalLength) * 360, 100, 100);
66
};
77
export const highlightColor = () => {
88
return '#ffffff';

‎src/settings/graphType/historyGraph.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { IDataPoint } from 'src/shared/interfaces';
22

33
export const name = 'History Graph';
4-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
4+
55
export const algorithm = (array: IDataPoint[], canvas: HTMLCanvasElement, activeColor: () => string, data: any) => {
66
const context = canvas.getContext('2d');
77
if (!context) return;

‎src/settings/index.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import graphColors from './graphColor/_index';
22
import graphTypes from './graphType/_index';
33
import sampleTypes from './sampleType/_index';
4+
import sampleOrders from './sampleOrder/_index';
45
import sortingAlgorithms from './sortingAlgorithm/_index';
56
import soundTypes from './soundType/_index';
67

7-
export { graphColors, graphTypes, sampleTypes, sortingAlgorithms, soundTypes};
8+
export { graphColors, graphTypes, sampleOrders, sampleTypes, sortingAlgorithms, soundTypes};
89

910
export const settings = {
1011
SortingAlgorithm: 'Quick Sort',
@@ -13,6 +14,7 @@ export const settings = {
1314
GraphType: 'Bar Graph',
1415
GraphColor: 'Rainbow',
1516
SampleType: 'Linear',
17+
SampleOrder: 'Random',
1618
SoundType: 'Default',
1719
SoundVolume: 0.5,
1820
ShowSweeper: true,
@@ -31,10 +33,11 @@ export const defaultSettings = {
3133
GraphType: graphTypes.findIndex(e => e.name === 'History Graph'),
3234
GraphColor: graphColors.findIndex(e => e.name === 'Rainbow'),
3335
SampleType: sampleTypes.findIndex(e => e.name === 'Linear'),
36+
SampleOrder: sampleOrders.findIndex(e => e.name === 'Random'),
3437
SoundType: soundTypes.findIndex(e => e.name === 'Normal'),
3538
SoundVolume: 0.5,
3639
ShowSweeper: 1,
37-
40+
3841
RadixSortBy: 1,
3942
RadixSortRadix: 2,
4043
ShellSortGap: 2,

0 commit comments

Comments
 (0)
0