Demonstration for Some Sorting Algorithms

If changes language, memory area will be cleaned.
🙋INSTRUCTION MANUAL; 🌐DISPLAY-LANGUAGE: 🇬🇧ENGLISH |


📊 GRAPHICAL DEMONSTRATION
⚠️ You need a W3 browser supporting Canvas (ES2015: ECMAScript 6th edition) by HTML5.
#📌 These screens will be able to be copied and saved as each file onto your device.
📊 OTHER BUCKETS FOR EXTARNAL SORTS OR ANY
⚠️ You need a W3 browser supporting Canvas (ES2015: ECMAScript 6th edition) by HTML5.⚠️ You need a W3 browser supporting Canvas (ES2015: ECMAScript 6th edition) by HTML5.
🚩 PROGRESS AND RESULT OF THE DEMONSTRATION
📑 ADDITIONAL EXPLANATIONS FOR THE DEMONSTRATION
#📌 This sensory display speed is not equal to the performance of each algorithm. Because the delay is depending on data-swap or data-removing times. Please take forcus to the parameters as LOOP(S), COMPARISON(S), SWAP(S), memory BUCKET(S), and so forth.
#📌 Please take notice. The memory size is including original data bucket N before sorting in this BUCKET(S) information, though the data bucket is not included in almost inscriptions by people. The data bucket N is not always needed, because the data might be on disk, network, and other devices. However the N is existing in memory certainly in the case of these sorting programs.
🚨 EMERGENCY STOP WHILE SORTING 
#📌 After changed the number of data or clicked STOP-button, preparate a new data set again. (The behavior has not warranty, though you will be able to continue without re-preparations.) If there was no response from this program, Click STOP again for the next starting. (But you could not, reload this program by W3 browser. 😓😿)
🛠️ PREPARATION FOR A DATA SET
GENERATION OF A NEW DATA (Regular DATA Sets)
GENERATION OF A NEW DATA (MISCellaneous OR STRANGE DATA Sets)
ADDITIONAL EXPLANATIONS#📌 These MISCellaneous OR STRANGE DATA Sets may have overlapped values, or may have missing values, or may have more bigger values than the number of data set.
#📌 The attached mark [R] means descending (reversed) order. This is oriented from a longer bar to a shorter bar. ⯆ (⯈)
#📌 The attached mark [S] means descending order, but ID is ascending for the same values. This is useful for stable order check. The "stable" means, the order is kept after sorting for the same values.
#📌 The attached mark [8] means, ID is ascending for the same values. This is useful for stable order check.
#📌 The attached mark [A] means ascending order. This is oriented from a shorter bar to a longer bar. ⯅ (⯇)
#📌 Make conditions before playing demonstrations.
DATA PROCESSINGS:  [not yet stored data] 
ADDITIONAL EXPLANATIONS#📌 CLEAR_M: to make clear the main screen only, not clear the data; CLEAR_3: to make clear all of the 3 screens, not clear the data; INITIALIZE or RESET_TO_DEFAULT_AND_GRADUALLY[R]: clear data too; CLEAR_C: to make clear the console screen for TRACE, not clear the data;
#📌 TRACE: to output the sorting value data to the browser console within 1,000 lines; IMPORT: to load your favorite value data set onto the memory; EXPORT: to output the current value data to a window;
#📌 BACKUP: to save the data set onto the memory; RECOVER: to recover the data set from memory backup;
THE NUMBER OF DATA (BARS):  (2-1000);  QUICK SETS:  
CANVAS ZOOM SIZE:  [x0.5] (small)(large)
⚙️ CONTROLLER FOR THE DEMONSTRATION
CANVAS COLOR:  [BLACK] 
ACOUSTIC SIGNALS:  [ON]  MELODY CHECKS:  
DEMONSTRATION SPEED:  [x1.0] (slow)(fast)
DATA TRACE:  [OFF] 
#📌 Enable to change while sorting demonstration
🎬 START-UP A SORTING DEMONSTRATION
DATA PROCESSINGS:  [not yet stored data] 
INTERNAL (IN-PLACE) SORTS: 
EXCHANGE SORTS: [A]: ||||||[D]: ||||||
ADDITIONAL EXPLANATIONS#📌 The SHAKER is qeual to combined the BUBBLE_UP+ and _DOWN+ method.
#📌 The COMB3 is standard edition in the COMBs.
#📌 The QUICK_T pivot is in top (left, first). The _B pivot is in bottom (right, last). The _M pivot is in middle (center). The _X pivot is configured by top, middle, or bottom. The QUICKS_ is using stack instead of recursive-call method. These stack versions also are quick sort.
INSERTION SORTS: [A]: |[D]: |
ADDITIONAL EXPLANATIONS#📌 The SHELL3 is standard edition in the SHELLs.
SELECTION SORTS: [A]: ||[D]: ||
OTHER SORTS: [A]: ||[D]: ||
ADDITIONAL EXPLANATIONS#📌 The SLOW and the STOOGE should be played less than 50 data.
EXTERNAL SORTS: 
DISTRIBUTION SORTS: [A]: ||[D]: 
MERGE SORTS: [A]: [D]: 
OTHER SORT: [A]: [D]: 
ADDITIONAL EXPLANATIONS#📌 The BIN|BUCKET, COUNTING, and BEAD are the special customized edition for this demonstrations.
#📌 The attached mark [S] means stable order. The "stable" means, the order is kept after sorting for the same values.
#📌 The attached mark [A] means ascending order. This is oriented from a shorter bar at the top side to a longer bar at the bottom side. ⯅ (⯇) Ordinary sorts arrange with ascending.
#📌 The attached mark [D] means descending order. This is oriented from a longer bar at the top to a shorter bar at the bottom. ⯆ (⯈)
#📌 The attached mark [B] means sorting from bottom area. Generally there are sorting from top area. However the BUBBLE-DOWN must be [B]. The HEAP and PANCAKE and BEAD may be generally [B]. The [W] is sorting from the both sides of top and bottom such as the SHAKER and DOUBLE_SELECTION. The [X] is from the shortest depth stack such as some QUICKs. Somtimes QUICKs and SELCTIONs seem like [W], when they are exchanged between both sides especially in case of unbalanced, guadually data.
#📌 Select only one algorithm to make starting by click-buttons.


