From 89c8909ce9cfcc721a104ac1ef137edfe5850812 Mon Sep 17 00:00:00 2001
From: ben-burlingham <ben.burlingham@boostctr.com>
Date: Sun, 1 Nov 2015 09:51:16 -0800
Subject: [PATCH] Insertion sort visualization finished.

---
 index.html          |  44 +++++++++++++++---
 js/bubblesort.js    |  33 +++++++++++++-
 js/insertionsort.js | 103 +++++++++++++++++++++++++++++++++++++++---
 js/quicksort.js     |   2 -
 js/selectionsort.js |  33 +++++++++++++-
 js/shellsort.js     | 107 +++++++++++++++++++++++++++++++++++++++-----
 6 files changed, 293 insertions(+), 29 deletions(-)

diff --git a/index.html b/index.html
index f481900..abedbce 100644
--- a/index.html
+++ b/index.html
@@ -36,28 +36,60 @@
     data-worst-memory='0 (in place)'
     ></div>
 
-<!--
+
     <h1>Shellsort discussion</h1>
     several ways to pick gap width, but dependence on input data makes gap selection trivial. <br>
-    swap. highlight. fade.
-    <div class="sorter" data-algorithm='shell'></div>
+    <div class="sorter"
+    data-algorithm='shell'
+    data-stable='Maybe'
+    data-adaptive='Maybe'
+    data-worst-perf='O(n + m + 3k)'
+    data-avg-perf='O(n + m + 3k)'
+    data-best-perf='O(n + m + 3k)'
+    data-worst-memory='0 (in place)'
+    ></div>
 
     <h1>Selection sort discussion</h1>
     http://stackoverflow.com/questions/15799034/insertion-sort-vs-selection-sort <br>
     swap. highlight. fade.
-    <div class="sorter" data-algorithm='selection'></div>
+    <div class="sorter"
+    data-algorithm='selection'
+    data-stable='Maybe'
+    data-adaptive='Maybe'
+    data-worst-perf='O(n + m + 3k)'
+    data-avg-perf='O(n + m + 3k)'
+    data-best-perf='O(n + m + 3k)'
+    data-worst-memory='0 (in place)'>
+    </div>
 
     <h1>insertion sort discussion</h1>
     how is this different from bubble and selection. <br>
     swap. highlight. fade.
-    <div class="sorter" data-algorithm='insertion'></div>
+    <div class="sorter"
+    data-algorithm='insertion'
+    data-stable='Maybe'
+    data-adaptive='Maybe'
+    data-worst-perf='O(n + m + 3k)'
+    data-avg-perf='O(n + m + 3k)'
+    data-best-perf='O(n + m + 3k)'
+    data-worst-memory='0 (in place)'
+    ></div>
 
 
     <h1>bubble sort discussion</h1>
     how is this different from insertion and selection sorts. <br>
     swap. highlight. fade.
-    <div class="sorter" data-algorithm='bubble'></div>
+    <div class="sorter"
+    data-algorithm='bubble'
+    data-stable='Maybe'
+    data-adaptive='Maybe'
+    data-worst-perf='O(n + m + 3k)'
+    data-avg-perf='O(n + m + 3k)'
+    data-best-perf='O(n + m + 3k)'
+    data-worst-memory='0 (in place)'
+    ></div>
 
+<!--
     <h1>radix sort discussion</h1>
 
     <div class="sorter" data-algorithm='radix'></div>
diff --git a/js/bubblesort.js b/js/bubblesort.js
index 6dd1e3a..ac934b1 100644
--- a/js/bubblesort.js
+++ b/js/bubblesort.js
@@ -2,11 +2,40 @@
  *
  */
 var BubbleSort = function() {
-    this.instructions = [];
+    //===== Inits.
+    this.actions = [];
+
+    this.swaps = 0;
+    this.comparisons = 0;
+
+    //===== Action management.
 };
 
 BubbleSort.prototype = Object.create(Sorter.prototype);
 
+/**
+ *
+ */
+BubbleSort.prototype.init = function() {
+    var len = this.shuffled.length;
+
+    this
+        .instruct(Itemgroup.items, 0, 0, len)
+        .instruct(Itemgroup.items, 1, 0, len)
+        .instruct(Itemgroup.items, 2, 0, len)
+
+    for (var i = 0; i < len; i++) {
+        this.instruct(Itemgroup.text, 1, 0, i, this.shuffled[i]);
+    }
+
+    this
+        .instruct(Itemgroup.foreground, 1, 0, 0, len, Visualizer.fg0)
+        .instruct(Itemgroup.background, 1, 0, 0, len, Visualizer.bg0)
+
+        .instruct(Itemgroup.opacity, 0, 0, 0, len, 0)
+        .instruct(Itemgroup.opacity, 2, 0, 0, len, 0)
+};
+
 /**
  *
  */
