PROCRASTINATION ^ 10

The presentation is tomorrow lel

7 files changed, 171 insertions, 36 deletions

diff --git a/imgs/KochConstruction.svg b/imgs/KochConstruction.svg
new file mode 100644
index 0000000..9aab3da
--- /dev/null
+++ b/imgs/KochConstruction.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="iso-8859-1"?>

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg  version="1.1" id="&#x30EC;&#x30A4;&#x30E4;&#x30FC;_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="250">

+<g style="fill:#CD171C;stroke:#CD171C;">

+	<path d="M610.843,73.259c-0.561,1.857-1.077,3.064-1.676,4.554h5.666c-0.253-0.533-1.113-2.697-1.674-4.554,c-0.602-1.987-1.012-3.79-1.159-4.958C611.853,69.47,611.442,71.272,610.843,73.259z"/>

+	<path d="M173.909,33.804c-1.497,4.96-2.877,8.184-4.477,12.163h15.135c-0.677-1.424-2.977-7.203-4.474-12.163,c-1.605-5.309-2.701-10.122-3.094-13.244C176.607,23.682,175.512,28.496,173.909,33.804z"/>

+	<path d="M430.843,73.259c-0.561,1.857-1.077,3.064-1.676,4.554h5.666c-0.253-0.533-1.113-2.697-1.674-4.554,c-0.602-1.987-1.012-3.79-1.159-4.958C431.853,69.47,431.442,71.272,430.843,73.259z"/>

+	<path d="M567.85,47.101c-1.89,0.444-3.192,0.599-4.781,0.825l2.832,4.908c0.335-0.485,1.779-2.313,3.107-3.727,c1.42-1.515,2.775-2.771,3.714-3.483C571.636,46.081,569.871,46.625,567.85,47.101z"/>

+	<path d="M474.993,49.105c1.328,1.414,2.115,2.465,3.106,3.728l2.833-4.907c-0.589-0.047-2.893-0.384-4.781-0.828,c-2.022-0.473-3.788-1.019-4.874-1.475C472.216,46.336,473.571,47.592,474.993,49.105z"/>

+</g>

+<g style="stroke-width:2;stroke-linecap:round;stroke-linejoin:round;">

+	<g style="fill:#CD171C;stroke:#CD171C;">

+		<line x1="611.993" y1="90.89" x2="611.993" y2="75.913"/>

+		<line x1="176.982" y1="80.89" x2="176.982" y2="40.89"/>

+		<line x1="431.993" y1="90.89" x2="431.993" y2="75.913"/>

+		<line x1="553.155" y1="56.913" x2="566.127" y2="49.424"/>

+		<line x1="490.837" y1="56.924" x2="477.866" y2="49.436"/>

+	</g>

+	<g style="fill:none;stroke:#ffffff;">

+		<path d="M417,217.89h-10 M407,217.89l-5-8.66 M397,217.89h-10 M402,209.229l-5,8.66 M657,217.89h-10 M647,217.89l-5-8.66 M637,217.89h-10 M642,209.229l-5,8.66 M597,217.89h-10 M587,217.89l-5-8.66 M577,217.89h-10 M582,209.229l-5,8.66 M477,217.89h-10 M467,217.89l-5-8.66 M457,217.89h-10 M462,209.229l-5,8.66 M507,165.927h-10 M497,165.927l-5-8.66 M487,165.927h-10 M492,157.267l-5,8.66 M566.999,165.929h-10 M556.999,165.929l-5-8.66 M546.999,165.929h-10 M551.999,157.269l-5,8.66 M477,165.929l5,8.66 M482,174.589l-5,8.66 M487,183.249l4.999,8.658 M477,183.249h10 M537,165.929l-5-8.66 M532,157.269l5-8.66 M527,148.608l-5-8.66 M537,148.608h-10 M627,217.89l-5-8.66 M622,209.229l5-8.66 M617,200.569l-5-8.66 M627,200.569h-10 M551.999,191.909l5-8.66 M556.999,183.249l9.999-0.002 M561.999,174.589l5-8.66 M566.998,183.247l-4.999-8.658 M522,139.946l-5,8.66 M517,148.606h-10 M512,157.267l-5,8.66 M507,148.606l5,8.66 M612,191.909l-5,8.66 M607,200.569h-10 M602,209.229l-5,8.66 M597,200.569l5,8.66 M492,191.909l-5,8.66 M487,200.569h-10 M482,209.229l-5,8.66 M477,200.569l5,8.66 M567,217.89l-5-8.66 M562,209.229l5-8.66 M557,200.569l-5-8.66 M567,200.569h-10 M447,217.89l-5-8.66 M442,209.229l5-8.66 M437,200.569l-5-8.66 M447,200.569h-10 M432,191.909l-5,8.66 M427,200.569h-10 M422,209.229l-5,8.66 M417,200.569l5,8.66"/>

+		<path d="M87,191.909l15,25.98 M102,217.89h30 M72,217.89l15-25.98 M42,217.89h30 M267,191.909l15,25.98 M282,217.89h30 M252,217.89l15-25.98 M222,217.89h30 M222,165.929l-15,25.98 M207,191.909l15,25.98 M192,165.929h30 M177,139.948l15,25.98 M132,165.928h30 M162,165.928l15-25.98 M147,191.908l-15-25.98 M132,217.89l15-25.981"/>

+		<path d="M567,100.89h90 M387,100.89h90 M522,22.947l44.999,77.943 M477,100.89l45-77.942"/>

+		<line x1="42" y1="100.89" x2="312" y2="100.89"/>

+	</g>

+</g>

+</svg>

diff --git a/imgs/KochSim.gif b/imgs/KochSim.gif
new file mode 100644
index 0000000..400a846
--- /dev/null
+++ b/imgs/KochSim.gif
diff --git a/imgs/Romanesco.jpg b/imgs/Romanesco.jpg
new file mode 100644
index 0000000..5af579c
--- /dev/null
+++ b/imgs/Romanesco.jpg
diff --git a/imgs/Sierpinski.gif b/imgs/Sierpinski.gif
new file mode 100644
index 0000000..de0ba88
--- /dev/null
+++ b/imgs/Sierpinski.gif
diff --git a/index.html b/index.html
index ffae4bb..d7a3a5c 100644
--- a/index.html
+++ b/index.html
@@ -35,16 +35,38 @@
                     <h3>Gliederung</h3>
                     <ol>
                         <li>Fraktale</li>
-                        <li>Koch Fraktal</li>
-                        <li>Varianten des Koch Fraktals</li>
-                        <!-- engl. Wikipedia -->
-                        <li>Umfang des Koch Fraktals</li>
-                        <li>Fläche des Koch Fraktals</li>
+                        <li>Koch Kurve</li>
+                        <li>Umfang</li>
+                        <li>Fläche</li>
+                        <li>Koch Schneeflocke</li>
                     </ol>
                 </section>
 
                 <section>
                     <h3>Fraktale</h3>
+                    <section>
+                        <ul>
+                            <li class="fragment fade-in">Hohe Selbstähnlichkeit</li>
+                            <li class="fragment fade-in">Mandelbrot</li>
+                            <li class="fragment fade-in">Natur</li>
+                        </ul>
+                    </section>
+                    <section>
+                        <img
+                            class="plain"
+                            style="background: none; height: 500px;"
+                            src="imgs/Romanesco.jpg"
+                            alt="Hier könnte ihre Werbung stehen!"
+                        />
+                    </section>
+                    <section>
+                        <img
+                            class="plain"
+                            style="background: none; height: 500px;"
+                            src="imgs/Sierpinski.gif"
+                            alt="Hier könnte ihre Werbung stehen!"
+                        />
+                    </section>
                 </section>
 
                 <section>
@@ -52,13 +74,24 @@
                     <section>
                         <h3>Regeln</h3>
                         <ol>
-                            <li>Mit einer geraden Linie starten</li>
-                            <li>Linie in drei Teile aufteilen</li>
-                            <li>Den mittleren Teil der Linie "radieren"</li>
-                            <li>Den mittleren Teil zu einem gleichseitigen Dreieck verbinden</li>
+                            <li class="fragment fade-in">Mit einer geraden Linie starten</li>
+                            <li class="fragment fade-in">Linie in drei Teile aufteilen</li>
+                            <li class="fragment fade-in">Den mittleren Teil der Linie "radieren"</li>
+                            <li class="fragment fade-in">
+                                Den mittleren Teil zu einem gleichseitigen Dreieck verbinden
+                            </li>
+                            <li class="fragment fade-in">Mit allen neuen Linien wiederholen</li>
                         </ol>
                     </section>
                     <section>
+                        <img
+                            class="plain"
+                            style="background: none;"
+                            src="imgs/KochConstruction.svg"
+                            alt="Hier könnte ihre Werbung stehen!"
+                        />
+                    </section>
+                    <section>
                         <div id="iterationCtr"></div>
                         <div class="flexContainer">
                             <canvas id="koch"></canvas>
@@ -67,9 +100,19 @@
                 </section>
 
                 <section>
+                    <h3>Selbstähnlichkeit</h3>
+                    <img
+                        class="plain"
+                        style="background: none; height: 500px;"
+                        src="imgs/KochSim.gif"
+                        alt="Hier könnte ihre Werbung stehen!"
+                    />
+                </section>
+
+                <section>
                     <!-- Mit zwei browsern visualisieren (tiling!) -->
                     <section>
-                        <h3>Umfang des Koch Fraktals</h3>
+                        <h3>Umfang der Koch Kurve</h3>
                         <div class="fragment fade-right" style="float: left;">
                             <p>Anzahl der Linien:</p>
                             <p>\[ N_n = N_{n-1} \cdot 4 = 4^n \]</p>
@@ -101,45 +144,34 @@
                 </section>
 
                 <section>
-                    <h3>Summenzeichen</h3>
-                    <p>\[ \sum_{x=1}^{5} x^2 \]</p>
-                    <p class="fragment fade-up">\[ = 1^2 + 2^2 + 3^2 + 4^2 + 5^2 = 55 \]</p>
-                </section>
-
-                <section>
-                    <h3>Fläche des Koch Fraktals</h3>
+                    <h3>Fläche der Koch Kurve</h3>
                 </section>
 
                 <section>
-                    <h3>Varianten des Koch Fraktals</h3>
+                    <h3>Die Koch Schneeflocke</h3>
                     <img
                         class="plain"
                         style="background: none;"
                         src="imgs/KochFlake.svg"
                         alt="Hier könnte ihre Werbung stehen!"
                     />
+                    <span class="fragment" style="display: none !important;"></span>
+                    <p class="fragment fade-up">
+                        \[ P_n = \textcolor{red}{3} \cdot s \cdot \frac{4^n}{3^n} \]
+                    </p>
                 </section>
 
                 <section>
-                    <h3>Fläche des Koch Fraktals</h3>
+                    <h3>Summenzeichen</h3>
+                    <p>\[ \sum_{x=1}^{5} x^2 \]</p>
+                    <p class="fragment fade-up">\[ = 1^2 + 2^2 + 3^2 + 4^2 + 5^2 = 55 \]</p>
                 </section>
 
                 <section>
                     <h3>Quellen</h3>
-                    <p>Bilder</p>
-                    <a href="https://en.wikipedia.org/wiki/Koch_snowflake#/media/File:KochFlake.svg" target="_blank">
-                        https://en.wikipedia.org/wiki/Koch_snowflake#/media/File:KochFlake.svg
-                    </a>
-                    <p>Wissen</p>
-                    <a href="https://en.wikipedia.org/wiki/Koch_snowflake" target="_blank">
-                        https://en.wikipedia.org/wiki/Koch_snowflake
-                    </a>
-                    <a
-                        href="http://www.mathematik.uni-ulm.de/stochastik/lehre/ws06_07/seminar_fraktale/daikeler.pdf"
-                        target="_blank"
-                    >
-                        http://www.mathematik.uni-ulm.de/stochastik/lehre/ws06_07/seminar_fraktale/daikeler.pdf
-                    </a>
+                    <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>
                 </section>
             </div>
         </div>
