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

update colours to match catppuccin colour palette 

https://catppuccin.com/palette/
This commit is contained in:
Luca Conte 2025-05-10 11:47:13 +02:00
parent 9658d8d9f0
commit ff971138c5
1 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/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 {
@ -81,8 +81,8 @@
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,13 +100,27 @@
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 { #matrices > span {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.matrix svg {
max-width: 100%;
height: auto;
}
.projection {
color: #f38ba8;
}
.lookAt {
color: #a6e3a1;
}
</style> </style>
</head> </head>
<body> <body>
@ -127,9 +141,8 @@
<div id="controls"> <div id="controls">
<div id="matrices"> <div id="matrices">
<span></span> <span></span>
<div class="matrix"> <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 \\
@ -139,9 +152,8 @@
$$ $$
</div> </div>
<span>$$\dot{}$$</span> <span>$$\dot{}$$</span>
<div class="matrix"> <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 \\
@ -151,9 +163,8 @@
$$ $$
</div> </div>
<span>$$\dot{}$$</span> <span>$$\dot{}$$</span>
<div class="matrix"> <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} \\
@ -163,9 +174,8 @@
$$ $$
</div> </div>
<span>$$\dot{}$$</span> <span>$$\dot{}$$</span>
<div class="matrix"> <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 \\
@ -175,9 +185,8 @@
$$ $$
</div> </div>
<span>$$\dot{}$$</span> <span>$$\dot{}$$</span>
<div class="matrix"> <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 \\
@ -187,9 +196,8 @@
$$ $$
</div> </div>
<span>$$\dot{}$$</span> <span>$$\dot{}$$</span>
<div class="matrix"> <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 \\