Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit51ac79b

Browse files
committed
Feature: Added sample order.
Sample type now refers to value
1 parentc302757 commit51ac79b

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
<pid='SampleTypeText'>Sample Type:</p>
1919
<inputid='SampleType'class='Slider'type='Range'step=1min=0max=5value=0(input)='SetSampleType($event)'>
2020
</div>
21+
<divclass='FormGroup'>
22+
<pid='SampleOrderText'>Sample Order:</p>
23+
<inputid='SampleOrder'class='Slider'type='Range'step=1min=0max=1value=0(input)='SetSampleOrder($event)'>
24+
</div>
2125
</div>
2226
<divhidden>
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(leti=0;i<dataLength;i++){
6767
data[i].index=i;
6868
}
69+
6970
data.sort((a,b)=>a.id-b.id);
71+
7072
for(leti=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)returna.index-b.index;
7578
return0;
@@ -104,6 +107,18 @@ export class submenuComponent {
104107
consttextElement=document.getElementById('SampleTypeText');
105108
if(textElementinstanceofHTMLElement)textElement.innerText='Sample Type: '+val;
106109
}
110+
111+
SetSampleOrder(object:Event|number){
112+
if(typeofobject!=='number'){
113+
object=(<HTMLInputElement>object.currentTarget).valueAsNumber;
114+
SetCookie('SampleOrder',object.toString());
115+
}
116+
constval=sampleOrders[Math.round(object)].name;
117+
settings.SampleOrder=val;
118+
119+
consttextElement=document.getElementById('SampleOrderText');
120+
if(textElementinstanceofHTMLElement)textElement.innerText='Sample Order: '+val;
121+
}
107122

