Skip to content

Commit 77ade08

Browse files
airingursbairingursb
committed
finish 03-05
完成【归并排序 | 自底向上】算法实验
1 parent 1e087eb commit 77ade08

File tree

8 files changed

+293
-57
lines changed

8 files changed

+293
-57
lines changed

‎app/public/javascripts/03-05-Merge-Sort-BU-Visualization/AlgoVisualizer.js

Lines changed: 4 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/public/javascripts/03-05-Merge-Sort-BU-Visualization/AlgoVisualizer.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/public/javascripts/03-05-Merge-Sort-BU-Visualization/bundle.js

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
2+
"use strict";
3+
Object.defineProperty(exports, "__esModule", { value: true });
4+
var AlgoVisHelper_1 = require("./AlgoVisHelper");
5+
var AlgoFrame = (function () {
6+
function AlgoFrame(g2d, canvasWidth, canvasHeight) {
7+
this.g2d = g2d;
8+
this.canvasWidth = canvasWidth;
9+
this.canvasHeight = canvasHeight;
10+
}
11+
AlgoFrame.prototype.getCanvasWidth = function () {
12+
return this.canvasWidth;
13+
};
14+
AlgoFrame.prototype.getCanvasHeight = function () {
15+
return this.canvasHeight;
16+
};
17+
AlgoFrame.prototype.repaint = function () {
18+
this.g2d.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
19+
var w = this.canvasWidth / this.data.N();
20+
for (var i = 0; i < this.data.N(); i++) {
21+
if (i >= this.data.l && i <= this.data.r) {
22+
AlgoVisHelper_1.AlgoVisHelper.setColor(this.g2d, AlgoVisHelper_1.AlgoVisHelper.Green);
23+
}
24+
else {
25+
AlgoVisHelper_1.AlgoVisHelper.setColor(this.g2d, AlgoVisHelper_1.AlgoVisHelper.Grey);
26+
}
27+
if (i >= this.data.l && i <= this.data.mergeIndex) {
28+
AlgoVisHelper_1.AlgoVisHelper.setColor(this.g2d, AlgoVisHelper_1.AlgoVisHelper.Red);
29+
}
30+
AlgoVisHelper_1.AlgoVisHelper.fillRectangle(this.g2d, i * w, this.canvasHeight - this.data.get(i), w - 1, this.data.get(i));
31+
}
32+
};
33+
AlgoFrame.prototype.render = function (data) {
34+
this.data = data;
35+
this.repaint();
36+
};
37+
return AlgoFrame;
38+
}());
39+
exports.AlgoFrame = AlgoFrame;
40+
41+
},{"./AlgoVisHelper":2}],2:[function(require,module,exports){
42+
"use strict";
43+
Object.defineProperty(exports, "__esModule", { value: true });
44+
var AlgoVisHelper = (function () {
45+
function AlgoVisHelper() {
46+
}
47+
AlgoVisHelper.strokeCircle = function (g2d, x, y, r) {
48+
g2d.beginPath();
49+
g2d.arc(x, y, r, 0, 2 * Math.PI);
50+
g2d.closePath();
51+
g2d.stroke();
52+
};
53+
AlgoVisHelper.fillCircle = function (g2d, x, y, r) {
54+
g2d.beginPath();
55+
g2d.arc(x, y, r, 0, 2 * Math.PI);
56+
g2d.closePath();
57+
g2d.fill();
58+
};
59+
AlgoVisHelper.fillRectangle = function (g2d, x, y, w, h) {
60+
g2d.fillRect(x, y, w, h);
61+
};
62+
AlgoVisHelper.setColor = function (g2d, color) {
63+
g2d.fillStyle = color;
64+
};
65+
return AlgoVisHelper;
66+
}());
67+
AlgoVisHelper.Red = "#F44336";
68+
AlgoVisHelper.Pink = "#E91E63";
69+
AlgoVisHelper.Purple = "#9C27B0";
70+
AlgoVisHelper.DeepPurple = "#673AB7";
71+
AlgoVisHelper.Indigo = "#3F51B5";
72+
AlgoVisHelper.Blue = "#2196F3";
73+
AlgoVisHelper.LightBlue = "#03A9F4";
74+
AlgoVisHelper.Cyan = "#00BCD4";
75+
AlgoVisHelper.Teal = "#009688";
76+
AlgoVisHelper.Green = "#4CAF50";
77+
AlgoVisHelper.LightGreen = "#8BC34A";
78+
AlgoVisHelper.Lime = "#CDDC39";
79+
AlgoVisHelper.Yellow = "#FFEB3B";
80+
AlgoVisHelper.Amber = "#FFC107";
81+
AlgoVisHelper.Orange = "#FF9800";
82+
AlgoVisHelper.DeepOrange = "#FF5722";
83+
AlgoVisHelper.Brown = "#795548";
84+
AlgoVisHelper.Grey = "#9E9E9E";
85+
AlgoVisHelper.BlueGrey = "#607D8B";
86+
AlgoVisHelper.Black = "#000000";
87+
AlgoVisHelper.White = "#FFFFFF";
88+
exports.AlgoVisHelper = AlgoVisHelper;
89+
90+
},{}],3:[function(require,module,exports){
91+
"use strict";
92+
Object.defineProperty(exports, "__esModule", { value: true });
93+
var AlgoFrame_1 = require("./AlgoFrame");
94+
var MergeSortData_1 = require("./MergeSortData");
95+
var AlgoVisualizer = (function () {
96+
function AlgoVisualizer(g2d, sceneWidth, sceneHeight, N) {
97+
this.DELAY = 40;
98+
this.g2d = g2d;
99+
this.data = new MergeSortData_1.MergeSortData(N, sceneHeight);
100+
this.data_list = [];
101+
this.N = N;
102+
this.sceneHeight = sceneHeight;
103+
this.frame = new AlgoFrame_1.AlgoFrame(g2d, sceneWidth, sceneHeight);
104+
this.run();
105+
}
106+
AlgoVisualizer.prototype.run = function () {
107+
this.setData(-1, -1, -1);
108+
this.setData(-1, -1, -1);
109+
for (var sz = 1; sz < this.data.N(); sz *= 2)
110+
for (var i = 0; i < this.data.N() - sz; i += sz + sz)
111+
this.merge(i, i + sz - 1, Math.min(i + sz + sz - 1, this.data.N() - 1));
112+
this.setData(0, this.data.N() - 1, this.data.N() - 1);
113+
this.render();
114+
};
115+
AlgoVisualizer.prototype.merge = function (l, mid, r) {
116+
var aux = [];
117+
for (var a = l; a < r + 1; a++) {
118+
aux.push(this.data.numbers[a]);
119+
}
120+
var i = l, j = mid + 1;
121+
for (var k = l; k <= r; k++) {
122+
if (i > mid) {
123+
this.data.numbers[k] = aux[j - l];
124+
j++;
125+
}
126+
else if (j > r) {
127+
this.data.numbers[k] = aux[i - l];
128+
i++;
129+
}
130+
else if (aux[i - l] < aux[j - l]) {
131+
this.data.numbers[k] = aux[i - l];
132+
i++;
133+
}
134+
else {
135+
this.data.numbers[k] = aux[j - l];
136+
j++;
137+
}
138+
this.setData(l, r, k);
139+
}
140+
};
141+
AlgoVisualizer.prototype.setData = function (l, r, mergeIndex) {
142+
var data = new MergeSortData_1.MergeSortData(this.N, this.sceneHeight);
143+
data.l = l;
144+
data.r = r;
145+
data.mergeIndex = mergeIndex;
146+
data.numbers = this.data.numbers.slice();
147+
this.data_list[this.data_list.length] = data;
148+
};
149+
AlgoVisualizer.prototype.render = function () {
150+
var _this = this;
151+
var i = 0;
152+
setInterval(function () {
153+
if (i < _this.data_list.length) {
154+
_this.frame.render(_this.data_list[i]);
155+
i++;
156+
}
157+
}, this.DELAY);
158+
};
159+
return AlgoVisualizer;
160+
}());
161+
exports.AlgoVisualizer = AlgoVisualizer;
162+
163+
},{"./AlgoFrame":1,"./MergeSortData":4}],4:[function(require,module,exports){
164+
"use strict";
165+
Object.defineProperty(exports, "__esModule", { value: true });
166+
var MergeSortData = (function () {
167+
function MergeSortData(N, randomBound) {
168+
this.numbers = new Array(N);
169+
for (var i = 0; i < N; i++) {
170+
this.numbers[i] = Math.floor(Math.random() * randomBound) + 1;
171+
}
172+
}
173+
MergeSortData.prototype.N = function () {
174+
return this.numbers.length;
175+
};
176+
MergeSortData.prototype.get = function (index) {
177+
if (index < 0 || index >= this.numbers.length) {
178+
throw ReferenceError("Invalid index to access Sort Data.");
179+
}
180+
return this.numbers[index];
181+
};
182+
MergeSortData.prototype.swap = function (i, j) {
183+
if (i < 0 || i >= this.numbers.length || j < 0 || j >= this.numbers.length) {
184+
throw ReferenceError("Invalid index to access Sort Data.");
185+
}
186+
var t = this.numbers[i];
187+
this.numbers[i] = this.numbers[j];
188+
this.numbers[j] = t;
189+
};
190+
return MergeSortData;
191+
}());
192+
exports.MergeSortData = MergeSortData;
193+
194+
},{}],5:[function(require,module,exports){
195+
"use strict";
196+
Object.defineProperty(exports, "__esModule", { value: true });
197+
var AlgoVisualizer_1 = require("./AlgoVisualizer");
198+
var containerWidth = document.getElementById('container').clientWidth;
199+
var sceneWidth = containerWidth - 20;
200+
var sceneHeight = 600;
201+
var canvas = document.getElementById('canvas');
202+
var g2d = canvas.getContext('2d');
203+
canvas.width = sceneWidth;
204+
canvas.height = sceneHeight;
205+
var N = 100;
206+
var visualizer = new AlgoVisualizer_1.AlgoVisualizer(g2d, sceneWidth, sceneHeight, N);
207+
208+
},{"./AlgoVisualizer":3}]},{},[5]);

