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

@ -87,7 +87,7 @@ async function init() {
v = 1.0; v = 1.0;
} }
interpolate[i] = v; 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) => { document.getElementById("displayMatricesVirtually").addEventListener("input", (e) => {