HSH
/
cg1-visualisations
mirror of https://gitlab.gwdg.de/lernanwendungen/cg1/cg1_tut_mdi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'style-updates' into 'main' 

move matrices below canvas & add "progress bar"

See merge request lernanwendungen/cg1/cg1_tut_mdi!1
This commit is contained in:
Dennis Allerkamp 2025-05-10 08:18:57 +00:00
parent 4752146630 db55fd528a
commit 31cc94280b
2 changed files with 84 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/index.html
View File

@ -11,6 +11,7 @@
<style> <style>
:root { :root {
font-size: 20px; font-size: 20px;
--padding: 10px;
} }
html, body { html, body {
@ -25,14 +26,19 @@
color: #cdd6f4; color: #cdd6f4;
font-family: monospace; font-family: monospace;
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--padding);
} }
#display { #display {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
border-radius: 20px; border-radius: 20px;
height: 100%;
width: 100%; flex-grow: 1;
border: solid 2px #11111b; border: solid 2px #11111b;
} }
@ -46,9 +52,7 @@
background-color: #181825; background-color: #181825;
} }
#stats, #controls { #stats, #controls {
position: absolute; padding: var(--padding);
top: 20px;
padding: 20px;
display: block; display: block;
border: solid 2px #11111b; border: solid 2px #11111b;
background-color: #31324480; background-color: #31324480;
@ -56,16 +60,48 @@
} }
#stats { #stats {
right: 20px; right: var(--padding);
position: absolute;
top: var(--padding);
} }
#controls { #controls {
left: 20px;
} }
#interpolate { #interpolate {
width: 100%; width: 100%;
} }
#matrices {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: var(--padding);
padding-left: var(--padding);
padding-right: var(--padding);
}
#matrices > div {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
--fill-percentage: 0%;
position: relative;
overflow: hidden;
}
#matrices > div::before {
content: '';
position: absolute;
border-radius: 20px;
width: var(--fill-percentage);
height: 100%;
right: 0;
top: 0;
background-color: rgba(255, 255, 255, 0.1);
}
</style> </style>
</head> </head>
<body> <body>
@ -82,8 +118,9 @@
Backface Culling: <input type="checkbox" id="backfaceCulling" autocomplete="off"> Backface Culling: <input type="checkbox" id="backfaceCulling" autocomplete="off">
</div> </div>
</div> </div>
</div>
<div id="controls"> <div id="controls">
<div id="matrices">
<div> <div>
$$ $$
\color{red} \color{red}
@ -93,24 +130,43 @@
0 & 0 & -1 & 0 \\ 0 & 0 & -1 & 0 \\
0 & 0 & 0 & 1 0 & 0 & 0 & 1
\end{pmatrix} \end{pmatrix}
$$
</div>
<div>
$$
\color{red}
\begin{pmatrix} \begin{pmatrix}
\frac{2}{r-l} & 0 & 0 & 0 \\ \frac{2}{r-l} & 0 & 0 & 0 \\
0 & \frac{2}{t-b} & 0 & 0 \\ 0 & \frac{2}{t-b} & 0 & 0 \\
0 & 0 & \frac{2}{f-n} & 0 \\ 0 & 0 & \frac{2}{f-n} & 0 \\
0 & 0 & 0 & 1 0 & 0 & 0 & 1
\end{pmatrix} \end{pmatrix}
$$
</div>
<div>
$$
\color{red}
\begin{pmatrix} \begin{pmatrix}
1 & 0 & 0 & - \frac{r+l}{2} \\ 1 & 0 & 0 & - \frac{r+l}{2} \\
0 & 1 & 0 & - \frac{t+b}{2} \\ 0 & 1 & 0 & - \frac{t+b}{2} \\
0 & 0 & 1 & \frac{n+f}{2} \\ 0 & 0 & 1 & \frac{n+f}{2} \\
0 & 0 & 0 & 1 0 & 0 & 0 & 1
\end{pmatrix} \end{pmatrix}
$$
</div>
<div>
$$
\color{red}
\begin{pmatrix} \begin{pmatrix}
1 & 0 & 0 & 0 \\ 1 & 0 & 0 & 0 \\
0 & 1 & 0 & 0 \\ 0 & 1 & 0 & 0 \\
0 & 0 & 1 + \frac{f}{n} & f \\ 0 & 0 & 1 + \frac{f}{n} & f \\
0 & 0 & - \frac{1}{n} & 0 0 & 0 & - \frac{1}{n} & 0
\end{pmatrix} \end{pmatrix}
$$
</div>
<div>
$$
\color{green} \color{green}
\begin{pmatrix} \begin{pmatrix}
u_x & u_y & u_z & 0 \\ u_x & u_y & u_z & 0 \\
@ -118,6 +174,11 @@
n_x & n_y & n_z & 0 \\ n_x & n_y & n_z & 0 \\
0 & 0 & 0 & 1 0 & 0 & 0 & 1
\end{pmatrix} \end{pmatrix}
$$
</div>
<div>
$$
\color{green}
\begin{pmatrix} \begin{pmatrix}
1 & 0 & 0 & -e_x \\ 1 & 0 & 0 & -e_x \\
0 & 1 & 0 & -e_y \\ 0 & 1 & 0 & -e_y \\
@ -125,19 +186,16 @@
0 & 0 & 0 & 1 0 & 0 & 0 & 1
\end{pmatrix} \end{pmatrix}
$$ $$
<input id="interpolate" type="range" min="0" max="6" step="0.05" value="6" autocomplete="off" list="steplist">
<datalist id="steplist">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</datalist>
</div>
<div>
</div> </div>
</div> </div>
<input id="interpolate" type="range" min="0" max="6" step="0.05" value="6" autocomplete="off" list="steplist">
<datalist id="steplist">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</datalist>
</div> </div>
</body> </body>
</html> </html>

9
src/script.js
View File

@ -76,15 +76,18 @@ async function init() {
invertZAxis = true; invertZAxis = true;
} }
for (let i = 0; i < 6; ++i) { for (let i = 0; i < 6; ++i) {
let v;
if (i > t) { if (i > t) {
interpolate[i] = 0.0; v = 0.0;
} }
else if (i+1 > t) { else if (i+1 > t) {
interpolate[i] = t - Math.floor(t); v = t - Math.floor(t);
} }
else { 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) => { document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => {