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

add dots between matrices

This commit is contained in:
Luca Conte 2025-05-10 01:50:33 +02:00
parent db55fd528a
commit 9658d8d9f0
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/index.html
View File

@ -75,7 +75,7 @@
#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);
@ -102,6 +102,11 @@
top: 0;
background-color: rgba(255, 255, 255, 0.1);
}
#matrices > span {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
@ -121,7 +126,8 @@
</div>
<div id="controls">
<div id="matrices">
<div>
<span></span>
<div class="matrix">
$$
\color{red}
\begin{pmatrix}
@ -132,7 +138,8 @@
\end{pmatrix}
$$
</div>
<div>
<span>$$\dot{}$$</span>
<div class="matrix">
$$
\color{red}
\begin{pmatrix}
@ -143,7 +150,8 @@
\end{pmatrix}
$$
</div>
<div>
<span>$$\dot{}$$</span>
<div class="matrix">
$$
\color{red}
\begin{pmatrix}
@ -154,7 +162,8 @@
\end{pmatrix}
$$
</div>
<div>
<span>$$\dot{}$$</span>
<div class="matrix">
$$
\color{red}
\begin{pmatrix}
@ -165,7 +174,8 @@
\end{pmatrix}
$$
</div>
<div>
<span>$$\dot{}$$</span>
<div class="matrix">
$$
\color{green}
\begin{pmatrix}
@ -176,7 +186,8 @@
\end{pmatrix}
$$
</div>
<div>
<span>$$\dot{}$$</span>
<div class="matrix">
$$
\color{green}
\begin{pmatrix}
@ -187,6 +198,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">

2
src/script.js
View File

@ -87,7 +87,7 @@ async function init() {
v = 1.0;
}
interpolate[i] = v;
document.getElementById("matrices").children[5-i].style.setProperty("--fill-percentage", (v * 100) + "%");
document.getElementsByClassName("matrix")[5-i].style.setProperty("--fill-percentage", (v * 100) + "%");
}
});
document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => {