From 9658d8d9f0b970bd8581b4b6356bf734f92c7744 Mon Sep 17 00:00:00 2001 From: Luca Conte Date: Sat, 10 May 2025 01:50:33 +0200 Subject: [PATCH 1/2] add dots between matrices --- src/index.html | 26 +++++++++++++++++++------- src/script.js | 2 +- 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/index.html b/src/index.html index b6991b4..08e7f96 100644 --- a/src/index.html +++ b/src/index.html @@ -75,7 +75,7 @@ #matrices { display: grid; - grid-template-columns: repeat(6, 1fr); + grid-template-columns: 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px 1fr 0px; grid-gap: var(--padding); padding-left: var(--padding); padding-right: var(--padding); @@ -102,6 +102,11 @@ top: 0; background-color: rgba(255, 255, 255, 0.1); } + #matrices > span { + display: flex; + justify-content: center; + align-items: center; + } @@ -121,7 +126,8 @@
-
+ +
$$ \color{red} \begin{pmatrix} @@ -132,7 +138,8 @@ \end{pmatrix} $$
-
+ $$\dot{}$$ +
$$ \color{red} \begin{pmatrix} @@ -143,7 +150,8 @@ \end{pmatrix} $$
-
+ $$\dot{}$$ +
$$ \color{red} \begin{pmatrix} @@ -154,7 +162,8 @@ \end{pmatrix} $$
-
+ $$\dot{}$$ +
$$ \color{red} \begin{pmatrix} @@ -165,7 +174,8 @@ \end{pmatrix} $$
-
+ $$\dot{}$$ +
$$ \color{green} \begin{pmatrix} @@ -176,7 +186,8 @@ \end{pmatrix} $$
-
+ $$\dot{}$$ +
$$ \color{green} \begin{pmatrix} @@ -187,6 +198,7 @@ \end{pmatrix} $$
+
diff --git a/src/script.js b/src/script.js index 25f3c53..82850dd 100644 --- a/src/script.js +++ b/src/script.js @@ -87,7 +87,7 @@ async function init() { v = 1.0; } interpolate[i] = v; - document.getElementById("matrices").children[5-i].style.setProperty("--fill-percentage", (v * 100) + "%"); + document.getElementsByClassName("matrix")[5-i].style.setProperty("--fill-percentage", (v * 100) + "%"); } }); document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => { From ff971138c5b5747f05337237fe1e177293bf4de1 Mon Sep 17 00:00:00 2001 From: Luca Conte Date: Sat, 10 May 2025 11:47:13 +0200 Subject: [PATCH 2/2] update colours to match catppuccin colour palette https://catppuccin.com/palette/ --- src/index.html | 44 ++++++++++++++++++++++++++------------------ 1 file changed, 26 insertions(+), 18 deletions(-) diff --git a/src/index.html b/src/index.html index 08e7f96..389debf 100644 --- a/src/index.html +++ b/src/index.html @@ -55,18 +55,18 @@ padding: var(--padding); display: block; border: solid 2px #11111b; - background-color: #31324480; border-radius: 20px; } #stats { + background-color: #31324480; right: var(--padding); position: absolute; top: var(--padding); } #controls { - + background-color: #313244; } #interpolate { @@ -81,8 +81,8 @@ padding-right: var(--padding); } - #matrices > div { - background-color: rgba(255, 255, 255, 0.1); + .matrix { + background-color: #45475a; border-radius: 20px; display: flex; justify-content: center; @@ -92,7 +92,7 @@ overflow: hidden; } - #matrices > div::before { + .matrix::before { content: ''; position: absolute; border-radius: 20px; @@ -100,13 +100,27 @@ height: 100%; right: 0; top: 0; - background-color: rgba(255, 255, 255, 0.1); + background-color: #585b70; + transition: width linear 0.05s; } #matrices > span { display: flex; justify-content: center; align-items: center; } + + .matrix svg { + max-width: 100%; + height: auto; + } + + .projection { + color: #f38ba8; + } + + .lookAt { + color: #a6e3a1; + } @@ -127,9 +141,8 @@
-
+
$$ - \color{red} \begin{pmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ @@ -139,9 +152,8 @@ $$
$$\dot{}$$ -
+
$$ - \color{red} \begin{pmatrix} \frac{2}{r-l} & 0 & 0 & 0 \\ 0 & \frac{2}{t-b} & 0 & 0 \\ @@ -151,9 +163,8 @@ $$
$$\dot{}$$ -
+
$$ - \color{red} \begin{pmatrix} 1 & 0 & 0 & - \frac{r+l}{2} \\ 0 & 1 & 0 & - \frac{t+b}{2} \\ @@ -163,9 +174,8 @@ $$
$$\dot{}$$ -
+
$$ - \color{red} \begin{pmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ @@ -175,9 +185,8 @@ $$
$$\dot{}$$ -
+
$$ - \color{green} \begin{pmatrix} u_x & u_y & u_z & 0 \\ v_x & v_y & v_z & 0 \\ @@ -187,9 +196,8 @@ $$
$$\dot{}$$ -
+
$$ - \color{green} \begin{pmatrix} 1 & 0 & 0 & -e_x \\ 0 & 1 & 0 & -e_y \\