Skip to content

Commit 32cef8a

Browse files
nishantHollanishantHolla
committed
Add modes
1 parent bf765e3 commit 32cef8a

File tree

3 files changed

+109
-3
lines changed

3 files changed

+109
-3
lines changed

‎index.html‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,28 @@
55
<link rel="stylesheet" type="text/css" href="style.css" />
66
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.2/lib/p5.min.js"></script>
77
</head>
8-
<body>
8+
<body data-mode="free-movement-mode">
9+
<header class="container header-container">
10+
<div class="header-top">
11+
<h1>Linear Transfromation Visualizer</h1>
12+
</div>
13+
<div class="header-bottom">
14+
<div>
15+
<input type="radio" name="mode-select" value="free-movement-mode" id="free-movement-mode" checked/>
16+
<label for="free-movement-mode">Free movement mode</label>
17+
<input type="radio" name="mode-select" value="input-transformation-mode" id="input-transformation-mode" />
18+
<label for="input-transformation-mode">Input transformatin mode</label>
19+
</div>
20+
<span class="instruction-text"></span>
21+
</div>
22+
</header>
923
<div class="container transformation-container">
1024
<div class="transformation-top">
1125
<div class="transformation-matrix matrix"></div>
1226
</div>
1327
<div class="transformation-bottom">
1428
<span id="transformation-text">Transformation</span>
29+
<button class="transformation-play-button">Play Transformation</button>
1530
</div>
1631
</div>
1732
<canvas></canvas>

‎main.js‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
const DOM_CANVAS = document.querySelector("canvas");
44
const DOM_TRANSFROMATION_MATRIX = document.querySelector(".transformation-matrix");
5+
const DOM_MODE_BUTTONS = document.querySelectorAll(".header-bottom input")
6+
const DOM_INSTRUCTION_TEXT = document.querySelector(".instruction-text")
57

68
// Colors
79

@@ -20,15 +22,27 @@ let BASIS = [null, null];
2022
let INITIAL_BASIS = [null, null];
2123
let BASIS_HANDLE_ACTIVE = [false, false];
2224
let MOUSE_TOLERANCE = 0.2;
25+
let CURRENT_MODE = "free-movement-mode"
2326

2427
// P5
2528

2629
function setup() {
30+
DOM_MODE_BUTTONS[0].click();
31+
2732
createCanvas(windowWidth + 200, windowHeight + 200, P2D, DOM_CANVAS);
2833
BASIS[0] = createVector(1, 0);
2934
BASIS[1] = createVector(0, 1);
3035
INITIAL_BASIS[0] = createVector(1, 0);
3136
INITIAL_BASIS[1] = createVector(0, 1);
37+
38+
DOM_MODE_BUTTONS.forEach(button => {
39+
button.addEventListener("change", (e) => {
40+
CURRENT_MODE = e.target.value;
41+
domChangeMode(e.target.value);
42+
})
43+
})
44+
45+
domChangeMode(CURRENT_MODE);
3246
}
3347

3448
function draw() {
@@ -46,7 +60,6 @@ function draw() {
4660
drawBasisArrows(BASIS);
4761
drawBasisHandles(BASIS);
4862

49-
domSetMatrix(DOM_TRANSFROMATION_MATRIX, basisToMatrix(BASIS), "span");
5063
CANVAS_HAS_CHANGED = false;
5164
}
5265

@@ -56,6 +69,10 @@ function windowResized() {
5669
}
5770

5871
function mouseMoved() {
72+
if (CURRENT_MODE !== "free-movement-mode") {
73+
return;
74+
}
75+
5976
const col = (mouseX - (windowWidth / 2)) / SCALE;
6077
const row = ((windowHeight / 2) - mouseY) / SCALE;
6178

@@ -81,6 +98,10 @@ function mouseMoved() {
8198
}
8299

83100
function mouseDragged() {
101+
if (CURRENT_MODE !== "free-movement-mode") {
102+
return;
103+
}
104+
84105
let col = (mouseX - (windowWidth / 2)) / SCALE;
85106
const nearestCol = round(col);
86107
let row = ((windowHeight / 2) - mouseY) / SCALE;
@@ -97,10 +118,12 @@ function mouseDragged() {
97118
if (BASIS_HANDLE_ACTIVE[0]) {
98119
BASIS[0].set(col, row);
99120
CANVAS_HAS_CHANGED = true;
121+
domSetMatrix(DOM_TRANSFROMATION_MATRIX, basisToMatrix(BASIS), "span");
100122
}
101123
else if (BASIS_HANDLE_ACTIVE[1]) {
102124
BASIS[1].set(col, row);
103125
CANVAS_HAS_CHANGED = true;
126+
domSetMatrix(DOM_TRANSFROMATION_MATRIX, basisToMatrix(BASIS), "span");
104127
}
105128
}
106129

@@ -192,6 +215,7 @@ function domSetMatrix(element, matrix, childElementName) {
192215
let item = document.createElement(childElementName);
193216
if (childElementName === "input") {
194217
item.value = matrix[i][j];
218+
item.classList.add("matrix-input")
195219
}
196220
else {
197221
item.innerText = matrix[i][j];
@@ -201,6 +225,19 @@ function domSetMatrix(element, matrix, childElementName) {
201225
}
202226
}
203227

228+
function domChangeMode(mode) {
229+
document.querySelector("body").dataset.mode = mode;
230+
if (mode === "free-movement-mode") {
231+
DOM_INSTRUCTION_TEXT.innerText = "Click and drag the heads of the basis vectors to see the required transformation";
232+
domSetMatrix(DOM_TRANSFROMATION_MATRIX, basisToMatrix(BASIS), "span");
233+
}
234+
else {
235+
DOM_INSTRUCTION_TEXT.innerText = "Input required transformation matrix and click play"
236+
domSetMatrix(DOM_TRANSFROMATION_MATRIX, basisToMatrix(BASIS), "input");
237+
}
238+
CANVAS_HAS_CHANGED = true;
239+
}
240+
204241
// Math utils
205242

206243
function basisToMatrix(basis) {

‎style.css‎

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,24 @@ body {
5959
border-bottom: 4px solid white;
6060
}
6161

62+
.header-container {
63+
position: absolute;
64+
top: 0;
65+
left: 0;
66+
padding: 10px;
67+
68+
display: flex;
69+
flex-flow: column;
70+
gap: 10px;
71+
}
72+
73+
.header-bottom {
74+
display: flex;
75+
flex-flow: column;
76+
gap: 10px;
77+
font-size: 1.2rem;
78+
}
79+
6280
.transformation-container {
6381
position: absolute;
6482
width: 250px;
@@ -68,7 +86,26 @@ body {
6886

6987
display: grid;
7088
grid-template-columns: 1fr;
71-
grid-template-rows: 85% 15%;
89+
}
90+
91+
body[data-mode="free-movement-mode"] {
92+
.transformation-container {
93+
grid-template-rows: 80% 20%;
94+
}
95+
96+
.transformation-play-button {
97+
display: none;
98+
}
99+
}
100+
101+
body[data-mode="input-transformation-mode"] {
102+
.transformation-container {
103+
grid-template-rows: 75% 25%;
104+
}
105+
106+
.transformation-play-button {
107+
display: block;
108+
}
72109
}
73110

74111
.transformation-top {
@@ -80,6 +117,17 @@ body {
80117
.transformation-bottom {
81118
display: flex;
82119
flex-flow: column;
120+
align-items: center;
121+
gap: 5px;
122+
}
123+
124+
.transformation-play-button {
125+
padding: 2px;
126+
cursor: pointer;
127+
}
128+
129+
.transformation-play-button:disabled {
130+
cursor: default;
83131
}
84132

85133
.transformation-matrix {
@@ -92,3 +140,9 @@ body {
92140
font-size: 1.3rem;
93141
text-align: center;
94142
}
143+
144+
.matrix-input {
145+
width: 50px;
146+
padding: 5px;
147+
text-align: center;
148+
}

0 commit comments

Comments
 (0)