Flääääääche

3 files changed, 158 insertions, 91 deletions

diff --git a/index.html b/index.html
index 906f2ae..ca84f5b 100644
--- a/index.html
+++ b/index.html
@@ -152,6 +152,11 @@
                 <section>
                     <h3>Fläche der Koch Kurve</h3>
                     <section>
+                        <div class="flexContainer">
+                            <canvas id="dreieck"></canvas>
+                        </div>
+                    </section>
+                    <section>
                         <p>\[ \frac{2s^2\sqrt{3}}{5} \]</p>
                     </section>
                 </section>
@@ -175,6 +180,9 @@
                     <p>https://en.wikipedia.org/wiki/Koch_snowflake</p>
                     <p>https://de.wikipedia.org/wiki/Selbst%C3%A4hnlichkeit</p>
                     <p>http://www.mathematik.uni-ulm.de/stochastik/lehre/ws06_07/seminar_fraktale/daikeler.pdf</p>
+                    <p>
+                        https://www.uni-ulm.de/fileadmin/website_uni_ulm/mawi.inst.110/mitarbeiter/spodarev/publications/fraktale.pdf
+                    </p>
                 </section>
             </div>
         </div>
diff --git a/js/main.js b/js/main.js
index f291779..7aff7da 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,107 +1,161 @@
+// Disclaimer: This code is ugly and was just written so it works :)
+
 /******************
  * KOCH ANIMATION *
  ******************/
