1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
Reveal.initialize({
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 },
{ src: "plugin/mouse-pointer/mouse-pointer.js", async: true },
],
});
/******************
* 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;
}
};
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;
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();
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);
}
}
|
