Select sort (Selection sort)
Select Sort is now the smallest in a series of arrays, put it in the first position of the array, then select the second small one and place it in the second position.
If the unordered array is a, the first round is compared to the size of a[0] and a[1], if A[0]>A[1], then two interchanges, otherwise not exchanged. This gets the a[0] is the smaller that number.
Then a[0] and a[2] are compared, if a[0]>a[2], then two exchanges, otherwise do not exchange. This gets the a[0] is the smaller that number.
Until A[0] is compared to the last number to get a smaller number placed in the a[0] position.
This is the first round.
The second round is from a[1] and the remaining number is compared, resulting in a smaller number. This keeps looping, knowing the last two digits.
The visualization code is as follows:
Main file:
Index.html
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>Select the Sort algorithm animation</title></Head><Bodystyle= "height:100%, width:1000px;"> <CanvasID= "Canvas"style= "height:100%">the current browser does not support canvas, please change your browser and try again</Canvas> <Scriptsrc= "Js/algovishelper.js"></Script> <Scriptsrc= "Js/algoframe.js"></Script> <Scriptsrc= "Js/selectionsortdata.js"></Script> <Scriptsrc= "Js/algovisualizer.js"></Script> <Scripttype= "Text/javascript">window.onload= function(){ varScenewidth= +; varSceneheight= -; varCanvas=document.getElementById ('Canvas'); varg2d=Canvas.getcontext ('2d'); Canvas.width=Scenewidth; Canvas.height=Sceneheight; varN= -; varVisualizer= NewAlgovisualizer (G2d, Scenewidth, Sceneheight, -); } </Script></Body></HTML>
JS file:
Algoframe.js
class algoframe{Constructor (G2d, title, Canvaswidth, canvasheight) {this.g2d = G2d; This.canvaswidth = Canvaswidth; This.canvasheight = Canvasheight; } getcanvaswidth () {return this.canvaswidth; } getcanvasheight () {return this.canvasheight; } repaint () {//Draw This.g2d.clearRect (0, 0, this.canvaswidth, this.canvasheight); var w = THIS.CANVASWIDTH/THIS.DATA.N (); for (var i = 0; I< This. Data. N (); i++) {if (I < This.data.orderedIndex) {Algovishelper.setcolor (this.g2d, algovishelper.red); }else{Algovishelper.setcolor (This.g2d, Algovishelper.grey); } if (I== This.data.currentCompareIndex) {Algovishelper.setcolor (this.g2d, Algovishelper.lightblue); } if (I== This.data.currentMinIndex) {Algovishelper.setcolor (this.g2d, Algovishelper.indigo); } algovishelper.fillrectangle (This.g2d, I * W, this.canvasheight-this.data.get (i), w-1, This.data.get (i)); }} render (data) {This.data= data; This.repaint (); }}
Algovishelper.js
Class algovishelper{ //Constructor constructor () {} static FillRectangle (g2d, X, Y, W, h) { g2d.fillrect (x, Y, W, h); } Static SetColor (g2d, color) { G2d.fillstyle = color; }} The static property in the class algovishelper.red = "#F44336"; Algovishelper.pink = "#E91E63"; Algovishelper.purple = "#9C27B0"; Algovishelper.deeppurple = "#673AB7"; Algovishelper.indigo = "#3F51B5"; Algovishelper.blue = "#2196F3"; Algovishelper.lightblue = "#03A9F4"; Algovishelper.cyan = "#00BCD4"; Algovishelper.teal = "#009688"; Algovishelper.green = "#4CAF50"; Algovishelper.lightgreen = "#8BC34A"; Algovishelper.lime = "#CDDC39"; Algovishelper.yellow = "#FFEB3B"; Algovishelper.amber = "#FFC107"; Algovishelper.orange = "#FF9800"; Algovishelper.deeporange = "#FF5722"; Algovishelper.brown = "#795548"; Algovishelper.grey = "#9E9E9E"; Algovishelper.bluegrey = "#607D8B"; Algovishelper.black = "#000000"; Algovishelper.white = "#FFFFFF";Algovisualizer.js
class Algovisualizer {constructor (g2d, Scenewidth, Sceneheight, N) {//Animation execution Speed [MS] this. DELAY = 5; This.g2d = g2d; Initialize Data This.data = new Selectionsortdata (N, sceneheight); Animation entire Storage this.data_list = new Array (); Initialize View This.frame = new Algoframe (g2d, "Selection Sort visualization", Scenewidth, Sceneheight); This.run (); }//Generate Data Logic run () {this.setdata (0,-1,-1); for (var i = 0; I< This. Data. N (); i++) {//Search for the index of the minimum value in the [I, n] Interval//[0,1] before closing open 0 <= n< 1 var minindex= i; This.setdata (I,-1, Minindex); for (Var j= i+ 1; j < THIS.DATA.N (); j + +) {This.setdata (I, J, Minindex); if (This.data.get (j) < This.data.get (Minindex)) {Minindex= j; This.setdata (i, J, Minindex); }} this.data.swap (I, minindex); This.setdata (i + 1,-1,-1); } this.setdata (THIS.DATA.N (),-1,-1); Render data This.render (); } setData (Orderedindex, Currentcompareindex, Currentminindex) {var data= newSelectionsortdata (); Data.orderedindex= Orderedindex; Data.currentcompareindex= Currentcompareindex; Data.currentminindex= Currentminindex; data.numbers= This.data.numbers.slice (); This.data_list[this.data_list.length]= Data} render () {var i= 0; setinterval (()=>{if (i< This. Data_list.length) {This.frame.render (this.data_list[i]); i++; }}, this. DELAY); }}
Selectionsortdata.js
class selectionsortdata{Constructor (n, randombound) {this.numbers = new Array (n); This.orderedindex =-1; [0...orderedIndex] is ordered this.currentcompareindex =-1; Index of the element currently being compared This.currentminindex =-1; The index of the smallest element currently found for (var i = 0; I<N; i + +) {This.numbers[i]= parseint ((math.random () *randombound))+ 1; }} N () {return this.numbers.length; } get (Index) {if (Index < 0 | | | Index>= this.numbers.length) {Throw Referenceerror ("Invalid Index to access Sort Data."); } return This.numbers[index]; } swap (I, j) {if (I<0| | I>= This.numbers.length | | J<0| | J>= this.numbers.length) {Throw Referenceerror ("Invalid Index to access Sort Data."); } var t = this.numbers[i]; This.numbers[i] = This.numbers[j]; THIS.NUMBERS[J] = t; }}
File structure:
JS folder:
Visualization process:
Select Sort Visualization
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