-const canvas = document.getElementById("koch");
-const ctr = document.getElementById("iterationCtr");
-const ctx = canvas.getContext("2d");
-
-// Constants...
-const backgroundColor = "#191919";
-const previousLineColor = backgroundColor;
-// const previousLineColor = "white"; // Also looks okay
-const previousLineWidth = 3;
-const lineColor = "white";
-const lineWidth = 2;
-
-let triangleCount;
-
-canvas.width = window.innerWidth * 0.9;
-canvas.height = window.innerHeight * 0.9;
-const cx = canvas.width / 2;
-const cy = canvas.height / 2;
-ctx.translate(cx, cy);
-
-ctx.fillStyle = backgroundColor;
-ctx.lineWidth = lineWidth;
-ctx.strokeStyle = lineColor;
-koch([-cx, 100], [cx, 100], -1);
-
-window.onkeyup = (event) => {
-    switch (event.key) {
-        case "0":
-        case "1":
-        case "2":
-        case "3":
-        case "4":
-        case "5":
-        case "6":
-        case "7":
-        case "8":
-        case "9":
-            triangleCount = 0;
-            ctx.fillRect(-cx, -cy, 2 * cx, 2 * cy);
-            koch([-cx, 100], [cx, 100], Number(event.key) - 1);
-            ctr.innerText = "Generation: " + event.key + " - Dreiecke: " + triangleCount;
-            break;
+{
+    const canvas = document.getElementById("koch");
+    const ctr = document.getElementById("iterationCtr");
+    const ctx = canvas.getContext("2d");
+
+    // Constants...
+    const backgroundColor = "#191919";
+    const previousLineColor = backgroundColor;
+    // const previousLineColor = "white"; // Also looks okay
+    const previousLineWidth = 3;
+    const lineColor = "white";
+    const lineWidth = 2;
+
+    let triangleCount;
+
+    canvas.width = window.innerWidth * 0.9;
+    canvas.height = window.innerHeight * 0.9;
+    const cx = canvas.width / 2;
+    const cy = canvas.height / 2;
+    ctx.translate(cx, cy);
+
+    ctx.fillStyle = backgroundColor;
+    ctx.lineWidth = lineWidth;
+    ctx.strokeStyle = lineColor;
+    koch([-cx, 100], [cx, 100], -1);
+
+    window.onkeyup = (event) => {
+        switch (event.key) {
+            case "0":
+            case "1":
+            case "2":
+            case "3":
+            case "4":
+            case "5":
+            case "6":
+            case "7":
+            case "8":
+            case "9":
+                triangleCount = 0;
+                ctx.fillRect(-cx, -cy, 2 * cx, 2 * cy);
+                koch([-cx, 100], [cx, 100], Number(event.key) - 1);
+                ctr.innerText = "Generation: " + event.key + " - Dreiecke: " + triangleCount;
+                break;
+        }
+    };
+
+    function perimeter(generation) {
+        // Or just 4^n, but I like recursion :D
+        if (generation == 0) return 1;
+        return perimeter(generation - 1) * 4;
     }
-};
 
-function perimeter(generation) {
-    // Or just 4^n, but I like recursion :D
-    if (generation == 0) return 1;
-    return perimeter(generation - 1) * 4;
-}
+    // Recursion!
+    function koch(start, end, iteration) {
+        if (iteration == -1) {
+            ctx.beginPath();
+            ctx.moveTo(start[0], start[1]);
+            ctx.lineTo(end[0], end[1]);
+            ctx.closePath();
+            ctx.stroke();
+            return;
+        }
+        triangleCount++;
+
+        const x1 = (end[0] - start[0]) / 3 + start[0];
+        const y1 = (end[1] - start[1]) / 3 + start[1];
+        const x2 = ((end[0] - start[0]) * 2) / 3 + start[0];
+        const y2 = ((end[1] - start[1]) * 2) / 3 + start[1];
+        const x3 = (x1 + x2 + Math.sqrt(3) * (-y1 + y2)) / 2;
+        const y3 = (y1 + y2 + Math.sqrt(3) * (x1 - x2)) / 2;
 
-// Recursion!
-function koch(start, end, iteration) {
-    if (iteration == -1) {
         ctx.beginPath();
+
         ctx.moveTo(start[0], start[1]);
+        ctx.lineTo(x1, y1);
+        ctx.moveTo(x2, y2);
         ctx.lineTo(end[0], end[1]);
+
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x3, y3);
+        ctx.moveTo(x2, y2);
+        ctx.lineTo(x3, y3);
         ctx.closePath();
         ctx.stroke();
-        return;
+
+        // Clear previous lines
+        ctx.strokeStyle = previousLineColor;
+        ctx.lineWidth = previousLineWidth;
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.closePath();
+        ctx.stroke();
+        ctx.strokeStyle = lineColor;
+        ctx.lineWidth = lineWidth;
+
+        if (iteration > 0) {
+            koch([start[0], start[1]], [x1, y1], iteration - 1);
+            koch([x1, y1], [x3, y3], iteration - 1);
+            koch([x3, y3], [x2, y2], iteration - 1);
+            koch([x2, y2], [end[0], end[1]], iteration - 1);
+        }
     }
-    triangleCount++;
-
-    const x1 = (end[0] - start[0]) / 3 + start[0];
-    const y1 = (end[1] - start[1]) / 3 + start[1];
-    const x2 = ((end[0] - start[0]) * 2) / 3 + start[0];
-    const y2 = ((end[1] - start[1]) * 2) / 3 + start[1];
-    const x3 = (x1 + x2 + Math.sqrt(3) * (-y1 + y2)) / 2;
-    const y3 = (y1 + y2 + Math.sqrt(3) * (x1 - x2)) / 2;
-
-    ctx.beginPath();
-
-    ctx.moveTo(start[0], start[1]);
-    ctx.lineTo(x1, y1);
-    ctx.moveTo(x2, y2);
-    ctx.lineTo(end[0], end[1]);
-
-    ctx.moveTo(x1, y1);
-    ctx.lineTo(x3, y3);
-    ctx.moveTo(x2, y2);
-    ctx.lineTo(x3, y3);
-    ctx.closePath();
-    ctx.stroke();
-
-    // Clear previous lines
-    ctx.strokeStyle = previousLineColor;
-    ctx.lineWidth = previousLineWidth;
-    ctx.beginPath();
-    ctx.moveTo(x1, y1);
-    ctx.lineTo(x2, y2);
-    ctx.closePath();
-    ctx.stroke();
+}
+
+/***********
+ * DREIECK *
+ ***********/
+{
+    const HEIGHT = window.innerHeight / 3;
+
+    const backgroundColor = "#191919";
+    const lineColor = "white";
+    const canvas = document.getElementById("dreieck");
+    const ctx = canvas.getContext("2d");
+    const h = HEIGHT * (Math.sqrt(3) / 2);
+
+    canvas.width = window.innerWidth * 0.9;
+    canvas.height = window.innerHeight * 0.8;
+    const cx = canvas.width / 2;
+    const cy = canvas.height / 2 - HEIGHT;
+    //ctx.translate(cx, cy);
+    ctx.fillStyle = lineColor;
+    ctx.lineWidth = 5;
     ctx.strokeStyle = lineColor;
-    ctx.lineWidth = lineWidth;
 
-    if (iteration > 0) {
-        koch([start[0], start[1]], [x1, y1], iteration - 1);
-        koch([x1, y1], [x3, y3], iteration - 1);
-        koch([x3, y3], [x2, y2], iteration - 1);
-        koch([x2, y2], [end[0], end[1]], iteration - 1);
-    }
+    window.onkeyup = (event) => {
+        switch (event.key) {
+            case "0": {
+                const path = new Path2D();
+                path.moveTo(cx, cy);
+                path.lineTo(cx + HEIGHT / 2, cy + h);
+                path.lineTo(cx - HEIGHT / 2, cy + h);
+                path.lineTo(cx, cy);
+                ctx.stroke(path);
+
+                break;
+            }
+            case "1": {
+                const path = new Path2D();
+                path.lineTo(cx + HEIGHT / 6, cy + h / 3);
+                path.lineTo(cx - HEIGHT / 6, cy + h / 3);
+                path.lineTo(cx, cy);
+                ctx.stroke(path);
+
+                break;
+            }
+            case "2": {
+                ctx.font = "100px sans-serif";
+                ctx.fillText("9", cx - 25, cy + h / 2 + h / 4);
+            }
+        }
+    };
 }
 
 // Some revealjs thingies
diff --git a/notes.md b/notes.md
index bc5482d..60f21ca 100644
--- a/notes.md
+++ b/notes.md
@@ -55,7 +55,8 @@ Zur Verständlichkeit ein Bild.
 
 ### Umfang
 
--   Der Umfang ist somit das Berechnete
+-   Sprich: Die Kurvenlänge wird in jedem Iterationsschritt n um (4/3)^n größer
+-   Der Umfang bzw. Länge der Koch Kurve ist somit das Berechnete
 
 ### Grenzwert
 
@@ -70,6 +71,10 @@ Zur Verständlichkeit ein Bild.
 -   Unten wird x einem Startwert zugewiesen, oben Endwert
 -   $x^2$ wird mit jedem Wert ausgerechnet und addiert => 55
 
+# Fläche der Koch-Kurve
+
+-
+
 # Koch Schneeflocke
 
 -   Wenn man statt einer anfänglichen Gerade drei Geraden nimmt, kann man daraus ein Dreieck formen