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 'dots-between-matrices' into 'main' 

Multiplikationspunkte zwischen Matrizen & Farbpalette

See merge request lernanwendungen/cg1/cg1_tut_mdi!2
This commit is contained in:
Dennis Allerkamp 2025-05-10 10:30:28 +00:00
parent b414f2d8af 3d85fb1495
commit 5d99d16aa4
2 changed files with 41 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
public/index.html
View File

@ -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 {
@ -75,14 +75,14 @@
#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);
}
#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,7 +100,26 @@
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;
}
</style>
</head>
@ -121,9 +140,9 @@
</div>
<div id="controls">
<div id="matrices">
<div>
<span></span>
<div class="matrix projection">
$$
\color{red}
\begin{pmatrix}
1 & 0 & 0 & 0 \\
0 & 1 & 0 & 0 \\
@ -132,9 +151,9 @@
\end{pmatrix}
$$
</div>
<div>
<span>$$\dot{}$$</span>
<div class="matrix projection">
$$
\color{red}
\begin{pmatrix}
\frac{2}{r-l} & 0 & 0 & 0 \\
0 & \frac{2}{t-b} & 0 & 0 \\
@ -143,9 +162,9 @@
\end{pmatrix}
$$
</div>
<div>
<span>$$\dot{}$$</span>
<div class="matrix projection">
$$
\color{red}
\begin{pmatrix}
1 & 0 & 0 & - \frac{r+l}{2} \\
0 & 1 & 0 & - \frac{t+b}{2} \\
@ -154,9 +173,9 @@
\end{pmatrix}
$$
</div>
<div>
<span>$$\dot{}$$</span>
<div class="matrix projection">
$$
\color{red}
\begin{pmatrix}
1 & 0 & 0 & 0 \\
0 & 1 & 0 & 0 \\
@ -165,9 +184,9 @@
\end{pmatrix}
$$
</div>
<div>
<span>$$\dot{}$$</span>
<div class="matrix lookAt">
$$
\color{green}
\begin{pmatrix}
u_x & u_y & u_z & 0 \\
v_x & v_y & v_z & 0 \\
@ -176,9 +195,9 @@
\end{pmatrix}
$$
</div>
<div>
<span>$$\dot{}$$</span>
<div class="matrix lookAt">
$$
\color{green}
\begin{pmatrix}
1 & 0 & 0 & -e_x \\
0 & 1 & 0 & -e_y \\
@ -187,6 +206,7 @@
\end{pmatrix}
$$
</div>
<span></span>
</div>
<input id="interpolate" type="range" min="0" max="6" step="0.05" value="6" autocomplete="off" list="steplist">
<datalist id="steplist">

4
public/script.js
View File

@ -93,7 +93,7 @@ async function init() {
document.getElementById("interpolate").addEventListener("input", (e) => {
animation.time = 6.0 - e.target.value;
for (let i = 0; i < 6; ++i) {
document.getElementById("matrices").children[5-i].style.setProperty("--fill-percentage", (animation.interpolation(i) * 100) + "%");
document.getElementsByClassName("matrix")[5-i].style.setProperty("--fill-percentage", (animation.interpolation(i) * 100) + "%");
}
});
document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => {
@ -706,4 +706,4 @@ function hexToRgb(hex) {
}
window.addEventListener("DOMContentLoaded", init);
window.addEventListener("DOMContentLoaded", init);