diff --git a/js/main.js b/js/main.js
index b25410b..f291779 100644
--- a/js/main.js
+++ b/js/main.js
@@ -109,13 +109,13 @@ function koch(start, end, iteration) {
 Reveal.addEventListener("fragmentshown", (event) => {
     switch (event.fragment.getAttribute("data-action")) {
         case "nebenrechnung":
-            Reveal.slide(4, 1, 0);
+            Reveal.slide(5, 1, 0);
             break;
         case "umfang-back":
-            Reveal.slide(4, 0, 2);
+            Reveal.slide(5, 0, 2);
             break;
         case "gooo":
-            Reveal.slide(5, 0, 0);
+            Reveal.slide(6, 0, 0);
             break;
         default:
     }
diff --git a/notes.md b/notes.md
new file mode 100644
index 0000000..3c1cbee
--- /dev/null
+++ b/notes.md
@@ -0,0 +1,77 @@
+# Fraktale
+
+Stark vereinfacht!
+
+-   Selbstähnlichkeit
+    -   Bei unendlicher Vergrößerung des untersuchten Objekts wird immer wieder die ursprüngliche Struktur erhalten (Wiederholung)
+    -   Praktisch nur mathematisch möglich: Beispiel Mandelbrot
+    -   Annäherungen auch in der Natur: Beispiel bestimmte Blume, Gemüse
+-   Beispiel Romanesco Pflanze (Blumenkohl-Sorte)
+-   Beispiel Sierpinski Dreieck
+    -   Das Muster wiederholt sich bis ins Unendliche
+-   Das Koch Fraktal ist dem allen sehr ähnlich, wie wir bald feststellen werden
+
+# Regeln
+
+1. Mit einer geraden Linie starten
+2. Linie in drei Teile aufteilen
+3. Den mittleren Teil der Linie "radieren"
+4. Den mittleren Teil zu einem gleichseitigen Dreieck verbinden
+5. Mit allen neuen Linien wiederholen
+
+Zur Verständlichkeit ein Bild.
+
+# Simulation
+
+-   Ggf Splitscreen mit Regeln
+-   Generationen darstellen (0..9)
+
+# Selbstähnlichkeit
+
+-   Bei unendlicher Vergrößerung der Koch-Kurve wiederholt sich immer die selbe Struktur => selbstähnlich => Fraktal
+-   Spannend: Gute Darstellung von der Unendlichkeit
+-   Bisschen hypnotisieren(d)
+
+# Umfang des Koch Fraktals
+
+-   SPLIT-SCREEN!
+-   Umfang ist Anzahl der Linien \* Länge der Linien; weil alle Linien gleich lang sind (darstellen?)
+-   n ist die "Generation"
+
+### Anzahl der Linien
+
+-   Die Anzahl der Linien vervierfacht sich bei jeder Generation => folglich: $$4^n$$
+
+### Länge der Linien
+
+-   Die Länge der Linien wird bei jeder Generation /3 geteilt
+-   Bei Anfangslänge von s ergibt sich $$\frac{s}{3^n}$$
+-   Länge jeder Linien geht Richtung 0 bei n gegen unendlich
+
+### Nebenrechnung
+
+-   Wie gesagt, Umfang ist Anzahl \* Länge der Linien
+-   Mit beiden Variablen ergibt sich $$P_n = N_n\cdot S_n = s\cdot\left(\frac{4}{3}\right)^n$$
+
+### Umfang
+
+-   Der Umfang ist somit das Berechnete
+
+### Grenzwert
+
+-   Der Grenzwert des Umfangs ins Unendliche geht gegen unendlich, da $\frac{4}{3}$ größer als 1 ist
+-   Interessant: Während die gesamte Länge der Koch-Kurve ins Unendliche geht, geht die Länge der Linien zu 0
+
+.. Umfang ist in dieser Form etwas speziell, da es ja nicht geschlossen ist => Schneeflocke
+
+# Koch Schneeflocke
+
+-   Wenn man statt einer anfänglichen Gerade drei Geraden nimmt, kann man daraus ein Dreieck formen
+-   Dieses Dreieck hat für jede Seite die selben Regeln wie bei der Linie
+-   Der Umfang ist somit $$P_n = 3 \cdot s\cdot\left(\frac{4}{3}\right)^n$$
+
+# Summenzeichen
+
+-   Im Nachfolgenden wird das Summenzeichen gebraucht, deshalb kurze Einführung
+-   Unten wird x einem Startwert zugewiesen, oben Endwert
+-   $x^2$ wird mit jedem Wert ausgerechnet und addiert => 55