Koch Fraktal
- -
-
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
diff --git a/js/main.js b/js/main.js
index 3fa2566..0539d9f 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,23 +1,24 @@
Reveal.initialize({
- controls: false,
- math: {
- mathjax: 'node_modules/mathjax/MathJax.js',
- config: 'TeX-AMS_HTML-full',
- // pass other options into `MathJax.Hub.Config()`
- TeX: {Macros: {RR: "{\\bf R}"}}
- },
+ controls: false,
+ math: {
+ //mathjax: "node_modules/mathjax/MathJax.js", // local, but crashes sometimes
+ mathjax: "https://cdn.jsdelivr.net/gh/mathjax/mathjax@2.7.8/MathJax.js",
+ config: "TeX-AMS_HTML-full",
+ // pass other options into `MathJax.Hub.Config()`
+ TeX: { Macros: { RR: "{\\bf R}" } },
+ },
- hash: true,
- dependencies: [
- {src: 'plugin/markdown/marked.js'},
- {src: 'plugin/markdown/markdown.js'},
- {src: 'plugin/highlight/highlight.js'},
- {src: 'plugin/math/math.js', async: true},
- {src: 'plugin/notes/notes.js', async: true}
- ]
+ hash: true,
+ dependencies: [
+ { src: "plugin/markdown/marked.js" },
+ { src: "plugin/markdown/markdown.js" },
+ { src: "plugin/highlight/highlight.js" },
+ { src: "plugin/math/math.js", async: true },
+ { src: "plugin/notes/notes.js", async: true },
+ { src: "plugin/mouse-pointer/mouse-pointer.js", async: true },
+ ],
});
-
/******************
* KOCH ANIMATION *
******************/
@@ -25,67 +26,101 @@ 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 = "#191919";
-ctx.lineWidth = 4;
-ctx.fillRect(-cx, -cy, 2 * cx, 2 * cy);
-ctx.strokeStyle = "white";
-koch([-cx, 100], [cx, 100], 0);
-window.onkeyup = event => {
- switch (event.key) {
- case "1":
- case "2":
- case "3":
- case "4":
- case "5":
- case "6":
- case "7":
- ctr.innerText = event.key;
- ctx.fillRect(-cx, -cy, 2 * cx, 2 * cy);
- koch([-cx, 100], [cx, 100], Number(event.key) - 1);
- }
+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;
+}
+
// Recursion!
function koch(start, end, iteration) {
- 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;
+ 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;
- ctx.beginPath();
+ ctx.beginPath();
- ctx.moveTo(start[0], start[1]);
- ctx.lineTo(x1, y1);
- ctx.moveTo(x2, y2);
- ctx.lineTo(end[0], end[1]);
+ 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();
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x3, y3);
+ ctx.moveTo(x2, y2);
+ ctx.lineTo(x3, y3);
+ ctx.closePath();
+ ctx.stroke();
- ctx.strokeStyle = "#191919";
- ctx.beginPath();
- ctx.moveTo(x1, y1);
- ctx.lineTo(x2, y2);
- ctx.closePath();
- ctx.stroke();
- ctx.strokeStyle = "white";
+ // 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);
- }
+ 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);
+ }
}
diff --git a/plugin/math/math.js b/plugin/math/math.js
index d76c9dd..32bc432 100755
--- a/plugin/math/math.js
+++ b/plugin/math/math.js
@@ -4,89 +4,82 @@
*
* @author Hakim El Hattab
*/
-var RevealMath = window.RevealMath || (function(){
-
- var options = Reveal.getConfig().math || {};
- var mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
- var config = options.config || 'TeX-AMS_HTML-full';
- var url = mathjax + '?config=' + config;
-
- var defaultOptions = {
- messageStyle: 'none',
- tex2jax: {
- inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
- skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
- },
- skipStartupTypeset: true
- };
-
- function defaults( options, defaultOptions ) {
-
- for ( var i in defaultOptions ) {
- if ( !options.hasOwnProperty( i ) ) {
- options[i] = defaultOptions[i];
- }
- }
-
- }
-
- function loadScript( url, callback ) {
-
- var head = document.querySelector( 'head' );
- var script = document.createElement( 'script' );
- script.type = 'text/javascript';
- script.src = url;
-
- // Wrapper for callback to make sure it only fires once
- var finish = function() {
- if( typeof callback === 'function' ) {
- callback.call();
- callback = null;
- }
- }
-
- script.onload = finish;
-
- // IE
- script.onreadystatechange = function() {
- if ( this.readyState === 'loaded' ) {
- finish();
- }
- }
-
- // Normal browsers
- head.appendChild( script );
-
- }
-
- return {
- init: function() {
-
- defaults( options, defaultOptions );
- defaults( options.tex2jax, defaultOptions.tex2jax );
- options.mathjax = options.config = null;
-
- loadScript( url, function() {
-
- MathJax.Hub.Config( options );
-
- // Typeset followed by an immediate reveal.js layout since
- // the typesetting process could affect slide height
- MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] );
- MathJax.Hub.Queue( Reveal.layout );
-
- // Reprocess equations in slides when they turn visible
- Reveal.addEventListener( 'slidechanged', function( event ) {
-
- MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] );
-
- } );
-
- } );
-
- }
- }
-
-})();
-
-Reveal.registerPlugin( 'math', RevealMath );
+var RevealMath =
+ window.RevealMath ||
+ (function () {
+ var options = Reveal.getConfig().math || {};
+ var mathjax = options.mathjax || "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js";
+ var config = options.config || "TeX-AMS_HTML-full";
+ var url = mathjax + "?config=" + config;
+
+ var defaultOptions = {
+ messageStyle: "none",
+ tex2jax: {
+ inlineMath: [
+ ["$", "$"],
+ ["\\(", "\\)"],
+ ],
+ skipTags: ["script", "noscript", "style", "textarea", "pre"],
+ },
+ skipStartupTypeset: true,
+ };
+
+ function defaults(options, defaultOptions) {
+ for (var i in defaultOptions) {
+ if (!options.hasOwnProperty(i)) {
+ options[i] = defaultOptions[i];
+ }
+ }
+ }
+
+ function loadScript(url, callback) {
+ var head = document.querySelector("head");
+ var script = document.createElement("script");
+ script.type = "text/javascript";
+ script.src = url;
+
+ // Wrapper for callback to make sure it only fires once
+ var finish = function () {
+ if (typeof callback === "function") {
+ callback.call();
+ callback = null;
+ }
+ };
+
+ script.onload = finish;
+
+ // IE
+ script.onreadystatechange = function () {
+ if (this.readyState === "loaded") {
+ finish();
+ }
+ };
+
+ // Normal browsers
+ head.appendChild(script);
+ }
+
+ return {
+ init: function () {
+ defaults(options, defaultOptions);
+ defaults(options.tex2jax, defaultOptions.tex2jax);
+ options.mathjax = options.config = null;
+
+ loadScript(url, function () {
+ MathJax.Hub.Config(options);
+
+ // Typeset followed by an immediate reveal.js layout since
+ // the typesetting process could affect slide height
+ MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
+ MathJax.Hub.Queue(Reveal.layout);
+
+ // Reprocess equations in slides when they turn visible
+ Reveal.addEventListener("slidechanged", function (event) {
+ MathJax.Hub.Queue(["Typeset", MathJax.Hub, event.currentSlide]);
+ });
+ });
+ },
+ };
+ })();
+
+Reveal.registerPlugin("math", RevealMath);
diff --git a/plugin/mouse-pointer/mouse-pointer.js b/plugin/mouse-pointer/mouse-pointer.js
new file mode 100644
index 0000000..7c6d42d
--- /dev/null
+++ b/plugin/mouse-pointer/mouse-pointer.js
@@ -0,0 +1,62 @@
+(function (doc, win) {
+ "use strict";
+
+ const initial_css = {
+ position: "absolute",
+ float: "left",
+ borderRadius: "50%",
+ width: "50px",
+ height: "50px",
+ backgroundColor: "rgba(255, 0, 0, 0.8)",
+ zIndex: 20,
+ display: "none",
+ };
+ let toggleBind = false;
+ const body = doc.getElementsByTagName("body")[0];
+ let tail = doc.createElement("div");
+
+ function initModule() {
+ Object.assign(tail.style, initial_css);
+ body.appendChild(tail);
+ setKeyboards();
+ if (window.Reveal.registerKeyboardShortcut) {
+ Reveal.registerKeyboardShortcut("CAPSLOCK", "Toggle Mouse Pointer");
+ }
+ }
+
+ function mouse_pointing(e) {
+ tail.style.display = "block";
+ tail.style.left = e.pageX - 15 + "px";
+ tail.style.top = e.pageY - 15 + "px";
+ }
+
+ function toogleMousePointer() {
+ if (!toggleBind) {
+ document.removeEventListener("mousemove", mouse_pointing);
+ tail.style.display = "none";
+ body.style.cursor = "auto";
+ } else {
+ tail.style.display = "block";
+ tail.style.width = "50px";
+ tail.style.height = "50px";
+ body.style.cursor = "none";
+ document.addEventListener("mousemove", mouse_pointing);
+ }
+ }
+
+ function setKeyboards(params) {
+ document.addEventListener(
+ "keydown",
+ function (event) {
+ if (event.keyCode === 20) {
+ event.preventDefault();
+ toggleBind = !toggleBind;
+ toogleMousePointer();
+ }
+ },
+ false
+ );
+ }
+
+ initModule();
+})(document, window);
--
cgit v1.2.3
Regeln
+-
+
- Mit einer geraden Linie starten +
- Linie in drei Teile aufteilen +
- Den mittleren Teil der Linie "radieren" +
- Den mittleren Teil zu einem gleichseitigen Dreieck verbinden +
+
+
+ Umfang des Koch Fraktals
+
+
+ Anzahl der Linien:
+\[ N_n = N_{n-1} \cdot 4 = 4^n \]
+
+
+ Länge der Linien:
+\[ S_n = \frac{S_{n-1}}{3} = \frac{s}{3^n} \]
+
+
+ Umfang:
+\[ P_n = N_n\cdot S_n = s\cdot\left(\frac{4}{3}\right)^n \]
+
+
Limes:
+\[ \lim_{n\to\infty}P_n = \infty \]
Varianten des Koch Fraktals
+
+ Summenzeichen
\[ \sum_{n=-\infty}^{+\infty} f(x) \]
@@ -63,6 +105,18 @@Fläche des Koch Fraktals
Quellen
+Bilder
+ + https://en.wikipedia.org/wiki/Koch_snowflake#/media/File:KochFlake.svg + +Wissen
+ + https://en.wikipedia.org/wiki/Koch_snowflake + +