108123
SetSoundType(object:Event|number){
109124
if(typeofobject!=='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
exportconstname='Gray';
2-
exportconstcolor=(index:number,totalArray:number)=>{
3-
constgrayHex=Math.floor((index/totalArray)*255).toString(16).padStart(2,'0');
2+
exportconstcolor=(totalLength:number,startPosition:number,endPosition:number)=>{
3+
constgrayHex=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
exportconstname='Monocolor';
2-
exportconstcolor=()=>{
2+
exportconstcolor=(totalLength:number,startPosition:number,endPosition:number)=>{
33
return'#ff0000';
44
};
55
exportconsthighlightColor=()=>{

‎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
exportconstname='Rainbow';
4-
exportconstcolor=(index:number,totalArray:number)=>{
5-
returnsineHSVToHex((index/totalArray)*360,100,100);
4+
exportconstcolor=(totalLength:number,startPosition:number,endPosition:number)=>{
5+
returnsineHSVToHex((endPosition/totalLength)*360,100,100);
66
};
77
exportconsthighlightColor=()=>{
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
exportconstname='Reverse';
4-
exportconstcolor=(_:number,totalArray:number,position:number)=>{
5-
returnsineHSVToHex((position/totalArray)*360,100,100);
4+
exportconstcolor=(totalLength:number,startPosition:number,endPosition:number)=>{
5+
returnsineHSVToHex((startPosition/totalLength)*360,100,100);
66
};
77
exportconsthighlightColor=()=>{
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
exportconstname='History Graph';
4-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
4+
55
exportconstalgorithm=(array:IDataPoint[],canvas:HTMLCanvasElement,activeColor:()=>string,data:any)=>{
66
constcontext=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
importgraphColorsfrom'./graphColor/_index';
22
importgraphTypesfrom'./graphType/_index';
33
importsampleTypesfrom'./sampleType/_index';
4+
importsampleOrdersfrom'./sampleOrder/_index';
45
importsortingAlgorithmsfrom'./sortingAlgorithm/_index';
56
importsoundTypesfrom'./soundType/_index';
67

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

910
exportconstsettings={
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,

‎src/settings/sampleOrder/_index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import*asreversefrom'../sampleOrder/reverse';
2+
import*asrandomfrom'../sampleOrder/random';
3+
4+
exportdefault[reverse,random];

‎src/settings/sampleOrder/random.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import{randomizeArray}from'../../shared/utils';
2+
import{IDataPoint}from'../../shared/interfaces';
3+
4+
exportconstname='Random';
5+
exportconstalgorithm=(coordinates:IDataPoint[]):IDataPoint[]=>{
6+
coordinates=randomizeArray(coordinates);
7+
console.log(coordinates);
8+
returncoordinates;
9+
};

‎src/settings/sampleOrder/reverse.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import{IDataPoint}from'../../shared/interfaces';
2+
3+
exportconstname='Reverse';
4+
exportconstalgorithm=(coordinates:IDataPoint[]):IDataPoint[]=>{
5+
coordinates.reverse();
6+
returncoordinates;
7+
};

‎src/settings/sampleType/_index.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,5 @@ import * as exponential from './exponential';
33
import*aslinearfrom'./linear';
44
import*aslogarithmicfrom'./logarithmic';
55
import*asrandomfrom'./random';
6-
import*asreversefrom'./reverse';
76

8-
exportdefault[constant,exponential,linear,logarithmic,random,reverse];
7+
exportdefault[constant,exponential,linear,logarithmic,random];

‎src/settings/sampleType/_shared.ts

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/settings/sampleType/constant.ts

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import{getRandomNumber}from'./_shared';
2-
31
exportconstname='Constant';
4-
exportconstalgorithm=(_:number[],__:number):[number,number]=>{
5-
constvalue=getRandomNumber([0,1,2,3,4]);
6-
return[Number.NaN,value];
2+
exportconstalgorithm=(index:number,totalLength:number):number=>{
3+
constsectionLength=Math.sqrt(totalLength);
4+
constvalue=Math.floor(index/sectionLength);
5+
returnvalue;
76
};
Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
import{getRandomNumber}from'./_shared';
2-
31
exportconstname='Exponential';
4-
exportconstalgorithm=(numbers:number[]):[number,number]=>{
5-
constrandomNumber=getRandomNumber(numbers);
6-
return[randomNumber,randomNumber**2.5];
2+
exportconstalgorithm=(index:number,totalLength:number):number=>{
3+
constvalue=index**2.5;
4+
returnvalue;
75
};

‎src/settings/sampleType/linear.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import{getRandomNumber}from'./_shared';
2-
31
exportconstname='Linear';
4-
exportconstalgorithm=(numbers:number[]):[number,number]=>{
5-
constrandomNumber=getRandomNumber(numbers);
6-
return[randomNumber,randomNumber];
2+
exportconstalgorithm=(index:number,totalLength:number):number=>{
3+
returnindex;
74
};
Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
import{getRandomNumber}from'./_shared';
2-
31
exportconstname='Logarithmic';
4-
exportconstalgorithm=(numbers:number[]):[number,number]=>{
5-
constrandomNumber=getRandomNumber(numbers);
6-
return[randomNumber,Math.log(randomNumber+1)];
2+
exportconstalgorithm=(index:number,totalLength:number):number=>{
3+
constvalue=Math.log2(index);
4+
returnvalue;
75
};

‎src/settings/sampleType/random.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
exportconstname='Random';
2-
exportconstalgorithm=(_:number[],__:number,totalLength:number):[number,number]=>{
2+
exportconstalgorithm=(index:number,totalLength:number):number=>{
33
constvalue=Math.random()*totalLength;
4-
return[Number.NaN,value];
4+
returnvalue;
55
};

‎src/settings/sampleType/reverse.ts

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎src/settings/sortingAlgorithm/stoogeSort.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ export const algorithm = (arr: IDataPoint[], data: any): [IDataPoint[], any] =>
2828
}
2929

3030
constcurrentNest=data.nest.shift();
31-
3231

3332
data.highlight.push(currentNest[0],currentNest[1]);
3433
data.actionPoint=arr[currentNest[0]];

‎src/shared/generateCoordinates.ts

Lines changed: 22 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,48 @@
1-
import{graphColors,sampleTypes,settings}from'src/settings';
1+
import{graphColors,sampleOrders,sampleTypes,settings}from'src/settings';
22
import{IDataPoint}from'./interfaces';
3-
import{randomizeArray}from'./utils';
3+
import{sortGraph}from'./sortGraph';
44

55
/**
6-
* Generate random coordinates usingoptions.
6+
* Generate random coordinates usingsettings.
77
*@returns {IDataPoint[]}} - The coordinates.
88
*/
99
exportconstGenerateCoordinates=():Array<IDataPoint>=>{
1010
constsampleSize=settings.SampleSize;
11-
constcolorFunction=graphColors?.find(e=>e.name===settings.GraphColor)?.color;
12-
constsampleFunction=sampleTypes?.find(e=>e.name===settings.SampleType)?.algorithm;
1311

14-
if(colorFunction===undefined||sampleFunction===undefined)return[];
12+
constcolorFunction=graphColors.find(e=>e.name===settings.GraphColor)?.color;
13+
constsampleTypeFunction=sampleTypes.find(e=>e.name===settings.SampleType)?.algorithm;
14+
constsampleOrderFunction=sampleOrders.find(e=>e.name===settings.SampleOrder)?.algorithm;
1515

16-
constnumbers:number[]=Array.from(Array(sampleSize).keys());
17-
constcoordinates:Array<IDataPoint>=[];
16+
if(colorFunction===undefined||sampleTypeFunction===undefined||sampleOrderFunction===undefined)return[];
17+
18+
letcoordinates:Array<IDataPoint>=[];
1819
lettopDataPoint=0;
19-
letextraRandom=false;
2020

21-
while(numbers.length>0){
22-
23-
const[dataPosition,dataValue]=sampleFunction(numbers,sampleSize-numbers.length,sampleSize);
24-
25-
numbers.splice(numbers.indexOf(dataPosition),1);
21+
for(leti=0;i<sampleSize;i++){
22+
constdataValue=sampleTypeFunction(i,sampleSize);
2623

2724
coordinates.push({
2825
height:0,
2926
data:dataValue,
30-
color:Number.isNaN(dataPosition) ?'#ff4040' :colorFunction(dataPosition,sampleSize,coordinates.length),
31-
id:dataPosition
27+
color:'#ff4040',
28+
id:-1,
3229
});
3330
if(topDataPoint<dataValue)topDataPoint=dataValue;
34-
if(Number.isNaN(dataPosition))extraRandom=true;
3531
}
3632

33+
coordinates=coordinates.sort((a,b)=>a.data-b.data);
34+
3735
for(leti=0;i<coordinates.length;i++){
38-
constcurrentResult=coordinates[i];
39-
currentResult.height=(100*currentResult.data)/topDataPoint;
36+
coordinates[i].id=i;
4037
}
4138

42-
if(extraRandom===true){
43-
constresultsLength=coordinates.length;
44-
39+
coordinates=sampleOrderFunction(coordinates);
4540

46-
for(leti=0;i<resultsLength;i++){
47-
(coordinates[i].idasnumber|undefined)=undefined;
48-
}
49-
50-
for(leti=0;i<resultsLength;i++){
51-
constj=Math.floor(Math.random()*(i+1));
52-
[coordinates[i],coordinates[j]]=[coordinates[j],coordinates[i]];
53-
}
54-
55-
randomizeArray(coordinates);
41+
for(leti=0;i<coordinates.length;i++){
42+
constcurrentResult=coordinates[i];
43+
currentResult.height=(100*currentResult.data)/topDataPoint;
44+
currentResult.color=colorFunction(coordinates.length,i,currentResult.id);
5645
}
57-
46+
5847
returncoordinates;
5948
};

‎src/shared/sortGraph.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,11 @@ import { isArraySorted } from './utils';
99
*@param {HomeComponent} app - The component containing app variables.
1010
*@param {string} message - The error message.
1111
*/
12-
constsuspendSorting=(app:HomeComponent,message?:string)=>{
12+
constsuspendSorting=(app:HomeComponent,graphData:any,message?:string)=>{
1313
if(typeofmessage==='string')app.ErrorMessage='Error: '+message;
1414
app.Oscillator?.stop();
1515
window.clearInterval(app.SortingInterval);
16+
RenderGraph(app.Coordinates,graphData??{});
1617
return;
1718
};
1819

@@ -60,7 +61,7 @@ export const sortGraph = (app: HomeComponent) => {
6061
RenderGraph(app.Coordinates);
6162

6263
constsortingAlgorithm=sortingAlgorithms.find(e=>e.name===settings.SortingAlgorithm);
63-
if(sortingAlgorithm===undefined)returnsuspendSorting(app,'Sorting Algorithm not found');
64+
if(sortingAlgorithm===undefined)returnsuspendSorting(app,{},'Sorting Algorithm not found');
6465

6566
constsortDescription=document.getElementById('StatisticsSortDescription');
6667
constsortExample=document.getElementById('StatisticsSortExample');
@@ -96,8 +97,8 @@ export const sortGraph = (app: HomeComponent) => {
9697

9798
constgraphTypeFunction=graphTypes.find(e=>e.name===settings.GraphType)?.algorithm;
9899
constgraphColorActiveFunction=graphColors.find(e=>e.name===settings.GraphColor)?.highlightColor;
99-
if(graphColorActiveFunction===undefined)returnsuspendSorting(app,'Graph Color not found');
100-
if(graphTypeFunction===undefined)returnsuspendSorting(app,'Graph Type not found');
100+
if(graphColorActiveFunction===undefined)returnsuspendSorting(app,graphData,'Graph Color not found');
101+
if(graphTypeFunction===undefined)returnsuspendSorting(app,graphData,'Graph Type not found');
101102

102103
if(app.Coordinates===undefined){
103104
app.ErrorMessage='Error: There is not enough valid data points to sort.';
@@ -114,7 +115,7 @@ export const sortGraph = (app: HomeComponent) => {
114115
}
115116
app.Oscillator?.stop();
116117
graphData.done=true;
117-
returnsuspendSorting(app,error);
118+
returnsuspendSorting(app,graphData,error);
118119
}
119120

120121
data.highlight=[];

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp