Skip to content

Commit bf765e3

Browse files
nishantHollanishantHolla
committed
Add transformatin container
1 parent d51e17d commit bf765e3

File tree

3 files changed

+115
-0
lines changed

3 files changed

+115
-0
lines changed

‎index.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,14 @@
66
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.2/lib/p5.min.js"></script>
77
</head>
88
<body>
9+
<div class="container transformation-container">
10+
<div class="transformation-top">
11+
<div class="transformation-matrix matrix"></div>
12+
</div>
13+
<div class="transformation-bottom">
14+
<span id="transformation-text">Transformation</span>
15+
</div>
16+
</div>
917
<canvas></canvas>
1018
<script src="main.js"></script>
1119
</body>

‎main.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// DOM elements
22

33
const DOM_CANVAS = document.querySelector("canvas");
4+
const DOM_TRANSFROMATION_MATRIX = document.querySelector(".transformation-matrix");
45

56
// Colors
67

@@ -45,6 +46,7 @@ function draw() {
4546
drawBasisArrows(BASIS);
4647
drawBasisHandles(BASIS);
4748

49+
domSetMatrix(DOM_TRANSFROMATION_MATRIX, basisToMatrix(BASIS), "span");
4850
CANVAS_HAS_CHANGED = false;
4951
}
5052

@@ -179,3 +181,28 @@ function drawBasisHandles(basis) {
179181
cursor(HAND);
180182
}
181183
}
184+
185+
// DOM utils
186+
187+
function domSetMatrix(element, matrix, childElementName) {
188+
element.replaceChildren();
189+
190+
for (let i = 0; i < matrix.length; i++) {
191+
for (let j = 0; j < matrix[i].length; j++) {
192+
let item = document.createElement(childElementName);
193+
if (childElementName === "input") {
194+
item.value = matrix[i][j];
195+
}
196+
else {
197+
item.innerText = matrix[i][j];
198+
}
199+
element.appendChild(item);
200+
}
201+
}
202+
}
203+
204+
// Math utils
205+
206+
function basisToMatrix(basis) {
207+
return [ [basis[0].x, basis[1].x], [basis[0].y, basis[1].y]];
208+
}

‎style.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
* {
22
margin: 0;
33
padding: 0;
4+
box-sizing: border-box;
45
}
56

67
html,
@@ -11,4 +12,83 @@ body {
1112

1213
body {
1314
overflow: hidden;
15+
font-family: sans-serif;
16+
color: white;
17+
}
18+
19+
.container {
20+
background: #0d0d0dcc;
21+
margin: 10px;
22+
border-radius: 10px;
23+
padding: 5px;
24+
}
25+
26+
.matrix {
27+
display: grid;
28+
grid-template-columns: 1fr 1fr;
29+
justify-items: center;
30+
align-items: center;
31+
gap: 20px;
32+
33+
border-left: 4px solid white;
34+
border-right: 4px solid white;
35+
position: relative;
36+
}
37+
38+
.matrix::before {
39+
content: "";
40+
position: absolute;
41+
left: 0;
42+
top: 0;
43+
bottom: 0;
44+
width: 20px;
45+
46+
border-top: 4px solid white;
47+
border-bottom: 4px solid white;
48+
}
49+
50+
.matrix::after {
51+
content: "";
52+
position: absolute;
53+
right: 0;
54+
top: 0;
55+
bottom: 0;
56+
width: 20px;
57+
58+
border-top: 4px solid white;
59+
border-bottom: 4px solid white;
60+
}
61+
62+
.transformation-container {
63+
position: absolute;
64+
width: 250px;
65+
height: 250px;
66+
right: 0;
67+
top: 0;
68+
69+
display: grid;
70+
grid-template-columns: 1fr;
71+
grid-template-rows: 85% 15%;
72+
}
73+
74+
.transformation-top {
75+
display: flex;
76+
justify-content: center;
77+
align-items: center;
78+
}
79+
80+
.transformation-bottom {
81+
display: flex;
82+
flex-flow: column;
83+
}
84+
85+
.transformation-matrix {
86+
font-size: 1.8rem;
87+
width: 80%;
88+
height: 80%;
89+
}
90+
91+
#transformation-text {
92+
font-size: 1.3rem;
93+
text-align: center;
1494
}

0 commit comments

Comments
 (0)