GeezerVison is showing github.com — improve coloring · wangxe/AlgorithmVisualizer@219e343
File treeExpand file treeCollapse file tree Open diff view settings algorithm/cryptography/affine_cipher/basic
Expand file treeCollapse file tree Open diff view settings Collapse file Copy file name to clipboard +56-55Lines changed: 56 additions & 55 deletions | Original file line number | Diff line number | Diff line change |
|---|
| 1 | 1 | /* | 2 | | - code assumes that plainText contains ONLY LOWER CASE ALPHABETS | 3 | | -*/ | | 2 | + code assumes that plainText contains ONLY LOWER CASE ALPHABETS | | 3 | + */ | 4 | 4 |
| 5 | 5 | Number.prototype.mod = function (n) { | 6 | | - return ((this%n)+n)%n; | | 6 | + return ((this % n) + n) % n; | 7 | 7 | }; | 8 | 8 |
| 9 | 9 | var keys = {a: 5, b: 7}, | 10 | | - N = 26; | | 10 | + N = 26; | 11 | 11 |
| 12 | | -function encrypt (plainText) { | 13 | | - var cypherText = ''; | 14 | | - function cryptAlpha (alpha) { | 15 | | - var index = alpha.charCodeAt (0) - 'a'.charCodeAt (0); | 16 | | - var result = ((keys.a * index) + keys.b).mod (N); | | 12 | +function encrypt(plainText) { | | 13 | + var cypherText = ''; | 17 | 14 |
| 18 | | - logger._print ('Index of ' + alpha + ' = ' + index); | | 15 | + function cryptAlpha(alpha) { | | 16 | + var index = alpha.charCodeAt(0) - 'a'.charCodeAt(0); | | 17 | + var result = ((keys.a * index) + keys.b).mod(N); | 19 | 18 |
| 20 | | - result += 'a'.charCodeAt (0); | 21 | | - return String.fromCharCode (result); | 22 | | - } | | 19 | + logger._print('Index of ' + alpha + ' = ' + index); | 23 | 20 |
| 24 | | - logger._print ('Beginning Affine Encryption'); | 25 | | - logger._print ('Encryption formula: <b>((keys.a * index_of_alphabet) + keys.b) % N</b>'); | 26 | | - logger._print ('keys.a=' + keys.a + ', keys.b=' + keys.b + ', N=' + N); | | 21 | + result += 'a'.charCodeAt(0); | | 22 | + return String.fromCharCode(result); | | 23 | + } | 27 | 24 |
| 28 | | - for (var i in plainText) { | 29 | | - ptTracer._select (i)._wait (); | 30 | | - ptTracer._deselect (i)._wait (); | | 25 | + logger._print('Beginning Affine Encryption'); | | 26 | + logger._print('Encryption formula: <b>((keys.a * index_of_alphabet) + keys.b) % N</b>'); | | 27 | + logger._print('keys.a=' + keys.a + ', keys.b=' + keys.b + ', N=' + N); | 31 | 28 |
| 32 | | - cypherText += cryptAlpha (plainText [i]); | | 29 | + for (var i in plainText) { | | 30 | + ptTracer._select(i)._wait(); | | 31 | + ptTracer._deselect(i); | 33 | 32 |
| 34 | | - ptTracer._notify (i, cypherText.slice (-1))._wait (); | 35 | | - ptTracer._denotify (i)._wait (); | 36 | | - } | | 33 | + cypherText += cryptAlpha(plainText [i]); | 37 | 34 |
| 38 | | - return cypherText; | | 35 | + ptTracer._notify(i, cypherText.slice(-1))._wait(); | | 36 | + ptTracer._denotify(i); | | 37 | + } | | 38 | + | | 39 | + return cypherText; | 39 | 40 | } | 40 | 41 |
| 41 | | -function decrypt (cypherText) { | 42 | | - var plainText = ''; | 43 | | - var aInverse = (function () { | 44 | | - for (var i = 1; i < N; i++) { | 45 | | - if ( ((keys.a * i).mod (N)) === 1 ) { | 46 | | - return i; | 47 | | - } | 48 | | - } | 49 | | - }) (); | | 42 | +function decrypt(cypherText) { | | 43 | + var plainText = ''; | | 44 | + var aInverse = (function () { | | 45 | + for (var i = 1; i < N; i++) { | | 46 | + if (((keys.a * i).mod(N)) === 1) { | | 47 | + return i; | | 48 | + } | | 49 | + } | | 50 | + })(); | 50 | 51 |
| 51 | | - logger._print ('a<sup>-1</sup> = ' + aInverse); | | 52 | + logger._print('a<sup>-1</sup> = ' + aInverse); | 52 | 53 |
| 53 | | - function decryptAlpha (alpha) { | 54 | | - var index = alpha.charCodeAt (0) - 'a'.charCodeAt (0); | 55 | | - var result = (aInverse * (index - keys.b)).mod (N); | | 54 | + function decryptAlpha(alpha) { | | 55 | + var index = alpha.charCodeAt(0) - 'a'.charCodeAt(0); | | 56 | + var result = (aInverse * (index - keys.b)).mod(N); | 56 | 57 |
| 57 | | - logger._print ('Index of ' + alpha + ' = ' + index); | | 58 | + logger._print('Index of ' + alpha + ' = ' + index); | 58 | 59 |
| 59 | | - result += 'a'.charCodeAt (0); | 60 | | - return String.fromCharCode (result); | 61 | | - } | | 60 | + result += 'a'.charCodeAt(0); | | 61 | + return String.fromCharCode(result); | | 62 | + } | 62 | 63 |
| 63 | | - logger._print ('Beginning Affine Decryption'); | 64 | | - logger._print ('Decryption formula: <b>(a<sup>-1</sup> * (index - keys.b)) % N</b>'); | 65 | | - logger._print ('keys.b=' + keys.b + ', N=' + N); | | 64 | + logger._print('Beginning Affine Decryption'); | | 65 | + logger._print('Decryption formula: <b>(a<sup>-1</sup> * (index - keys.b)) % N</b>'); | | 66 | + logger._print('keys.b=' + keys.b + ', N=' + N); | 66 | 67 |
| 67 | | - for (var i in cypherText) { | 68 | | - ctTracer._select (i)._wait (); | 69 | | - ctTracer._deselect (i)._wait (); | | 68 | + for (var i in cypherText) { | | 69 | + ctTracer._select(i)._wait(); | | 70 | + ctTracer._deselect(i)._wait(); | 70 | 71 |
| 71 | | - plainText += decryptAlpha (cypherText [i]); | | 72 | + plainText += decryptAlpha(cypherText [i]); | 72 | 73 |
| 73 | | - ctTracer._notify (i, plainText.slice (-1))._wait (); | 74 | | - ctTracer._denotify (i)._wait (); | 75 | | - } | | 74 | + ctTracer._notify(i, plainText.slice(-1))._wait(); | | 75 | + ctTracer._denotify(i)._wait(); | | 76 | + } | 76 | 77 |
| 77 | | - return plainText; | | 78 | + return plainText; | 78 | 79 | } | 79 | 80 |
| 80 | | -var cipherText = encrypt (plainText); | 81 | | -ctTracer._setData (cipherText); | 82 | | -decrypt (cipherText); | | 81 | +var cipherText = encrypt(plainText); | | 82 | +ctTracer._setData(cipherText); | | 83 | +decrypt(cipherText); |
Collapse file Copy file name to clipboardExpand all lines: js/module/tracer/array2d.js +8-16Lines changed: 8 additions & 16 deletions | Original file line number | Diff line number | Diff line change |
|---|
@@ -14,16 +14,12 @@ class Array2DTracer extends Tracer { | 14 | 14 | constructor(name) { | 15 | 15 | super(name); | 16 | 16 |
| 17 | | - this.selectColor = '#2962ff'; | 18 | | - this.notifyColor = '#c51162'; | 19 | | - | 20 | 17 | if (this.isNew) initView(this); | 21 | 18 | } | 22 | 19 |
| 23 | 20 | _notify(x, y, v) { | 24 | 21 | this.manager.pushStep(this.capsule, { | 25 | 22 | type: 'notify', | 26 | | - color: this.notifyColor, | 27 | 23 | x: x, | 28 | 24 | y: y, | 29 | 25 | v: v | @@ -145,8 +141,7 @@ class Array2DTracer extends Tracer { | 145 | 141 | } | 146 | 142 | } | 147 | 143 | var step = { | 148 | | - type: type, | 149 | | - color: this.selectColor | | 144 | + type: type | 150 | 145 | }; | 151 | 146 | $.extend(step, coord); | 152 | 147 | this.manager.pushStep(this.capsule, step); | @@ -163,8 +158,8 @@ class Array2DTracer extends Tracer { | 163 | 158 | case 'denotify': | 164 | 159 | case 'select': | 165 | 160 | case 'deselect': | 166 | | - var colorClass = step.color; | 167 | | - var addClass = step.type == 'select' || step.type == 'notify'; | | 161 | + var color = step.type == 'select' || step.type == 'deselect' ? this.color.selected : this.color.notified; | | 162 | + var paint = step.type == 'select' || step.type == 'notify'; | 168 | 163 | var sx = step.sx; | 169 | 164 | var sy = step.sy; | 170 | 165 | var ex = step.ex; | @@ -173,7 +168,7 @@ class Array2DTracer extends Tracer { | 173 | 168 | if (sy === undefined) sy = step.y; | 174 | 169 | if (ex === undefined) ex = step.x; | 175 | 170 | if (ey === undefined) ey = step.y; | 176 | | - this.paintColor(sx, sy, ex, ey, colorClass, addClass); | | 171 | + this.paintColor(sx, sy, ex, ey, color, paint); | 177 | 172 | break; | 178 | 173 | case 'separate': | 179 | 174 | this.deseparate(step.x, step.y); | @@ -292,22 +287,19 @@ class Array2DTracer extends Tracer { | 292 | 287 | this.refresh(); | 293 | 288 | } | 294 | 289 |
| 295 | | - paintColor(sx, sy, ex, ey, colorClass, addClass) { | | 290 | + paintColor(sx, sy, ex, ey, color, paint) { | 296 | 291 | for (var i = sx; i <= ex; i++) { | 297 | 292 | var $row = this.$table.find('.mtbl-row').eq(i); | 298 | 293 | for (var j = sy; j <= ey; j++) { | 299 | 294 | var $col = $row.find('.mtbl-col').eq(j); | 300 | | - if(addClass) $col[0].style.backgroundColor = colorClass; | 301 | | - else $col[0].style.backgroundColor = ""; | | 295 | + if (paint) $col.css('background', color); | | 296 | + else $col.css('background', ''); | 302 | 297 | } | 303 | 298 | } | 304 | 299 | } | 305 | 300 |
| 306 | 301 | clearColor() { | 307 | | - var divs = this.$table.find('.mtbl-col'); | 308 | | - for (var i = 0; i < divs.length; i++){ | 309 | | - divs[i].style.backgroundColor = ""; | 310 | | - } | | 302 | + this.$table.find('.mtbl-col').css('background', ''); | 311 | 303 | } | 312 | 304 |
| 313 | 305 | separate(x, y) { | |
Collapse file Copy file name to clipboardExpand all lines: js/module/tracer/chart.js +3-7Lines changed: 3 additions & 7 deletions | Original file line number | Diff line number | Diff line change |
|---|
@@ -10,10 +10,6 @@ class ChartTracer extends Tracer { | 10 | 10 | constructor(name) { | 11 | 11 | super(name); | 12 | 12 |
| 13 | | - this.selectColor = '#2962ff'; | 14 | | - this.notifyColor = '#c51162'; | 15 | | - this.defaultColor = 'rgb(136, 136, 136)'; | 16 | | - | 17 | 13 | if (this.isNew) initView(this); | 18 | 14 | } | 19 | 15 |
| @@ -25,7 +21,7 @@ class ChartTracer extends Tracer { | 25 | 21 | } | 26 | 22 |
| 27 | 23 | var color = []; | 28 | | - for (var i = 0; i < C.length; i++) color.push(this.defaultColor); | | 24 | + for (var i = 0; i < C.length; i++) color.push(this.color.default); | 29 | 25 | this.chart.config.data = { | 30 | 26 | labels: C.map(String), | 31 | 27 | datasets: [{ | @@ -81,7 +77,7 @@ class ChartTracer extends Tracer { | 81 | 77 | case 'denotify': | 82 | 78 | case 'select': | 83 | 79 | case 'deselect': | 84 | | - let color = step.type == 'notify' ? this.notifyColor : step.type == 'select' ? this.selectColor : this.defaultColor; | | 80 | + let color = step.type == 'notify' ? this.color.notified : step.type == 'select' ? this.color.selected : this.color.default; | 85 | 81 | if (step.e !== undefined) | 86 | 82 | for (var i = step.s; i <= step.e; i++) | 87 | 83 | this.chart.config.data.datasets[0].backgroundColor[i] = color; | @@ -107,7 +103,7 @@ class ChartTracer extends Tracer { | 107 | 103 | if (data.datasets.length) { | 108 | 104 | const backgroundColor = data.datasets[0].backgroundColor; | 109 | 105 | for (let i = 0; i < backgroundColor.length; i++) { | 110 | | - backgroundColor[i] = this.defaultColor; | | 106 | + backgroundColor[i] = this.color.default; | 111 | 107 | } | 112 | 108 | this.chart.update(); | 113 | 109 | } | |
Collapse file Copy file name to clipboardExpand all lines: js/module/tracer/coordinate_system.js +2-4Lines changed: 2 additions & 4 deletions | Original file line number | Diff line number | Diff line change |
|---|
@@ -25,8 +25,7 @@ class CoordinateSystemTracer extends DirectedGraphTracer { | 25 | 25 | x: C[i][0], | 26 | 26 | y: C[i][1], | 27 | 27 | label: '' + i, | 28 | | - size: 1, | 29 | | - color: this.defaultColor | | 28 | + size: 1 | 30 | 29 | }); | 31 | 30 | this.graph.read({ | 32 | 31 | nodes: nodes, | @@ -49,7 +48,7 @@ class CoordinateSystemTracer extends DirectedGraphTracer { | 49 | 48 | case 'leave': | 50 | 49 | var visit = step.type == 'visit'; | 51 | 50 | var targetNode = this.graph.nodes(this.n(step.target)); | 52 | | - var color = visit ? this.visitedColor : this.leftColor; | | 51 | + var color = visit ? this.color.visited : this.color.left; | 53 | 52 | targetNode.color = color; | 54 | 53 | if (step.source !== undefined) { | 55 | 54 | var edgeId = this.e(step.source, step.target); | @@ -62,7 +61,6 @@ class CoordinateSystemTracer extends DirectedGraphTracer { | 62 | 61 | id: this.e(step.target, step.source), | 63 | 62 | source: this.n(step.source), | 64 | 63 | target: this.n(step.target), | 65 | | - color: color, | 66 | 64 | size: 1 | 67 | 65 | }); | 68 | 66 | } | |
Collapse file Copy file name to clipboardExpand all lines: js/module/tracer/directed_graph.js +6-11Lines changed: 6 additions & 11 deletions | Original file line number | Diff line number | Diff line change |
|---|
@@ -14,11 +14,6 @@ class DirectedGraphTracer extends Tracer { | 14 | 14 | constructor(name) { | 15 | 15 | super(name); | 16 | 16 |
| 17 | | - this.selectColor = '#2962ff'; | 18 | | - this.visitedColor = '#f50057'; | 19 | | - this.leftColor = '#616161'; | 20 | | - this.defaultColor = '#bdbdbd'; | 21 | | - | 22 | 17 | if (this.isNew) initView(this); | 23 | 18 | } | 24 | 19 |
| @@ -57,7 +52,7 @@ class DirectedGraphTracer extends Tracer { | 57 | 52 | case 'leave': | 58 | 53 | var visit = step.type == 'visit'; | 59 | 54 | var targetNode = this.graph.nodes(this.n(step.target)); | 60 | | - var color = visit ? this.visitedColor : this.leftColor; | | 55 | + var color = visit ? this.color.visited : this.color.left; | 61 | 56 | targetNode.color = color; | 62 | 57 | if (step.source !== undefined) { | 63 | 58 | var edgeId = this.e(step.source, step.target); | @@ -135,7 +130,7 @@ class DirectedGraphTracer extends Tracer { | 135 | 130 | x: .5 + Math.sin(currentAngle) / 2, | 136 | 131 | y: .5 + Math.cos(currentAngle) / 2, | 137 | 132 | size: 1, | 138 | | - color: this.defaultColor, | | 133 | + color: this.color.default, | 139 | 134 | weight: 0 | 140 | 135 | }); | 141 | 136 |
| @@ -147,7 +142,7 @@ class DirectedGraphTracer extends Tracer { | 147 | 142 | id: this.e(i, j), | 148 | 143 | source: this.n(i), | 149 | 144 | target: this.n(j), | 150 | | - color: this.defaultColor, | | 145 | + color: this.color.default, | 151 | 146 | size: 1, | 152 | 147 | weight: refineByType(value) | 153 | 148 | }); | @@ -160,7 +155,7 @@ class DirectedGraphTracer extends Tracer { | 160 | 155 | id: this.e(i, j), | 161 | 156 | source: this.n(i), | 162 | 157 | target: this.n(j), | 163 | | - color: this.defaultColor, | | 158 | + color: this.color.default, | 164 | 159 | size: 1, | 165 | 160 | weight: refineByType(G[i][j]) | 166 | 161 | }); | @@ -208,10 +203,10 @@ class DirectedGraphTracer extends Tracer { | 208 | 203 | var tracer = this; | 209 | 204 |
| 210 | 205 | this.graph.nodes().forEach(function (node) { | 211 | | - node.color = tracer.defaultColor; | | 206 | + node.color = tracer.color.default; | 212 | 207 | }); | 213 | 208 | this.graph.edges().forEach(function (edge) { | 214 | | - edge.color = tracer.defaultColor; | | 209 | + edge.color = tracer.color.default; | 215 | 210 | }); | 216 | 211 | } | 217 | 212 |
| |
Collapse file Copy file name to clipboardExpand all lines: js/module/tracer/tracer.js +17-15Lines changed: 17 additions & 15 deletions | Original file line number | Diff line number | Diff line change |
|---|
@@ -15,11 +15,13 @@ class Tracer { | 15 | 15 | constructor(name) { | 16 | 16 | this.module = this.constructor; | 17 | 17 |
| 18 | | - this.selectColor; | 19 | | - this.notifyColor; | 20 | | - this.defaultColor; | 21 | | - this.leftColor; | 22 | | - this.visitedColor; | | 18 | + this.color = { | | 19 | + selected: '#2962ff', | | 20 | + notified: '#f50057', | | 21 | + visited: '#f50057', | | 22 | + left: '#616161', | | 23 | + default: '#bdbdbd' | | 24 | + }; | 23 | 25 |
| 24 | 26 | this.manager = app.getTracerManager(); | 25 | 27 | this.capsule = this.manager.allocate(this); | @@ -48,24 +50,24 @@ class Tracer { | 48 | 50 | return this; | 49 | 51 | } | 50 | 52 |
| 51 | | - _setSelectFillColor(c) { | 52 | | - this.selectColor = c; | | 53 | + _setSelectedColor(c) { | | 54 | + this.color.selected = c; | 53 | 55 | } | 54 | 56 |
| 55 | | - _setNotifyFillColor(c) { | 56 | | - this.notifyColor = c; | | 57 | + _setNotifiedColor(c) { | | 58 | + this.color.notified = c; | 57 | 59 | } | 58 | 60 |
| 59 | | - _setDefaultFillColor(c){ | 60 | | - this.defaultColor = c; | | 61 | + _setVisitedColor(c) { | | 62 | + this.color.visited = c; | 61 | 63 | } | 62 | 64 |
| 63 | | - _setLeftFillColor(c){ | 64 | | - this.leftColor = c; | | 65 | + _setLeftColor(c) { | | 66 | + this.color.left = c; | 65 | 67 | } | 66 | 68 |
| 67 | | - _setVisitedFillColor(c){ | 68 | | - this.visitedColor = c; | | 69 | + _setDefaultColor(c) { | | 70 | + this.color.default = c; | 69 | 71 | } | 70 | 72 |
| 71 | 73 | processStep(step, options) { | |
|