@@ -17,7 +46,7 @@ BubbleSort.prototype.sort = function(arr) {
 
     // NOTE this starts at the beginning of the array each time
     for (i = 1; i < len; i++) {
-        if (arr[i - 1].value > arr[i].value) {
+        if (arr[i - 1] > arr[i]) {
             this.swap(arr, i, i - 1);
             swapped = true;
             // console.log(dump(arr));
diff --git a/js/insertionsort.js b/js/insertionsort.js
index 60d3ba7..a04c344 100644
--- a/js/insertionsort.js
+++ b/js/insertionsort.js
@@ -2,11 +2,97 @@
  *
  */
 var InsertionSort = function() {
-    this.instructions = [];
+    //===== Inits.
+    this.actions = [];
+
+    this.swaps = 0;
+    this.comparisons = 0;
+
+    //===== Action management.
+    //
+    this.preSort = function(arr) {
+        this
+            .instruct(Itemgroup.background, 1, 0, 0, arr.length, Visualizer.bg0)
+
+            .instruct(Itemgroup.message, 0, 0, 1, `Comparisons: ${this.comparisons}`)
+            .instruct(Itemgroup.message, 0, 0, 2, `Swaps: ${this.swaps}`)
+            .instruct(Itemgroup.message, 0, 0, 3, ``)
+            .instruct(Itemgroup.message, 0, 0, 4, ``)
+            .instruct(Itemgroup.message, 0, 100, 5, ``)
+    };
+
+    //
+    this.midSort = function(arr, i, j) {
+        this
+            .instruct(Itemgroup.background, 1, 0, 0, arr.length, Visualizer.bg0)
+            .instruct(Itemgroup.background, 1, 0, j, j, Visualizer.bg1)
+            .instruct(Itemgroup.background, 1, 0, (j - 1), (j - 1), Visualizer.bg1)
+
+            .instruct(Itemgroup.message, 0, 0, 1, `Comparisons: ${this.comparisons}`)
+            .instruct(Itemgroup.message, 0, 0, 4, `Comparing [${j - 1}] and [${j}]`)
+            .instruct(Itemgroup.message, 0, 100, 5, ``)
+    };
+
+    //
+    this.swap = function(arr, j) {
+        this
+            .instruct(Itemgroup.message, 0, 0, 2, `Swaps: ${this.swaps}`)
+            .instruct(Itemgroup.message, 0, 0, 5, `${arr[j]} < ${arr[j - 1]}, swapped.`)
+            .instruct(Itemgroup.swap, 1, 300, j - 1, j)
+
+        if (j - 1 > 0) {
+            this.instruct(Itemgroup.message, 0, 0, 3, `Continuing downstream...`)
+        }
+        else {
+            this.instruct(Itemgroup.message, 0, 0, 3, ``)
+        }
+    };
+
+    //
+    this.noswap = function(arr, j) {
+        this
+            .instruct(Itemgroup.message, 0, 0, 3, ``)
+            .instruct(Itemgroup.message, 0, 100, 5, `${arr[j]} > ${arr[j - 1]}, not swapped.`)
+    };
+
+    //
+    this.postSort = function(arr) {
+        this
+            .instruct(Itemgroup.background, 1, 0, 0, arr.length, Visualizer.bg0)
+
+            .instruct(Itemgroup.message, 0, 0, 1, `Comparisons: ${this.comparisons}`)
+            .instruct(Itemgroup.message, 0, 0, 2, `Swaps: ${this.swaps}`)
+            .instruct(Itemgroup.message, 0, 0, 3, ``)
+            .instruct(Itemgroup.message, 0, 0, 4, ``)
+            .instruct(Itemgroup.message, 0, 100, 5, `Sorting complete.`)
+    };
 };
 
 InsertionSort.prototype = Object.create(Sorter.prototype);
 
+/**
+ *
+ */
+InsertionSort.prototype.init = function() {
+    var len = this.shuffled.length;
+
+    this
+        .instruct(Itemgroup.items, 0, 0, len)
+        .instruct(Itemgroup.items, 1, 0, len)
+        .instruct(Itemgroup.items, 2, 0, len)
+
+    for (var i = 0; i < len; i++) {
+        this.instruct(Itemgroup.text, 1, 0, i, this.shuffled[i]);
+    }
+
+    this
+        .instruct(Itemgroup.foreground, 1, 0, 0, len, Visualizer.fg0)
+        .instruct(Itemgroup.background, 1, 0, 0, len, Visualizer.bg0)
+
+        .instruct(Itemgroup.opacity, 0, 0, 0, len, 0)
+        .instruct(Itemgroup.opacity, 2, 0, 0, len, 0)
+};
+
 /**
  *
  */
@@ -15,24 +101,29 @@ InsertionSort.prototype.sort = function(arr) {
     var i;
     var j;
     var tmp;
-    var swaps = 0;
-    var comparisons = 0;
+
+    this.preSort(arr);
 
     for (i = 0; i < len; i++) {
         for (j = i; j > 0; j--) {
-            comparisons++;
+            this.comparisons++;
+            this.midSort(arr, i, j);
 
-            if (arr[j - 1].value > arr[j].value) {
-                swaps++;
+            if (arr[j - 1] > arr[j]) {
+                this.swaps++;
                 tmp = arr[j - 1];
                 arr[j - 1] = arr[j];
                 arr[j] = tmp;
+
+                this.swap(arr, j);
             }
             else {
+                this.noswap(arr, j);
                 break;
             }
         }
     }
 
+    this.postSort(arr);
     return arr;
 };
diff --git a/js/quicksort.js b/js/quicksort.js
index 0b9c098..3d20a51 100644
--- a/js/quicksort.js
+++ b/js/quicksort.js
@@ -116,7 +116,6 @@ QuickSort.prototype.init = function() {
  */
 QuickSort.prototype.sort = function(arr, start, end) {
     if (end <= start) {
-        // message: Left and Right have crossed, start sorting sublists.
         this.postSort();
         return arr;
     }
@@ -129,7 +128,6 @@ QuickSort.prototype.sort = function(arr, start, end) {
     var tmp;
     var rval;
 
-    // Message: pivot chosen
     this.preSort(left, right, pivot, arr.length);
 
     while (left <= right) {
diff --git a/js/selectionsort.js b/js/selectionsort.js
index e876467..2727b96 100644
--- a/js/selectionsort.js
+++ b/js/selectionsort.js
@@ -2,11 +2,40 @@
  *
  */
 var SelectionSort = function() {
-    this.instructions = [];
+    //===== Inits.
+    this.actions = [];
+
+    this.swaps = 0;
+    this.comparisons = 0;
+
+    //===== Action management.
 };
 
 SelectionSort.prototype = Object.create(Sorter.prototype);
 
+/**
+ *
+ */
+SelectionSort.prototype.init = function() {
+    var len = this.shuffled.length;
+
+    this
+        .instruct(Itemgroup.items, 0, 0, len)
+        .instruct(Itemgroup.items, 1, 0, len)
+        .instruct(Itemgroup.items, 2, 0, len)
+
+    for (var i = 0; i < len; i++) {
+        this.instruct(Itemgroup.text, 1, 0, i, this.shuffled[i]);
+    }
+
+    this
+        .instruct(Itemgroup.foreground, 1, 0, 0, len, Visualizer.fg0)
+        .instruct(Itemgroup.background, 1, 0, 0, len, Visualizer.bg0)
+
+        .instruct(Itemgroup.opacity, 0, 0, 0, len, 0)
+        .instruct(Itemgroup.opacity, 2, 0, 0, len, 0)
+};
+
 /**
  *
  */
@@ -25,7 +54,7 @@ SelectionSort.prototype.sort = function(arr) {
         min = i;
         for (j = i + 1; j < len; j++) {
             comparisons++;
-            if (arr[j].value < arr[i].value) {
+            if (arr[j] < arr[i]) {
                 min = j;
             }
         }
diff --git a/js/shellsort.js b/js/shellsort.js
index d1b0c28..3cd1fe0 100644
--- a/js/shellsort.js
+++ b/js/shellsort.js
@@ -2,11 +2,96 @@
  *
  */
 var ShellSort = function() {
-    this.instructions = [];
+    //===== Inits.
+    this.actions = [];
+
+    this.swaps = 0;
+    this.comparisons = 0;
+
+    //===== Action management.
+    //
+    this.preSort = function(arr, i, gap) {
+        this
+            .instruct(Itemgroup.background, 1, 0, 0, arr.length, Visualizer.bg0)
+            .instruct(Itemgroup.background, 1, 0, i, i, Visualizer.bg1)
+
+            .instruct(Itemgroup.message, 0, 0, 1, `Comparisons: ${this.comparisons}`)
+            .instruct(Itemgroup.message, 0, 0, 2, `Swaps: ${this.swaps}`)
+            .instruct(Itemgroup.message, 0, 0, 3, `Gap: ${gap}`)
+            .instruct(Itemgroup.message, 0, 0, 4, ``)
+            .instruct(Itemgroup.message, 0, 100, 5, ``)
+    };
+
+    //
+    this.midSort = function(arr, i, j, gap) {
+        this
+            .instruct(Itemgroup.background, 1, 0, 0, arr.length, Visualizer.bg0)
+            .instruct(Itemgroup.background, 1, 0, j, j, Visualizer.bg1)
+            .instruct(Itemgroup.background, 1, 0, (j - gap), (j - gap), Visualizer.bg1)
+
+            .instruct(Itemgroup.message, 0, 0, 4, `Comparing [${j - gap}] and [${j}]`)
+            .instruct(Itemgroup.message, 0, 100, 5, ``)
+    };
+
+    //
+    this.swap = function(arr, j, gap) {
+        this
+            .instruct(Itemgroup.message, 0, 100, 4, `${arr[j]} < ${arr[j - gap]}, swap required.`)
+            .instruct(Itemgroup.swap, 1, 300, j - gap, j)
+
+        if (j - gap > 0) {
+            this
+                .instruct(Itemgroup.message, 0, 100, 5, `Pushing downstream...`)
+        }
+    };
+
+    //
+    this.noswap = function(arr, j, gap) {
+        this
+            .instruct(Itemgroup.message, 0, 0, 4, `${arr[j]} > ${arr[j - gap]}, no swap required.`)
+            .instruct(Itemgroup.message, 0, 100, 5, ``)
+    };
+
+    //
+    this.doInsertionSort = function() {
+        // this
+        //     .instruct(Itemgroup.background, 1, 0, 0, arr.length, Visualizer.bg0)
+        //     .instruct(Itemgroup.background, 1, 0, j, j, Visualizer.bg1)
+        //     .instruct(Itemgroup.background, 1, 0, (j - gap), (j - gap), Visualizer.bg1)
+
+        //     .instruct(Itemgroup.message, 0, 0, 4, ``)
+        //     .instruct(Itemgroup.message, 0, 100, 5, ``)
+    };
 };
 
 ShellSort.prototype = Object.create(Sorter.prototype);
 
+/**
+ *
+ */
+ShellSort.prototype.init = function() {
+    console.error('Shell sort visualization ends with insertion sort, how to manage?');
+
+    var len = this.shuffled.length;
+
+    this
+        .instruct(Itemgroup.items, 0, 0, len)
+        .instruct(Itemgroup.items, 1, 0, len)
+        .instruct(Itemgroup.items, 2, 0, len)
+
+    for (var i = 0; i < len; i++) {
+        this.instruct(Itemgroup.text, 1, 0, i, this.shuffled[i]);
+    }
+
+    this
+        .instruct(Itemgroup.foreground, 1, 0, 0, len, Visualizer.fg0)
+        .instruct(Itemgroup.background, 1, 0, 0, len, Visualizer.bg0)
+
+        .instruct(Itemgroup.opacity, 0, 0, 0, len, 0)
+        .instruct(Itemgroup.opacity, 2, 0, 0, len, 0)
+};
+
+
 /**
  *
  */
@@ -16,11 +101,14 @@ ShellSort.prototype.sort = function(arr) {
     var i, j;
 
     for (i = 0; i < gap; i++) {
+        this.preSort(arr, i, gap);
         this.gapSort(arr, i, gap);
     }
 
+    this.doInsertionSort();
     var IS = new InsertionSort();
     IS.sort(arr);
+    // this.postSort();
 
     return arr;
 };
@@ -32,26 +120,23 @@ ShellSort.prototype.gapSort = function(arr, start, gap) {
     var i, j;
     var len = arr.length;
 
-    // console.log(`start ${start}, gap ${gap}`)
-
     for (i = start; i < len; i += gap) {
-        // console.log(`i: ${i}`)
         for (j = i; j > start; j -= gap) {
-            // console.log(`j: ${j}`)
-            // console.log(`checking if ${arr[j - gap].value} > ${arr[j].value}`)
+            this.midSort(arr, i, j, gap);
+            this.comparisons++;
 
-            if (arr[j - gap].value > arr[j].value) {
-                // console.log(`swapping ${arr[j - gap].value} and ${arr[j].value}`)
+            if (arr[j - gap] > arr[j]) {
+                this.swaps++;
                 tmp = arr[j - gap];
                 arr[j - gap] = arr[j];
                 arr[j] = tmp;
-                // console.log(dump(arr));
+
+                this.swap(arr, j, gap);
             }
             else {
+                this.noswap(arr, j, gap);
                 break;
             }
         }
     }
-
-    // console.log(dump(arr));
 };