From 3494298330506c2f03ceb07fd3cb288ccc42e847 Mon Sep 17 00:00:00 2001 From: rattatwinko Date: Fri, 10 Oct 2025 17:25:31 +0200 Subject: [PATCH] fixed stuff and improved the rendering engine by making inline math available using $$ and for ml $$\ncontent\n$$ --- hashes/util/LaTeXRenderer.py | 39 ++++-- html/base/index.html | 1 - html/base/template.html | 14 +- js/shared/theme.js | 13 +- markdown/Rotation.md | 255 ++++++++++++++++++++++------------- 5 files changed, 205 insertions(+), 117 deletions(-) diff --git a/hashes/util/LaTeXRenderer.py b/hashes/util/LaTeXRenderer.py index 0285441..25e76ce 100644 --- a/hashes/util/LaTeXRenderer.py +++ b/hashes/util/LaTeXRenderer.py @@ -1,29 +1,41 @@ -# latex_extension.py import marko import marko.block import marko.inline -from marko.md_renderer import MarkdownRenderer import re from log.Logger import Logger + logger = Logger() class BlockFormula(marko.block.BlockElement): - pattern = re.compile(r"\$\$ *\n([\s\S]+?)^\$\$ *$", re.MULTILINE) + pattern = re.compile(r"^\$\$\s*\n?([\s\S]+?)\n?\$\$\s*$", re.MULTILINE) + def __init__(self, match): - logger.log_debug("Did shit at __init__ for blockformula") - self.children = [marko.inline.RawText(match.group(1))] + self.children = [marko.inline.RawText(match.group(1).strip())] + @classmethod def match(cls, source): return source.expect_re(cls.pattern) + @classmethod def parse(cls, source): - logger.log_debug("Did some shit with Latex") match = source.match source.consume() return match +class InlineFormula(marko.inline.InlineElement): + pattern = re.compile(r"\$(?!\$)([^\$]+?)\$") + parse_children = False # Math content is raw text + + def __init__(self, match): + self.children = [marko.inline.RawText(match.group(1).strip())] + + @classmethod + def match(cls, source): + return source.expect_re(cls.pattern) + class Paragraph(marko.block.Paragraph): override = True + @classmethod def break_paragraph(cls, source, lazy=False): if BlockFormula.match(source): @@ -32,11 +44,16 @@ class Paragraph(marko.block.Paragraph): class Renderer: def render_block_formula(self, element): - # Render as HTML with MathJax-compatible format - return '\n
$$\n' + self.render_children(element) + '$$
\n' + # MathJax compatible block math + logger.log_debug(f"render_block_formula@LaTeXRenderer.py returned => {element}") + return f'\n
$$\n{self.render_children(element)}\n$$
\n' + + def render_inline_formula(self, element): + # MathJax compatible inline math + logger.log_debug(f"render_inline_formula@LaTeXRenderer.py returned => {element}") + return f'\\({self.render_children(element)}\\)' class LaTeXExtension: - logger.log_debug("Did shit at __init__ for latexextension") - elements = [BlockFormula, Paragraph] + elements = [BlockFormula, InlineFormula, Paragraph] parser_mixins = [] - renderer_mixins = [Renderer] \ No newline at end of file + renderer_mixins = [Renderer] diff --git a/html/base/index.html b/html/base/index.html index d990984..104379b 100644 --- a/html/base/index.html +++ b/html/base/index.html @@ -10,7 +10,6 @@ diff --git a/html/base/template.html b/html/base/template.html index d77baa3..ed2743b 100644 --- a/html/base/template.html +++ b/html/base/template.html @@ -9,18 +9,16 @@ - + - - - + + + - - - - + + diff --git a/js/shared/theme.js b/js/shared/theme.js index 4d08760..43f9031 100644 --- a/js/shared/theme.js +++ b/js/shared/theme.js @@ -1,11 +1,18 @@ +/* + * We autoset the CSS to darkmode if no choice is in localstorage + * Else we allow White styles cause it doesnt look too bad + */ function toggleDarkMode() { document.body.classList.toggle("dark-mode"); localStorage.setItem("dark-mode", document.body.classList.contains("dark-mode")); } -// Apply stored preference when the page loads document.addEventListener("DOMContentLoaded", () => { - if (localStorage.getItem("dark-mode") === "true") { + const stored = localStorage.getItem("dark-mode"); + + if (stored === null || stored === "true") { document.body.classList.add("dark-mode"); + } else { + document.body.classList.remove("dark-mode"); } -}); +}); \ No newline at end of file diff --git a/markdown/Rotation.md b/markdown/Rotation.md index 023283a..99e4eb1 100644 --- a/markdown/Rotation.md +++ b/markdown/Rotation.md @@ -2,127 +2,194 @@ summary: "Würfelrotation mit Matrizen die Multipliziert werden erkläret" --- -# Rotation eines Würfels um die x-Achse +# Rotation eines Würfels mit Matrizen -Wir wollen verstehen, wie man einen Würfel im Raum um die x-Achse dreht. +## 1. Der Würfel im Raum -## 1. Punkte eines Würfels - -Ein Würfel hat 8 Eckpunkte. Wenn wir den Würfel in der Mitte des Koordinatensystems platzieren, können wir die Punkte als Vektoren schreiben: +Ein Würfel im Ursprung des Koordinatensystems (Mittelpunkt bei ( (0,0,0) )) und der Kantenlänge 2 besitzt die Eckpunkte: $$ -\mathbf{A} = (1, 1, 1), \quad -\mathbf{B} = (1, 1, -1), \quad -\mathbf{C} = (1, -1, 1), \quad -\mathbf{D} = (1, -1, -1) +\begin{aligned} +A &= (1, 1, 1), & B &= (1, 1, -1), & C &= (1, -1, 1), \\ +D &= (1, -1, -1), & E &= (-1, 1, 1), & F &= (-1, 1, -1), \\ +G &= (-1, -1, 1), & H &= (-1, -1, -1) +\end{aligned} $$ +Jeder Punkt kann als Spaltenvektor dargestellt werden: $$ -\mathbf{E} = (-1, 1, 1), \quad -\mathbf{F} = (-1, 1, -1), \quad -\mathbf{G} = (-1, -1, 1), \quad -\mathbf{H} = (-1, -1, -1) -$$ - -Jeder Punkt hat drei Koordinaten -$$ -(x', y', z') -$$ - -## 2. Rotationsmatrix um die x-Achse - -Wenn wir einen Punkt - -$$ -\mathbf{v} = \begin{pmatrix} x \\ y \\ z \end{pmatrix} -$$ - -um die x-Achse um einen Winkel $\theta$ drehen wollen, benutzen wir die Rotationsmatrix: - -$$ -R_x(\theta) = +\mathbf{v} = \begin{pmatrix} -1 & 0 & 0 \\ -0 & \cos\theta & -\sin\theta \\ -0 & \sin\theta & \cos\theta -\end{pmatrix} -$$ - -**Hinweis:** -- Die x-Koordinate bleibt gleich, weil wir um die x-Achse drehen. -- y und z verändern sich je nach Winkel $\theta$. - -## 3. Berechnung des neuen Punktes - -Der neue Punkt $\mathbf{v}'$ nach der Drehung ist: +x \\ +y \\ +z +\end{pmatrix}. $$ -\mathbf{v}' = R_x(\theta) \mathbf{v} = -\begin{pmatrix} -1 & 0 & 0 \\ -0 & \cos\theta & -\sin\theta \\ -0 & \sin\theta & \cos\theta -\end{pmatrix} -\begin{pmatrix} x \\ y \\ z \end{pmatrix} = + +Eine Drehung des Würfels im Raum kann mathematisch durch **Multiplikation mit einer Rotationsmatrix** beschrieben werden. + +--- + +## 2. Rotationsmatrizen im 3D-Raum + +Eine Rotationsmatrix beschreibt eine Drehung um eine bestimmte Achse. Dabei bleibt die Länge der Vektoren unverändert, ebenso die Winkel zwischen ihnen. +Es gibt drei elementare Rotationen: um die **x-Achse**, die **y-Achse** und die **z-Achse**. + +--- + +### a) Rotation um die x-Achse + +$$ +\mathbf{v}' = R_x(\theta)\mathbf{v} = \begin{pmatrix} x \\ y \cos\theta - z \sin\theta \\ y \sin\theta + z \cos\theta \end{pmatrix} -$$ - -## 4. Beispiel - -Drehen wir den Punkt -$$ -\mathbf{A} = (1,1,1) $$ -um - +Die x-Koordinate bleibt bei dieser Drehung unverändert. Der Punkt $$ -\theta = 90^\circ = \frac{\pi}{2} -$$ - -Dann gilt: - -$$ -\cos \theta = 0, \quad \sin \theta = 1 -$$ - -$$ -\mathbf{A}' = +\mathbf{v}' = R_x(\theta)\mathbf{v} = \begin{pmatrix} -1 \\ -1 \cdot 0 - 1 \cdot 1 \\ -1 \cdot 1 + 1 \cdot 0 -\end{pmatrix} = +x \\ +y \cos\theta - z \sin\theta \\ +y \sin\theta + z \cos\theta +\end{pmatrix} + +$$ + +--- + +### b) Rotation um die y-Achse + +$$ +R_y(\theta) = \begin{pmatrix} -1 \\ -1 \\ 1 +\cos\theta & 0 & \sin\theta \\ +0 & 1 & 0 \\ +-\sin\theta & 0 & \cos\theta \end{pmatrix} $$ -## 5. Tabelle aller Punkte nach Rotation +Dabei bleibt die y-Koordinate gleich, x und z verändern sich. $$ -\begin{array}{c|c} -\text{Originalpunkt} & \text{Punkt nach Rotation} \\ -\hline -A (1,1,1) & (1,-1,1) \\ -B (1,1,-1) & (1,-1,-1) \\ -C (1,-1,1) & (1,-1,-1) \\ -D (1,-1,-1) & (1,1,-1) \\ -E (-1,1,1) & (-1,-1,1) \\ -F (-1,1,-1) & (-1,-1,-1) \\ -G (-1,-1,1) & (-1,1,1) \\ -H (-1,-1,-1) & (-1,1,-1) \\ -\end{array} +\mathbf{v}' = R_y(\theta)\mathbf{v} = +\begin{pmatrix} +x \cos\theta + z \sin\theta \\ +y \\ +- x \sin\theta + z \cos\theta +\end{pmatrix} $$ -## Fazit +--- -- x bleibt unverändert -- y und z ändern sich je nach Winkel -- Rotationsmatrizen sind ein mächtiges Werkzeug, um Objekte im 3D-Raum zu bewegen +### c) Rotation um die z-Achse +$$ +R_z(\theta) = +\begin{pmatrix} +\cos\theta & -\sin\theta & 0 \\ +\sin\theta & \cos\theta & 0 \\ +0 & 0 & 1 +\end{pmatrix} +$$ + +Hier bleibt z unverändert, während x und y rotieren. + +$$ +\mathbf{v}' = R_z(\theta)\mathbf{v} = +\begin{pmatrix} +x \cos\theta - y \sin\theta \\ +x \sin\theta + y \cos\theta \\ +z +\end{pmatrix} +$$ + +--- + +## 3. Kombination mehrerer Rotationen + +Oft wird ein Objekt nacheinander um mehrere Achsen gedreht. +Die Gesamtrotation ergibt sich durch **Multiplikation der einzelnen Rotationsmatrizen**. + +Beispiel: +$$ +R_{\text{gesamt}} = R_x(\alpha) \cdot R_y(\beta) \cdot R_z(\gamma). +$$ +Ein Punkt $v$ wird dann abgebildet auf: +$$ +\mathbf{v}' = R_{\text{gesamt}}\mathbf{v}. +$$ + +Die Reihenfolge ist dabei wesentlich, da die Matrixmultiplikation **nicht kommutativ** ist: +$$ +R_x R_y \neq R_y R_x. +$$ + +Das bedeutet: Zuerst um die x-Achse und danach um die y-Achse zu drehen führt zu einem anderen Ergebnis, als die Reihenfolge umzukehren. + +--- + +## 4. Matrixmultiplikation + +Die Multiplikation zweier Matrizen (A) und (B) (jeweils 3×3) ergibt eine neue Matrix (C = A \cdot B) mit den Einträgen: +$$ +c_{ij} = a_{i1}b_{1j} + a_{i2}b_{2j} + a_{i3}b_{3j}. +$$ + +Allgemein gilt: + +* Jede Zeile von (A) wird mit jeder Spalte von (B) multipliziert. +* Die Summe dieser Produkte ergibt das jeweilige Element von (C). + +So kann man Schritt für Schritt die Gesamtrotationsmatrix berechnen. + +--- + +## 5. Beispiel für ($\theta = 45^\circ$) + +Für den Winkel $\theta = 45^\circ = \frac{\pi}{4}$ gilt: +$$ +\cos\theta = \sin\theta = \frac{\sqrt{2}}{2}. +$$ + +Damit lautet die Rotationsmatrix um die x-Achse: +$$ +R_x(45^\circ) = +\begin{pmatrix} +1 & 0 & 0 \\ +0 & \tfrac{\sqrt{2}}{2} & -\tfrac{\sqrt{2}}{2} \\ +0 & \tfrac{\sqrt{2}}{2} & \tfrac{\sqrt{2}}{2} +\end{pmatrix} +$$ + +Wendet man diese Matrix auf den Punkt $\mathbf{A} = (1, 1, 1)$ an, ergibt sich: +$$ +\begin{aligned} +x' &= 1, \\ +y' &= 1 \cdot \tfrac{\sqrt{2}}{2} - 1 \cdot \tfrac{\sqrt{2}}{2} = 0, \\ +z' &= 1 \cdot \tfrac{\sqrt{2}}{2} + 1 \cdot \tfrac{\sqrt{2}}{2} = \sqrt{2}. +\end{aligned} + +$$ + +Der neue Punkt ist also: +$$ +\mathbf{A}' = (1, 0, \sqrt{2}). +$$ +Der Punkt wurde damit um die x-Achse um 45° gedreht. + +--- + +## 6. Zusammenfassung + +* Eine **Rotationsmatrix** beschreibt eine Drehung im Raum. +* Die Länge eines Vektors bleibt bei der Rotation unverändert. +* Es gibt drei Grundmatrizen: $R_x(\theta)$, $R_y(\theta)$ und $R_z(\theta)$. +* Durch **Multiplikation** kann man mehrere Drehungen kombinieren. +* Die Reihenfolge der Rotationen ist **nicht vertauschbar**. +* Bei $45^\circ$ erscheinen häufig die Werte $\frac{\sqrt{2}}{2}$ und $\frac{1}{2}$. \ No newline at end of file