diff --git a/src/index.html b/src/index.html index 0d50e63..bcbf230 100644 --- a/src/index.html +++ b/src/index.html @@ -11,6 +11,7 @@ @@ -82,8 +118,9 @@ Backface Culling: - -
+
+
+
$$ \color{red} @@ -93,24 +130,43 @@ 0 & 0 & -1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix} + $$ +
+
+ $$ + \color{red} \begin{pmatrix} \frac{2}{r-l} & 0 & 0 & 0 \\ 0 & \frac{2}{t-b} & 0 & 0 \\ 0 & 0 & \frac{2}{f-n} & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix} + $$ +
+
+ $$ + \color{red} \begin{pmatrix} 1 & 0 & 0 & - \frac{r+l}{2} \\ 0 & 1 & 0 & - \frac{t+b}{2} \\ 0 & 0 & 1 & \frac{n+f}{2} \\ 0 & 0 & 0 & 1 \end{pmatrix} + $$ +
+
+ $$ + \color{red} \begin{pmatrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 + \frac{f}{n} & f \\ 0 & 0 & - \frac{1}{n} & 0 \end{pmatrix} + $$ +
+
+ $$ \color{green} \begin{pmatrix} u_x & u_y & u_z & 0 \\ @@ -118,6 +174,11 @@ n_x & n_y & n_z & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix} + $$ +
+
+ $$ + \color{green} \begin{pmatrix} 1 & 0 & 0 & -e_x \\ 0 & 1 & 0 & -e_y \\ @@ -125,19 +186,16 @@ 0 & 0 & 0 & 1 \end{pmatrix} $$ - - - - - - - - -
-
-
+ + + + + + + +
\ No newline at end of file diff --git a/src/script.js b/src/script.js index 8055b8d..25f3c53 100644 --- a/src/script.js +++ b/src/script.js @@ -76,15 +76,18 @@ async function init() { invertZAxis = true; } for (let i = 0; i < 6; ++i) { + let v; if (i > t) { - interpolate[i] = 0.0; + v = 0.0; } else if (i+1 > t) { - interpolate[i] = t - Math.floor(t); + v = t - Math.floor(t); } else { - interpolate[i] = 1.0; + v = 1.0; } + interpolate[i] = v; + document.getElementById("matrices").children[5-i].style.setProperty("--fill-percentage", (v * 100) + "%"); } }); document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => {