Merge pull request #15 from Wikunia/feature-p5js-plotting

Visualize the Bombe
Wikunia · Feb 25, 2020 · 6340184 · 6340184
2 parents 318171c + 808fc40
commit 6340184
Show file tree

Hide file tree

Showing 13 changed files with 405 additions and 39 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,5 @@
 /dev/
 test/current/
 visualizations
-docs/build/
+docs/build/
+presentation/
diff --git a/docs/make.jl b/docs/make.jl
@@ -10,6 +10,7 @@ makedocs(
         "Home" => "index.md",
         "Tutorial" => "tutorial.md",
         "How-To" => "how_to.md",
+        "P5js visualization" => "p5js.md",
         "Explanation" => "explanation.md",
         "Reference" => "reference.md",
     ]

diff --git a/docs/src/index.md b/docs/src/index.md
@@ -31,8 +31,11 @@ This documentation is done in several parts.
 - You just have some `How to` questions? -> [How to guide](how_to.md)
 - You want to understand how it works deep down? Maybe improve it ;) -
   -  [Explanation](explanation.md)
-  -  And check out my blog post about it [Enigma and Bombe](https://opensourc.es/blog/enigma-and-bombe)
+  -  Check out my blog post about it [Enigma and Bombe](https://opensourc.es/blog/enigma-and-bombe)
+  -  Have a look at my video [Enigma: Endless possibilities is not enough](https://youtu.be/4cf7dc_8u44)
 - Gimme the code documentation directly! The [reference](reference.md) section got you covered.
+- You've seen the visualization I used in one of my videos?
+  - [How to use the visualization](p5js.md)
 
 If you have some questions please feel free to ask me by making an [issue](https://github.com/Wikunia/Enigma.jl/issues).
 

diff --git a/docs/src/p5js.md b/docs/src/p5js.md
@@ -0,0 +1,35 @@
+# Visualization and Animation using p5js
+
+I used [p5js](https://p5js.org/) in my videos explaining the Enigma and the Bombe.
+If you want to play around with it as well please follow these instructions.
+
+The `html` and `js` files are all in the `p5js` folder. 
+I have two main `html` files namely `index.html` for the Enigma Video and `bombe.html` for visualizing how to crack the Enigma.
+
+## Enigma
+
+The main javascript file for the Enigma is `sketch.js`.
+You should probably be able to use this out of the box if you watched the video.
+[Enigma: Endless possibilities is not enough](https://youtu.be/4cf7dc_8u44)
+
+- Click right off the slider area for making a rotor step.
+- The slider decides the number of frames for each encoding step so left most setting is the fastest. 
+- You can click on a letter (on the right side of the plugboard) to make an input
+
+The settings itself are part of `sketch.js` where you can set the settings of the Enigma. 
+
+## Bombe
+
+The main javascript file for the Bombe is `sketch_bombe.js`. In the video you can't see all the keys I press to change the visualization:
+
+- `s` move the guess to the right
+- `a` move the guess to the left
+- `r` switch off the yellow lights (to start a new input)
+- ` ` If you click on a letter on the plugboard (right hand side)
+  - it stops before it enters the plugboard in the reverse direction such that you can change the plugboard setting right before
+  - With ` ` you continue the encoding
+- `n` move the orange indicator to the left (make a backward rotor step)
+- `m` move the orange indicator to the right (make a rotor step)
+- `p` enter a plugboard setting. First press `p` and then two letters you want to connect
+- `z` reset the whole Bombe
+
diff --git a/p5js/bombe.html b/p5js/bombe.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
+    <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
+    <meta charset="utf-8" />
+
+  </head>
+  <body>
+    <script src="plugboard.js"></script>
+    <script src="rotor.js"></script>
+    <script src="ukw.js"></script>
+    <script src="enigma.js"></script>
+    <script src="sketch_bombe.js"></script>
+  </body>
+</html>
diff --git a/p5js/enigma.js b/p5js/enigma.js
@@ -3,9 +3,9 @@ class Enigma {
         this.step_size = step_size;
         this.plugboard = new Plugboard(this, step_size);
         this.rotors = [];
-        this.rotors.push(new Rotor(this, 1,2, 10, step_size));
-        this.rotors.push(new Rotor(this, 2,5, 20, step_size));
-        this.rotors.push(new Rotor(this, 3,1, 19, step_size));
+        this.rotors.push(new Rotor(this, 1,1, 1, step_size));
+        this.rotors.push(new Rotor(this, 2,2, 1, step_size));
+        this.rotors.push(new Rotor(this, 3,3, 1, step_size));
         this.ukw = new UKW(this, 1, step_size);
     }
     show() {
@@ -16,6 +16,22 @@ class Enigma {
         this.ukw.show();
     }
 
+    set_rotors(a,b,c) {
+        this.rotors[0].set_type(a);
+        this.rotors[1].set_type(b);
+        this.rotors[2].set_type(c);
+    }
+
+    set_rotor_positions(a,b,c, based=0) {
+        this.rotors[0].set_position(a, based);
+        this.rotors[1].set_position(b, based);
+        this.rotors[2].set_position(c, based);
+    }
+
+    set_ukw(ukw) {
+        this.ukw.set_type(ukw);
+    }
+
     set_plugboard(str) {
         this.plugboard.set(str);
     }
@@ -29,7 +45,7 @@ class Enigma {
         this.ukw.step_size = val*2;
     }
 
-    update(t) {
+    update(t, stop=false) {
         let step = 0
         for (let r=0; r <= 2; r++) {
             this.rotors[r].rotate(step, t);
@@ -47,7 +63,13 @@ class Enigma {
             this.rotors[r-1].update(step, t, true);
             step += this.step_size;
         }
-        this.plugboard.update(step, t, true);
+        if (!stop) {
+            this.plugboard.update(step, t, true);
+        } 
+        if (stop && t >= step) {
+            return false;
+        }
+        return true;
     }
 
     step_rotors() {
@@ -73,6 +95,29 @@ class Enigma {
         }
     }
 
+    step_rotors_bw() {
+        //  right most rotor
+        for (let r=0; r <= 2; r++) {
+            this.rotors[r].last_position = this.rotors[r].position;
+        }
+
+        if (this.rotors[2].position == this.rotors[2].rotation_point) {
+            if (this.rotors[1].position == this.rotors[1].rotation_point) {
+                this.rotors[0].position -= 1
+                this.rotors[0].position == -1 && (this.rotors[0].position = 25)
+            }
+            this.rotors[1].position -= 1
+            this.rotors[1].position == -1 && (this.rotors[1].position = 25)   
+        } else if (this.rotors[1].position+1 == this.rotors[1].rotation_point) { // probably wrong (untested!)
+            this.rotors[1].position -= 1
+            this.rotors[1].position == -1 && (this.rotors[1].position = 25)
+            this.rotors[0].position -= 1
+            this.rotors[0].position == -1 && (this.rotors[0].position = 25)
+        }
+        this.rotors[2].position -= 1
+        this.rotors[2].position == -1 && (this.rotors[2].position = 25)
+    }
+
     set_letter_idx(letter_idx) {
         this.step_rotors();
         this.plugboard.right_idx = letter_idx;

diff --git a/p5js/index.html b/p5js/index.html
@@ -5,9 +5,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
     <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
     <meta charset="utf-8" />
-
   </head>
-  <body>
+  <body>  
     <script src="plugboard.js"></script>
     <script src="rotor.js"></script>
     <script src="ukw.js"></script>

diff --git a/p5js/plugboard.js b/p5js/plugboard.js
@@ -5,18 +5,28 @@ class Plugboard {
         this.right_idx = -1;
         this.left_idx_bw = -1;
         this.letter_box_size = 35;
-        this.left = width-300;
+        this.left = width-250;
         this.top = 60;
         this.bottom = this.top+this.letter_box_size*26;
         this.step_size = step_size;
         this.enigma = enigma;
+        this.name = "Plugboard";
+        this.setting_str = "";
     }
     show() {
-        stroke(0);
-        fill(200);
+
         let letter_box_size = this.letter_box_size;
         let left = this.left;
         let bottom = this.bottom;
+        let top = this.top;
+
+        textSize(30);
+        stroke(0);
+        fill(0);
+        text(this.name, left+10, top-10);
+
+        stroke(0);
+        fill(200);
 
         rect(left, this.top, this.width, letter_box_size*26);
         for (let i = 0; i < 26; i++) {
@@ -44,13 +54,17 @@ class Plugboard {
     }
 
     set(str) {
+        this.mapping = [...Array(26).keys()];
         let parts = str.split(" ");
         for (let part of parts) {
-            let i = part[0].charCodeAt(0)-65;
-            let j = part[1].charCodeAt(0)-65;
-            this.mapping[i] = j;
-            this.mapping[j] = i;
+            if (part.length) {
+                let i = part[0].charCodeAt(0)-65;
+                let j = part[1].charCodeAt(0)-65;
+                this.mapping[i] = j;
+                this.mapping[j] = i;
+            }
         }
+        this.setting_str = str;
     }
 
     get_result(backwards) {

diff --git a/p5js/rotor.js b/p5js/rotor.js
@@ -1,33 +1,45 @@
 class Rotor {
-    constructor(enigma, order, rotor_nr, position, step_size) {
+    constructor(enigma, order, nr, position, step_size) {
         this.enigma = enigma;
         this.step_size = step_size;
         this.width = 170;
         this.order = order;
         this.rev_order = [3,2,1][order-1];
-        this.rotor_nr = rotor_nr;
         this.right_idx = -1;
         this.left_idx_bw = -1;
-        this.last_position = position;
-        this.position = position;
-        let mappings = [
+        this.set_position(position);
+        this.mappings = [
             [5, 11, 13, 6, 12, 7, 4, 17, 22, 26, 14, 20, 15, 23, 25, 8, 24, 21, 19, 16, 1, 9, 2, 18, 3, 10],
             [1, 10, 4, 11, 19, 9, 18, 21, 24, 2, 12, 8, 23, 20, 13, 3, 17, 7, 26, 14, 16, 25, 6, 22, 15, 5],
             [2, 4, 6, 8, 10, 12, 3, 16, 18, 20, 24, 22, 26, 14, 25, 5, 9, 23, 7, 1, 11, 13, 21, 19, 17, 15],
             [5, 19, 15, 22, 16, 26, 10, 1, 25, 17, 21, 9, 18, 8, 24, 12, 14, 6, 20, 7, 11, 4, 3, 13, 23, 2],
             [22, 26, 2, 18, 7, 9, 20, 25, 21, 16, 19, 4, 14, 8, 12, 24, 1, 23, 13, 10, 17, 15, 6, 5, 3, 11]
         ];
-        let rotation_points = [18, 6, 23, 11, 1];
-        this.rotation_point = rotation_points[this.rotor_nr-1]-1;
-        this.mapping = mappings[this.rotor_nr-1].map(i=>i-1);
-        this.mapping_bw = this.get_backward_mapping();
+        let rotor_names = ["I","II","III","IV","V"]
+        this.name = "Rotor "+rotor_names[nr-1];
 
+        this.rotation_points = [18, 6, 23, 11, 1];
+        this.set_type(nr);
+
         this.letter_box_size = 35;
-        this.left = width-300-this.rev_order*(80+this.width);
+        this.left = width-250-this.rev_order*(80+this.width);
         this.top = 60;
         this.bottom = this.top+this.letter_box_size*26;
     }
 
+    set_type(nr) {
+        this.nr = nr;
+        this.rotation_point = this.rotation_points[nr-1]-1;
+        this.mapping = this.mappings[nr-1].map(i=>i-1);
+        this.mapping_bw = this.get_backward_mapping();
+    }
+
+    set_position(position, based=0) {
+        position -= based;
+        this.position = position;
+        this.last_position = position;
+    }
+
     get_backward_mapping() {
         let backward_mp = Array.from({ length: 26 });
         for (let i = 0; i < 26; i++) {
@@ -37,12 +49,16 @@ class Rotor {
     }
 
     show() {
-        fill(200);
         let letter_box_size = this.letter_box_size;
         let left = this.left;
         let top = this.top;
         let bottom = this.bottom;
-
+        textSize(30);
+        stroke(0);
+        fill(0);
+        text(this.name, left+100-this.name.length*10, top-10);
+
+        fill(200);
         rect(left, top, this.width, letter_box_size*26);
         for (let i = 0; i < 26; i++) {
             this.enigma.plot_box_and_letter_right(left, this.width, bottom, letter_box_size, i, this.position, false);
@@ -94,8 +110,9 @@ class Rotor {
     rotate(min_t, t) {
         if (this.position == this.last_position)
             return
-        if (t > min_t + this.step_size)
+        if (t >= min_t + this.step_size)
             return
+
         let letter_box_size = this.letter_box_size;
         let left = this.left;
         let top = this.top;