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 \\