Demonstration for Some Sorting Algorithms


🐤 WARBLING
#📌 I have an image of "SORTDEMO.BAS" program. Possibly, it was a sample program bundled with Visual Basic for MS-DOS. I have wanted to make such a visual program with graphics and sound tones for usual devices. Just now, here they are W3 browsers instead of the usual devices.
#📌 This program has been made by some sorting programs and W3 interface program.
📍#1: The almost sorting programs had been already made for the long-passed days' school-lesson, though they were by C-language. Then they were remaked for Javascript.
📍#2: The W3 interface program is expecting to your W3 browser supporting Web API and Web Audio API by HTML5. Web API is DOM: Document Object Model, and ES2015: ECMAScript 6th edition (Javascript). The "Canvas" for drawings, and the "Generator" for time waitings are based on ES2015.
#📌 And this is wrapped by CGI program written by C-language to genarate (reconstruct) and send HTML, CSS, and Javascript.
#📌 At this opening demonstration, the sounds are nothing by Autoplay Policy in the case of Google Chrome, https://developer.chrome.com/blog/autoplay/#webaudio. This site is optimized for Mozilla Firefox. However, recent Firefox also block off auto play, https://developer.mozilla.org/ja/docs/Web/Media/Autoplay_guide (The last modified of this text was 2022.01.21 when I found the text in 2022.07.31, though I found this phenomenon since ver. 103, 2022.07.31). Before a few days, the sounds were enable. (What's hppened!?)
#📌 These sounds might be nuisance, or insufficient loudness especially high and low frequency tones. Sorry, in such a case, please switch off the "ACOUSTIC SIGNALS" in "⚙️CONTROLLER FOR THE DEMONSTRATION".
HISTORY
#📌 Version 1.01: 2022.08.23; The first release to the public space;
📍SUPPORTED FUNCTIONS FOR GENERATIONS OF NEW DATA: RESET_TO_DEFAULT_AND_GRADUALLY[R], GRADUALLY[R], GRADUALLY[A], ODD-EVEN_BUMPY1, ODD-EVEN_BUMPY2, ODD-EVEN_CRESS1, ODD-EVEN_CRESS2, DOUBLE-DUPLICATION[R], DOUBLE-DUPLICATION[S], DOUBLE-DUPLICATION[A], TRIPLE-DUPLICATION[R], TRIPLE-DUPLICATION[S], TRIPLE-DUPLICATION[A], QUADRUPLE-DUPLICATION[R], QUADRUPLE-DUPLICATION[S], QUADRUPLE-DUPLICATION[A], QUINTUPLE-DUPLICATION[R], QUINTUPLE-DUPLICATION[S], QUINTUPLE-DUPLICATION[A], PRIME_NUMBERS[R], PRIME_NUMBERS[S], PRIME_NUMBERS[A], ALL_THE_SAME_HUGE_VALUES[8], 3LEVEL_WIDE_RANGE_VALUES[8], SINe_WAVE[8], COSine_WAVE[8], RANDOM_7LEVEL_VALUES[8], RECTANGULAR_PLUSE[8]
📍SUPPORTED FUNCTIONS FOR DATA PROCESSINGS: INITIALIZE, SHUFFLE, REVERSE, RE_DRAW, CLEAR_M, CLEAR_3, CLEAR_C*, TRACE*, IMPORT*, EXPORT*, BACKUP, RECOVER
📍SUPPORTED FUNCTIONS FOR SORTING METHODS: EXCHANGE*, BUBBLE, SHAKER, GNOME, ODD-EVEN, SHEAR*, COMB, QUICK, INSERSION, SHELL, SELECTION, DOUBLE-SELECTION, HEAP, CYCLE*, PANCAKE, SLOW*, STOOGE*, BIN|BUCKET, COUNTING, RADIX, MERGE, BEAD*; with some variations; The assigned "*" sorts have been adopted by the followed versions. These sorting algorithms seem to have original namings, such as "? sort", "?-sort", "?sort", and "? sorting" (https://en.wikipedia.org/wiki/Sorting_algorithm). Here the namings are unified as the "? sort", allow me inventors please.
#📌 Version 1.02: 2022.08.26; Additional sortings and modifications; The other HEAP sort by non-[B] type has been entered. This is not yet sophisticated. The CYCLE and SLOW sorts have been entred as new ones.
There have been some corrections and modifications for Javascript genarations and explanations.
#📌 Version 1.03: 2022.08.28; Additional sortings and modifications; The true EXCHANGE, BEAD, and STOOGE sorts have been entered as new ones.
#📌 Version 1.04: 2022.09.01; Improvements and reinforcements;
The explanations have been reinforced, and the BIN and BEAD sorts have been improved.
#📌 Version 1.05: 2022.09.08; Improvements, reinforcements, and modifications;
The explanations have been reinforced and modified, and CGI code has been improved.
#📌 Version 1.06: 2022.09.15; Additional sortings, reinforcements, and modifications; The SHEAR sort has been entered as new ones. I had wanted to add a member such as the 2-dimensional sorting also, not only linear sortings. Explanations have been reinforced and modified.
#📌 Version 1.07: 2022.10.03; Additional functions and improvements; The CLEAR_C, TRACE, IMPORT, and EXPORT have been entered as new functions for data processings, and explanations and displays have been improved and added especialy Japanese language.
#📌 Version 1.08: 2022.12.02; Improvements; The HELP page has been entered as new one, and explanations and displays have been improved.