‎app/views/canvas_03_05.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h2 class="ui header">
1212
</h2>
1313

1414
<div class="ui buttons">
15-
<a href="/3-3" class="ui blue button">PREV：插入排序 | 近乎有序</a>
15+
<a href="/3-4" class="ui blue button">PREV：归并排序 | 自底向上</a>
1616
<div class="or"></div>
1717
<a href="/" class="ui positive button">NEXT：</a>
1818
</div>

‎src/public/javascripts/03-04-Merge-Sort-TD-Visualization/AlgoFrame.ts

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import {AlgoVisHelper} from './AlgoVisHelper'
22

3-
export class AlgoFrame{
3+
export class AlgoFrame {
44

55
private g2d;
66
private canvasWidth;
77
private canvasHeight;
88
private data;
99

10-
constructor(g2d, title, canvasWidth, canvasHeight) {
10+
constructor(g2d, canvasWidth, canvasHeight) {
1111
this.g2d = g2d;
1212
this.canvasWidth = canvasWidth;
1313
this.canvasHeight = canvasHeight;
@@ -21,21 +21,24 @@ export class AlgoFrame{
2121
return this.canvasHeight;
2222
}
2323

24-
repaint(){
24+
repaint() {
2525
// 具体绘制
2626
this.g2d.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
2727

2828
let w = this.canvasWidth / this.data.N();
2929

3030
for (let i = 0; i < this.data.N(); i++) {
31-
if(i < this.data.orderedIndex){
32-
AlgoVisHelper.setColor(this.g2d, AlgoVisHelper.Red);
33-
}else{
31+
if (i >= this.data.l && i <= this.data.r) {
32+
AlgoVisHelper.setColor(this.g2d, AlgoVisHelper.Green);
33+
}
34+
else {
3435
AlgoVisHelper.setColor(this.g2d, AlgoVisHelper.Grey);
3536
}
36-
if(i == this.data.currentIndex){
37-
AlgoVisHelper.setColor(this.g2d, AlgoVisHelper.LightBlue);
37+
38+
if (i >= this.data.l && i <= this.data.mergeIndex) {
39+
AlgoVisHelper.setColor(this.g2d, AlgoVisHelper.Red);
3840
}
41+
3942
AlgoVisHelper.fillRectangle(this.g2d, i * w, this.canvasHeight - this.data.get(i), w - 1, this.data.get(i));
4043
}
4144
}

0 commit comments

Comments
 (0)