From 4e0b92a1d17358467dfcde1a46ce6d1179fbbf4f Mon Sep 17 00:00:00 2001 From: ben-burlingham Date: Mon, 19 Oct 2015 18:03:09 -0700 Subject: [PATCH] Fade/unfade implemented. Play button behavior finalized. --- js/mergesort.js | 22 +------------ js/quicksort.js | 19 +++++++----- js/visualizer-actions.js | 67 +++++++++++----------------------------- js/visualizer-inits.js | 18 ++--------- js/visualizer.js | 33 +++++++++++++++----- 5 files changed, 60 insertions(+), 99 deletions(-) diff --git a/js/mergesort.js b/js/mergesort.js index 0324b9b..0619d96 100644 --- a/js/mergesort.js +++ b/js/mergesort.js @@ -1,30 +1,10 @@ /** * */ -var MergeSort = function() { - this.instructions = []; -}; +var MergeSort = function() {}; MergeSort.prototype = Object.create(Sorter.prototype); -/** - * - */ -MergeSort.prototype.addInstruction = function(operation, left, right, mid) { - // console.log({ - // operation: operation, - // left: left, - // right: right, - // mid: mid - // }); - - this.instructions.push({ - operation: operation, - left: left, - right: right - }); -}; - /** * */ diff --git a/js/quicksort.js b/js/quicksort.js index a5c2a3e..b496be8 100644 --- a/js/quicksort.js +++ b/js/quicksort.js @@ -18,10 +18,8 @@ QuickSort.prototype = Object.create(Sorter.prototype); * */ QuickSort.prototype.sort = function(arr, start, end) { - if (end - start <= 0) { - // this//.instruct(this.V.highlight, 500, end) - // .instruct(this.V.message, 0, 3, 'Start: ' + start) - // .instruct(this.V.message, 0, 4, 'End: ' + end) + if (end <= start) { + // message: Left and Right have crossed, start sorting sublists. return arr; } @@ -43,6 +41,10 @@ QuickSort.prototype.sort = function(arr, start, end) { .instruct(this.V.unhighlight, 0) .instruct(this.V.highlight, 0, pivot) + .instruct(this.V.fade, 0, -1, start - 1) + .instruct(this.V.fade, 0, end + 1, arr.length) + // Message: pivot chosen + .instruct(this.V.message, 0, 3, 'Sorting from [' + start + '] to [' + end + ']') .instruct(this.V.message, 0, 4, '') .instruct(this.V.message, 100, 5, ''); @@ -69,14 +71,16 @@ QuickSort.prototype.sort = function(arr, start, end) { while (arr[right].value > pivotval) { this.comparisons++; this.V - .instruct(this.V.message, 0, 5, `${arr[right].value} < ${pivotval}, decrement right`) + .instruct(this.V.message, 0, 5, `${arr[right].value} > ${pivotval}, decrement right`) .instruct(this.V.message, 0, 1, 'Comparisons: ' + this.comparisons) + .instruct(this.V.marker, 500, 2, right); right--; - this.V.instruct(this.V.marker, 500, 2, right) } - this.V.instruct(this.V.message, 100, 5, `Right stop: ${arr[right].value} <= ${pivotval} `) + this.V + .instruct(this.V.message, 0, 5, `Right stop: ${arr[right].value} <= ${pivotval} `) + .instruct(this.V.marker, 500, 2, right); if (left <= right) { tmp = arr[left]; @@ -101,6 +105,7 @@ QuickSort.prototype.sort = function(arr, start, end) { } this.V + .instruct(this.V.unfade, 0) .instruct(this.V.unhighlight, 0) .instruct(this.V.hideMarker, 0, 1) .instruct(this.V.hideMarker, 0, 2) diff --git a/js/visualizer-actions.js b/js/visualizer-actions.js index cdbd484..e4ecc58 100644 --- a/js/visualizer-actions.js +++ b/js/visualizer-actions.js @@ -42,32 +42,25 @@ Visualizer.prototype.unhighlight = function() { this.svg.selectAll('.item').attr('fill', function(d) { return d.fill; }); }; -// /** -// * Greys out an item. -// */ -// Visualizer.prototype.fade = function(startIndex, endIndex) { -// console.log(`fading from ${startIndex} to ${endIndex}`); -// this.svg.selectAll('rect') -// // NOTE this replaces the fill function reference for each rectangle - key point! -// .attr('fill', function fill(d) { -// if (d.index >= startIndex && d.index <= endIndex) { -// console.log(`${d.index} to ${d.fade}`) -// return d.fade; -// } -// return d.fill; -// }); -// }; +/** + * Greys out an item. + */ +Visualizer.prototype.fade = function(delay, startIndex, endIndex) { + this.groups.each(function(d) { + if (d.index >= startIndex && d.index <= endIndex) { + d3.select(this).style('opacity', '0.2'); + } + }); +}; -// /** -// * Restores all items to un-greyed state. -// */ -// Visualizer.prototype.unfade = function() { -// this.svg.selectAll('rect') -// .attr('fill', functi;n fill(d) { -// console.log(`unfade ${d.index}`) -// return d.fill; -// }) -// }; +/** + * Restores all items to un-greyed state. + */ +Visualizer.prototype.unfade = function() { + this.groups.each(function(d) { + d3.select(this).style('opacity', 1); + }); +}; /** * @@ -104,27 +97,3 @@ Visualizer.prototype.message = function(delay, which, msg) { var msg = msg || ' '; this.parent.querySelector(`.message:nth-child(${which})`).innerHTML = msg; }; - -/** - * - */ -Visualizer.prototype.reset = function() { - this.instructionIndex = 0; - - this.message([null, 0, 1, '']); - this.message([null, 0, 2, '']); - this.message([null, 0, 3, '']); - this.message([null, 0, 4, '']); - this.message([null, 0, 5, '']); - - this.marker([null, 0, 1, 0]); - this.marker([null, 0, 2, 0]); - this.unhighlight(); - - this.groups - .transition().duration(100) - .attr('transform', function doTransform(d, i) { - d.index = i; - return `translate(${Visualizer.calculateX(i)}, ${Visualizer.itemY})`; - }); -}; diff --git a/js/visualizer-inits.js b/js/visualizer-inits.js index e6e0f27..dbcfd52 100644 --- a/js/visualizer-inits.js +++ b/js/visualizer-inits.js @@ -126,6 +126,7 @@ Visualizer.prototype.initRange = function() { var rangeChange = function(event) { this.initItems(event.target.value); + this.reset(); }; var container = document.createElement('div'); @@ -178,13 +179,6 @@ Visualizer.prototype.initControls = function() { } }; - var backclick = function() { - // TODO followinstruction skips delay of 0 - this.paused = true; - this.instructionIndex--; - this.followInstruction(); - }; - var forwardclick = function() { this.paused = true; this.followInstruction(); @@ -192,7 +186,7 @@ Visualizer.prototype.initControls = function() { }; var restartclick = function() { - this.paused = false; + this.paused = true; updatePlayPause(this.paused); this.reset(); }; @@ -202,18 +196,13 @@ Visualizer.prototype.initControls = function() { play.title = 'Play' play.addEventListener('click', playclick.bind(this)); - var back = document.createElement('button'); - back.className = 'fa fa-step-backward'; - back.title = 'Step Backward'; - back.addEventListener('click', backclick.bind(this)); - var forward = document.createElement('button'); forward.className = 'fa fa-step-forward' forward.title = 'Step Forward'; forward.addEventListener('click', forwardclick.bind(this)); var reset = document.createElement('button'); - reset.className = 'fa fa-fast-backward'; + reset.className = 'fa fa-undo'; reset.title = 'Restart' reset.addEventListener('click', restartclick.bind(this)); @@ -221,7 +210,6 @@ Visualizer.prototype.initControls = function() { container.className = 'controls-container'; container.appendChild(reset); - container.appendChild(back); container.appendChild(play); container.appendChild(forward); diff --git a/js/visualizer.js b/js/visualizer.js index 921988c..14ba27e 100644 --- a/js/visualizer.js +++ b/js/visualizer.js @@ -100,10 +100,9 @@ Visualizer.prototype.followInstruction = function() { var delay = instruction[1]; var args = instruction.slice(1); - // TODO finalize play button behavior // TODO add tabs for best/worst cases // TODO add links to stats - // TODO fade unfade + // TODO fix init slider // TODO heap sort // TODO extra memory @@ -122,9 +121,29 @@ Visualizer.prototype.followInstruction = function() { this.instructionIndex++; setTimeout(this.followInstruction.bind(this), delay); } - // } - // else { - // console.error(i); - // throw new Error('Unidentified instruction.'); - // } +}; + +/** + * + */ +Visualizer.prototype.reset = function() { + this.instructionIndex = 0; + + this.message(0, 1, ''); + this.message(0, 2, ''); + this.message(0, 3, ''); + this.message(0, 4, ''); + this.message(0, 5, ''); + + this.marker(0, 1, 0); + this.marker(0, 2, 0); + this.unhighlight(); + this.unfade(); + + this.groups + .transition().duration(100) + .attr('transform', function doTransform(d, i) { + d.index = i; + return `translate(${Visualizer.calculateX(i)}, ${Visualizer.itemY})`; + }); };