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); padding: var(--padding);
display: block; display: block;
border: solid 2px #11111b; border: solid 2px #11111b;
background-color: #31324480;
border-radius: 20px; border-radius: 20px;
} }
#stats { #stats {
background-color: #31324480;
right: var(--padding); right: var(--padding);
position: absolute; position: absolute;
top: var(--padding); top: var(--padding);
} }
#controls { #controls {
background-color: #313244;
} }
#interpolate { #interpolate {
@ -75,14 +75,14 @@
#matrices { #matrices {
display: grid; 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); grid-gap: var(--padding);
padding-left: var(--padding); padding-left: var(--padding);
padding-right: var(--padding); padding-right: var(--padding);
} }
#matrices > div { .matrix {
background-color: rgba(255, 255, 255, 0.1); background-color: #45475a;
border-radius: 20px; border-radius: 20px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -92,7 +92,7 @@
overflow: hidden; overflow: hidden;
} }
#matrices > div::before { .matrix::before {
content: ''; content: '';
position: absolute; position: absolute;
border-radius: 20px; border-radius: 20px;
@ -100,7 +100,26 @@
height: 100%; height: 100%;
right: 0; right: 0;
top: 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> </style>
</head> </head>
@ -121,9 +140,9 @@
</div> </div>
<div id="controls"> <div id="controls">
<div id="matrices"> <div id="matrices">
<div> <span></span>
<div class="matrix projection">
$$ $$
\color{red}
\begin{pmatrix} \begin{pmatrix}
1 & 0 & 0 & 0 \\ 1 & 0 & 0 & 0 \\
0 & 1 & 0 & 0 \\ 0 & 1 & 0 & 0 \\
@ -132,9 +151,9 @@
\end{pmatrix} \end{pmatrix}
$$ $$
</div> </div>
<div> <span>$$\dot{}$$</span>
<div class="matrix projection">
$$ $$
\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 \\
@ -143,9 +162,9 @@
\end{pmatrix} \end{pmatrix}
$$ $$
</div> </div>
<div> <span>$$\dot{}$$</span>
<div class="matrix projection">
$$ $$
\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} \\
@ -154,9 +173,9 @@
\end{pmatrix} \end{pmatrix}
$$ $$
</div> </div>
<div> <span>$$\dot{}$$</span>
<div class="matrix projection">
$$ $$
\color{red}
\begin{pmatrix} \begin{pmatrix}
1 & 0 & 0 & 0 \\ 1 & 0 & 0 & 0 \\
0 & 1 & 0 & 0 \\ 0 & 1 & 0 & 0 \\
@ -165,9 +184,9 @@
\end{pmatrix} \end{pmatrix}
$$ $$
</div> </div>
<div> <span>$$\dot{}$$</span>
<div class="matrix lookAt">
$$ $$
\color{green}
\begin{pmatrix} \begin{pmatrix}
u_x & u_y & u_z & 0 \\ u_x & u_y & u_z & 0 \\
v_x & v_y & v_z & 0 \\ v_x & v_y & v_z & 0 \\
@ -176,9 +195,9 @@
\end{pmatrix} \end{pmatrix}
$$ $$
</div> </div>
<div> <span>$$\dot{}$$</span>
<div class="matrix lookAt">
$$ $$
\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 \\
@ -187,6 +206,7 @@
\end{pmatrix} \end{pmatrix}
$$ $$
</div> </div>
<span></span>
</div> </div>
<input id="interpolate" type="range" min="0" max="6" step="0.05" value="6" autocomplete="off" list="steplist"> <input id="interpolate" type="range" min="0" max="6" step="0.05" value="6" autocomplete="off" list="steplist">
<datalist id="steplist"> <datalist id="steplist">

2
public/script.js
View File

@ -93,7 +93,7 @@ async function init() {
document.getElementById("interpolate").addEventListener("input", (e) => { document.getElementById("interpolate").addEventListener("input", (e) => {
animation.time = 6.0 - e.target.value; animation.time = 6.0 - e.target.value;
for (let i = 0; i < 6; ++i) { 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) => { document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => {