Modifications to support animation and GUI scalability to changes in …

…window size.

css/style.css

@@ -59,9 +59,9 @@ page {
     position: fixed;
     display: block;
     visibility: hidden;
-    height: 92%;
+    height: 91.7%;
     width: 100%;
-    overflow: auto;
+    overflow: hidden;
 }
 
 loading {
@@ -358,6 +358,7 @@ input[type="range"] {
     position: relative;
     font-size: 32px;
     cursor: pointer;
+    font-size: 2vw;
 }
 
 /* The button used to open the sidebar */
@@ -540,6 +541,7 @@ output p {
     font: inherit;
     border: none;
     color: inherit;
+    font-size: 1.5vh;
 }
 
 .ls-files {
@@ -550,6 +552,17 @@ output p {
     column-width: 100px;
 }
 
+.console-title {
+    color: white;
+    font-size: 5vh;
+    font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.console-text {
+    color: white;
+    font-size: 1.5vh;
+}
+
 /* Visualiser Information */
 .quadrant.information h1 {
     font-size: 4vh;

main.js

@@ -12,8 +12,8 @@ const url = require('url');
 
 const INDEX_FOLDER_PATH = path.join(__dirname, 'views', 'home');
 // Most common resolution :)
-const WINDOW_WIDTH  = 1600;
-const WINDOW_HEIGHT = 1080;
+const WINDOW_WIDTH  = 1366;
+const WINDOW_HEIGHT = 768;
 
 let mainWindow;
 

structures/datastructures/linear/Array.js

@@ -266,21 +266,14 @@ StaticArray.prototype.search.help = `Preforms linear search on the array for a (
 StaticArray.prototype.sort.help = `Sorts the array.\n (method): ${Object.keys(StaticArray.sortingMethods)+""} \n (type): 'ascending' or 'descending'`;
 
 StaticArray.ElementGraphic = class {
-    constructor(arrayLength, index, value, structure = {
-        width: 70,
-        height: 70,
-        x: 0,
-        y: 0
-    }) {
+    constructor(arrayLength, index, value) {
         this.arrayLength = arrayLength;
-
         this.index = index;
         this.value = value;
 
-        this.width = structure.width;
-        this.height = structure.height;
-        this.x = structure.x;
-        this.y = structure.y;
+        // Dynamically generated (for responsive canvas resize purposes)
+        this.width = 0, this.height = 0;
+        this.x = 0, this.y = 0;
 
         this.resetColor();
     }
@@ -308,6 +301,9 @@ StaticArray.ElementGraphic = class {
     }
 
     draw(env) {
+        this.width  = env.width  * 0.09;
+        this.height = env.height * 0.18;
+
         let offset_x = (env.width - (this.arrayLength * this.width)) / 2;
         let offset_y = env.height * .5;
 
@@ -322,7 +318,7 @@ StaticArray.ElementGraphic = class {
 
         // draw value
         env.textFont(env.NORMAL_FONT);
-        env.textSize(35);
+        env.textSize(env.height * 0.10);
 
         let value = String(this.value);
         let tw = env.textWidth(value);
@@ -332,7 +328,7 @@ StaticArray.ElementGraphic = class {
         env.text(value, this.x + this.width / 2 - tw / 2, this.y + this.height / 2 + th / 2.5);
 
         // draw index
-        env.textSize(20);
+        env.textSize(env.height * 0.06);
 
         let index = "[" + String(this.index) + "]";
         let tw2 = env.textWidth(index);

structures/datastructures/linear/Array.yaml

@@ -1,17 +1,17 @@
-Title: Static Array (No Gaps)
+Title: Static Array
 Description: |- 
  An array is a collection of items stored at contiguous memory locations. 
  The idea is to store multiple items of the same type together. 
  This makes it easier to calculate the position of each element by simply adding an offset to a base value, i.e., the memory location of the first element of the array (generally denoted by the name of the array).
 Image: assets/media/Array.png
 Operations:
  Insertion:
-  Description: Operation which inserts a new element into array.
+  Description: Operation which inserts a new element into array. A value is inserted using index corresponding to the offset of the array.
   Complexity: O(1)
  Deletion:
-  Description: Operation which deletes an element indexed in the array.
+  Description: Operation which deletes an element indexed in the array. A value is removed at the index corresponding to the offset of the array.
   Complexity: O(1)
  Search:
-  Description: Operation which searches the array for a value.
-  Complexity: O(n)
+  Description: Operation which searches the array for a value. Typical polynomial searching algorithms include - Bubble Sort and Insertion Sort.
+  Complexity: O(n^2)
 Space Complexity: O(n)

structures/datastructures/linear/Queue.js

@@ -5,8 +5,8 @@ class Queue extends VisualisationItem {
         super(
             "Queue",
             itemData, {
-                "head_pointer": new Queue.PointerGraphic("head", 50, 80, 70, 70), // x, y, w, h
-                "tail_pointer": new Queue.PointerGraphic("tail", 150, 80, 70, 70),
+                "head_pointer": new Queue.PointerGraphic("head"),
+                "tail_pointer": new Queue.PointerGraphic("tail"),
                 "array": Array.from({
                     length
                 }, (v, i) => new Queue.ElementGraphic(length, i))
@@ -276,14 +276,13 @@ Queue.prototype.search.help = `Search a (value) in the queue.`;
 Queue.prototype.sort.help = `Sort the queue in 'ascending' or 'descending' order.`;
 
 Queue.PointerGraphic = class {
-    constructor(name, x, y, width, height) {
+    constructor(name) {
         this.name = name;
         this.value = 0;
 
-        this.x = x;
-        this.y = y;
-        this.width = width;
-        this.height = height;
+        // Dynamically generated (for responsive canvas resize purposes)
+        this.width = 0, this.height = 0;
+        this.x = 0, this.y = 0;
 
         this.resetColor();
     }
@@ -307,19 +306,25 @@ Queue.PointerGraphic = class {
     }
 
     draw(env) {
+        // dynamic size & positioning
+        this.width  = env.width  * 0.09;
+        this.height = env.height * 0.18;
+        this.x = env.width * (this.name == "head" ? 0.1 : 0.25);
+        this.y = env.height * 0.15;
+
         // draw border rect
         env.fill(...this.borderColor);
         env.rect(this.x, this.y, this.width, this.height);
         // draw inner rect
         env.fill(...this.rectColor);
         env.rect(this.x + 4, this.y + 4, this.width - 8, this.height - 8);
 
-        // Text env config
+        // text env config
         env.textFont(env.NORMAL_FONT);
 
         // draw name
         env.fill(...this.textColor);
-        env.textSize(25);
+        env.textSize(env.height * 0.06);
 
         let tw = env.textWidth(this.name);
         let th = env.textSize();
@@ -328,7 +333,7 @@ Queue.PointerGraphic = class {
 
         // draw value
         env.fill(40, 40, 40);
-        env.textSize(35);
+        env.textSize(env.height * 0.10);
 
         let value = String(this.value);
         let tw2 = env.textWidth(value);
@@ -339,21 +344,15 @@ Queue.PointerGraphic = class {
 }
 
 Queue.ElementGraphic = class {
-    constructor(arrayLength, index, structure = {
-        width: 70,
-        height: 70,
-        x: 0,
-        y: 0
-    }) {
+    constructor(arrayLength, index) {
         this.arrayLength = arrayLength;
 
         this.index = index;
         this.value = null;
 
-        this.width = structure.width;
-        this.height = structure.height;
-        this.x = structure.x;
-        this.y = structure.y;
+        // Dynamically generated (for responsive canvas resize purposes)
+        this.width = 0, this.height = 0;
+        this.x = 0, this.y = 0;
 
         this.resetColor();
     }
@@ -386,6 +385,10 @@ Queue.ElementGraphic = class {
     }
 
     draw(env) {
+        // dynamic size & positioning
+        this.width  = env.width  * 0.09;
+        this.height = env.height * 0.18;
+
         let offset_x = (env.width - (this.arrayLength * this.width)) / 2;
         let offset_y = env.height * .6;
 
@@ -423,7 +426,7 @@ Queue.ElementGraphic = class {
         // draw value
         if (this.value !== null) { // dont draw empty cells
             env.textFont(env.NORMAL_FONT);
-            env.textSize(35);
+            env.textSize(env.height * 0.10);
 
             let value = String(this.value);
             let tw = env.textWidth(value);
@@ -434,7 +437,7 @@ Queue.ElementGraphic = class {
         }
 
         // draw index
-        env.textSize(20);
+        env.textSize(env.height * 0.06);
 
         let index = "[" + String(this.index) + "]";
         let tw2 = env.textWidth(index);

structures/datastructures/linear/Queue.yaml

@@ -1,16 +1,16 @@
 Title: Queue (Circular Array)
 Description: |- 
- Description needs to be written!
- etc...
-Image: assets/media/Queue.png
+ A Queue is a linear structure which follows a particular order in which the operations are performed. 
+ The order is First In First Out (FIFO). 
+ A good example of a queue is any queue of consumers for a resource where the consumer that came first is served first. 
 Operations:
  Insertion:
-  Description: (...).
-  Complexity: O(x)
+  Description: Using a head pointer a value is inserted.
+  Complexity: O(1)
  Deletion:
-  Description: (...).
-  Complexity: O(x)
+  Description: Using a tail pointer a value is removed.
+  Complexity: O(1)
  Search:
-  Description: (...).
-  Complexity: O(x)
-Space Complexity: O(x)
+  Description: Searching a queue using only queue operations and one queue of space complexity - is essentially performing bubble sort in a circular fashion.
+  Complexity: O(n^2)
+Space Complexity: O(n)

structures/datastructures/linear/Stack.js

@@ -152,9 +152,9 @@ Stack.PointerGraphic = class {
     constructor() {
         this.value = -1;
 
-        this.x = 0;
-        this.y = 0;
-        this.size = 22;
+        // Dynamically generated (for responsive canvas resize purposes)
+        this.size = 0;
+        this.x = 0, this.y = 0;
 
         this.resetColor();
     }
@@ -173,16 +173,18 @@ Stack.PointerGraphic = class {
     }
 
     draw(env) {
+        // dynamic size
+        this.size = env.width * 0.02;
+
         let element, ax, ay;
-
         if (this.value === -1) {
             element = activeItem.state.array[0];
             ax = element.x + this.size / 2;
             ay = element.y + element.height + this.size;
         } else {
             element = activeItem.state.array[this.value];
-            ax = element.x + element.width + this.size + 15;
-            ay = element.y + this.size;
+            ax = element.x + element.width + this.size;
+            ay = element.y + this.size + 5;
         }
 
         let offset = this.size;
@@ -196,7 +198,7 @@ Stack.PointerGraphic = class {
         env.pop();
 
         env.textFont(env.NORMAL_FONT);
-        env.textSize(24);
+        env.textSize(env.height * 0.06);
 
         let str = "Top Of Stack" + ((this.value === -1 && " (EMPTY)") || "");
         let tw = env.textWidth(str);
@@ -208,21 +210,15 @@ Stack.PointerGraphic = class {
 }
 
 Stack.ElementGraphic = class {
-    constructor(arrayLength, index, value, structure = {
-        width: 150,
-        height: 50,
-        x: 0,
-        y: 0
-    }) {
+    constructor(arrayLength, index) {
         this.arrayLength = arrayLength;
 
         this.index = index;
         this.value = null;
 
-        this.width = structure.width;
-        this.height = structure.height;
-        this.x = structure.x;
-        this.y = structure.y;
+        // Dynamically generated (for responsive canvas resize purposes)
+        this.width = 0, this.height = 0;
+        this.x = 0, this.y = 0;
 
         this.resetColor();
     }
@@ -250,6 +246,10 @@ Stack.ElementGraphic = class {
     }
 
     draw(env) {
+        // dynamic size & positioning
+        this.width  = env.width  * 0.26;
+        this.height = env.height * 0.11;
+
         let offset_x = env.width * .5;
         let offset_y = (this.arrayLength * this.height);
 
@@ -268,7 +268,7 @@ Stack.ElementGraphic = class {
         // draw value
         if (this.value !== null) {
             env.textFont(env.NORMAL_FONT);
-            env.textSize(35);
+            env.textSize(env.height * 0.08);
 
             let value = String(this.value);
             let tw = env.textWidth(value);
@@ -279,7 +279,7 @@ Stack.ElementGraphic = class {
         }
 
         // draw index
-        env.textSize(20);
+        env.textSize(env.height * 0.06);
 
         let index = "[" + String(this.index) + "]";
         let tw2 = env.textWidth(index);