ARG that's uglyyyyy :D

I needed some code and I don't have that much time => UGLY CODE

4 files changed, 94 insertions, 5 deletions

diff --git a/css/style.css b/css/style.css
index 58e35d3..2dac462 100644
--- a/css/style.css
+++ b/css/style.css
@@ -7,6 +7,14 @@
     font-size: xx-large;
 }
 
+#flaecheErg {
+    color: "red";
+    position: fixed;
+    bottom: 20px;
+
+    font-size: xx-large;
+}
+
 .flexContainer {
     display: flex;
 }
diff --git a/index.html b/index.html
index ca84f5b..3457695 100644
--- a/index.html
+++ b/index.html
@@ -93,6 +93,7 @@
                     </section>
                     <section>
                         <div id="iterationCtr"></div>
+                        <div id="flaecheErg"></div>
                         <div class="flexContainer">
                             <canvas id="koch"></canvas>
                         </div>
@@ -157,7 +158,24 @@
                         </div>
                     </section>
                     <section>
-                        <p>\[ \frac{2s^2\sqrt{3}}{5} \]</p>
+                        <p class="fragment fade-in">
+                            Jedes neue Dreieck hat \( \frac{1}{9} \) des vorherigen Flächeninhalts
+                        </p>
+                        <p class="fragment fade-in">\[ N_n = 4^n \]</p>
+                        <p class="fragment fade-in">\[ \triangle_n = \left(\frac{1}{9}\right)^n \]</p>
+                        <p class="fragment fade-in">
+                            \[ \Delta A_n = 4^{n-1} \cdot \left(\frac{1}{9}\right)^{n - 1} =
+                            \left(\frac{4}{9}\right)^{n-1} \]
+                        </p>
+                    </section>
+                    <section>
+                        <p>\[ A_n = \sum_{k=0}^{n} \left(\frac{4}{9}\right)^k \]</p>
+                    </section>
+                    <section>
+                        <p>\[ A = \sum_{n=0}^{\infty} \left(\frac{4}{9}\right)^n \]</p>
+                        <p class="fragment fade-in">
+                            \[ = \frac{1}{1 - \frac{4}{9}} = \frac{9}{5} = \underline{\underline{1,8}} \]
+                        </p>
                     </section>
                 </section>
 
diff --git a/js/main.js b/js/main.js
index 7aff7da..e918f40 100644
--- a/js/main.js
+++ b/js/main.js
@@ -3,9 +3,10 @@
 /******************
  * KOCH ANIMATION *
  ******************/
-{
+function koch_slide() {
     const canvas = document.getElementById("koch");
     const ctr = document.getElementById("iterationCtr");
+    const flaecheErg = document.getElementById("flaecheErg");
     const ctx = canvas.getContext("2d");
 
     // Constants...
@@ -17,6 +18,10 @@
     const lineWidth = 2;
 
     let triangleCount;
+    let dispatcherCount = 0;
+    let additionString = "";
+    let showAddition = false;
+    let areaInterval;
 
     canvas.width = window.innerWidth * 0.9;
     canvas.height = window.innerHeight * 0.9;
@@ -32,6 +37,7 @@
     window.onkeyup = (event) => {
         switch (event.key) {
             case "0":
+                additionString = "\\[ 0  ";
             case "1":
             case "2":
             case "3":
@@ -42,9 +48,44 @@
             case "8":
             case "9":
                 triangleCount = 0;
+                dispatcherCount = parseInt(event.key);
                 ctx.fillRect(-cx, -cy, 2 * cx, 2 * cy);
                 koch([-cx, 100], [cx, 100], Number(event.key) - 1);
-                ctr.innerText = "Generation: " + event.key + " - Dreiecke: " + triangleCount;
+                if (showAddition && event.key != "0") {
+                    additionString = additionString.slice(0, -2);
+                    if (event.key == "1") additionString += " + (1) \\]";
+                    else additionString += `+ 4^{${event.key}} \\cdot \\frac{1}{9^${event.key}} \\]`;
+                    ctr.innerText = additionString;
+                    console.log(additionString);
+                    MathJax.typeset();
+                    flaecheErg.innerText = area(parseInt(event.key));
+                } else if (event.key != "0") {
+                    ctr.innerText = "Generation: " + event.key + " - Dreiecke: " + triangleCount;
+                }
+
+                break;
+            case "a":
+                ctr.innerText = "";
+                additionString = "";
+                showAddition = !showAddition;
+                break;
+            case "z":
+                let i = 0;
+                areaInterval = setInterval(() => {
+                    flaecheErg.innerText = area(i);
+                    i++;
+                }, 500);
+                break;
+            case "q":
+                clearInterval(areaInterval);
+                break;
+            case "[":
+                if (dispatcherCount >= 1) dispatcherCount--;
+                window.dispatchEvent(new KeyboardEvent("keyup", { key: dispatcherCount + "" }));
+                break;
+            case "]":
+                if (dispatcherCount <= 9) dispatcherCount++;
+                window.dispatchEvent(new KeyboardEvent("keyup", { key: dispatcherCount + "" }));
                 break;
         }
     };
@@ -55,6 +96,14 @@
         return perimeter(generation - 1) * 4;
     }
 
+    function area(generation) {
+        let res = 0;
+        for (let i = 0; i < generation; i++) {
+            res += Math.pow(4 / 9, i);
+        }
+        return res;
+    }
+
     // Recursion!
     function koch(start, end, iteration) {
         if (iteration == -1) {
@@ -111,7 +160,7 @@
 /***********
  * DREIECK *
  ***********/
-{
+function triangle_slide() {
     const HEIGHT = window.innerHeight / 3;
 
     const backgroundColor = "#191919";
@@ -175,6 +224,11 @@ Reveal.addEventListener("fragmentshown", (event) => {
     }
 });
 
+Reveal.addEventListener("slidechanged", (event) => {
+    if ((event.indexh = 3 && event.indexv == 2)) koch_slide();
+    else if ((event.indexh = 1 && event.indexv == 0)) triangle_slide();
+});
+
 Reveal.initialize({
     controls: false,
     hash: true,
diff --git a/notes.md b/notes.md
index 60f21ca..6e2d773 100644
--- a/notes.md
+++ b/notes.md
@@ -73,7 +73,16 @@ Zur Verständlichkeit ein Bild.
 
 # Fläche der Koch-Kurve
 
--
+Monocle/Split-screen mit Simulation
+
+-   Wie viele Dreiecke ("#1") passen in das große Dreieck ("#0")? => 9 ("#2")
+-   Bei der zweiten Generation kommen an den 4 Linien Dreiecke mit 1/9 Flächeninhalt hinzu
+
+Generalisierung (klick)
+
+-   Bei vorheriger Gleichung für Anzahl der Linien: $4^n$
+-   => Die Anzahl der Linien der vorherigen Generation mit der Fläche der Dreiecke multiplizieren
+-   In jeder Generation kommt $4^{n-1} \cdot (1/9)^{n - 1}$ Fläche dazu
 
 # Koch Schneeflocke