From ecd7d1a48a0e72de0215ea0ed37208ddd2e2348c Mon Sep 17 00:00:00 2001
From: Marvin Borner
Date: Wed, 8 Jul 2020 22:28:11 +0200
Subject: ARG that's uglyyyyy :D
I needed some code and I don't have that much time => UGLY CODE
---
css/style.css | 8 ++++++++
index.html | 20 +++++++++++++++++++-
js/main.js | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
notes.md | 11 ++++++++++-
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 @@
- \[ \frac{2s^2\sqrt{3}}{5} \]
+
+ Jedes neue Dreieck hat \( \frac{1}{9} \) des vorherigen Flächeninhalts
+
+ \[ N_n = 4^n \]
+ \[ \triangle_n = \left(\frac{1}{9}\right)^n \]
+
+ \[ \Delta A_n = 4^{n-1} \cdot \left(\frac{1}{9}\right)^{n - 1} =
+ \left(\frac{4}{9}\right)^{n-1} \]
+
+
+
+ \[ A_n = \sum_{k=0}^{n} \left(\frac{4}{9}\right)^k \]
+
+
+ \[ A = \sum_{n=0}^{\infty} \left(\frac{4}{9}\right)^n \]
+
+ \[ = \frac{1}{1 - \frac{4}{9}} = \frac{9}{5} = \underline{\underline{1,8}} \]
+
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
--
cgit v1.2.3