1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
<script>
import { onMount } from "svelte";
import Plotly from "plotly.js-basic-dist-min";
let to_add_x = 0, to_add_y = 0;
let fixed_x = 0, fixed_y = 0;
let points = [[0, 1], [0, 1]];
let points_str_x = to_matrix(points[0]);
let points_str_y = to_matrix(points[1]);
let points_after_fixed = JSON.parse(JSON.stringify(points));
let scale_factor = {x: 2, y: 2};
let scaled_points = [[0, 2], [0, 2]];
let scaled_points_after_fixed = JSON.parse(JSON.stringify(scaled_points));
function to_matrix(mat) { return JSON.stringify(mat, null, '\t') }
function add_points() {
points[0].push(to_add_x);
points[1].push(to_add_y);
to_add_x = 0;
to_add_y = 0;
solve();
}
function clear_points() {
points[0] = [];
points[1] = [];
solve();
}
function solve() {
const scale_mat = [[scale_factor.x, 0], [0, scale_factor.y]];
scaled_points = [new Array(points[0].length), new Array(points[0].length)];
// Deep copy.
points_after_fixed = JSON.parse(JSON.stringify(points));
for (let i = 0; i < points[0].length; i++) {
points_after_fixed[0][i] -= fixed_x;
points_after_fixed[1][i] -= fixed_y;
}
for (var i = 0; i < 2; i++)
for (var j = 0; j < points[0].length; j++)
for (var k = 0; k < points.length; k++)
scaled_points[i][j] += scale_mat[i][k] * points_after_fixed[k][j];
scaled_points_after_fixed = JSON.parse(JSON.stringify(scaled_points));
for (let i = 0; i < scaled_points[0].length; i++) {
scaled_points_after_fixed[0][i] += fixed_x;
scaled_points_after_fixed[1][i] += fixed_y;
}
points_str_x = to_matrix(points[0]);
points_str_y = to_matrix(points[1]);
Plotly.newPlot('algoChart', [{
x: points[0],
y: points[1],
line: { width: 2 },
type: 'lines',
name: 'Original'
}, {
x: scaled_points_after_fixed[0],
y: scaled_points_after_fixed[1],
line: { width: 1 },
type: 'lines',
name: 'Scaled'
}], { title: "Scaling Transformation" });
}
onMount(() => { solve(); });
</script>
<h2>Scaling Transformation</h2>
<p class="note">
The graph might not print the expected figure. That is because the
order of points matter but the final answer should be correct.
</p>
<p class="note">
To solve: clear points, add required points, update fixed point,
update scale factor and click solve.
</p>
<form class="points">
<section>
<p>
Points (P):<br>
<div class="mat">
x: {points_str_x}
<br>
y: {points_str_y}
</div>
<p>
</section>
<section>
<label for="to_add_x">x: </label>
<input type="number" id="to_add_x" name="to_add_x" bind:value={to_add_x}>
<label for="to_add_y">y: </label>
<input type="number" id="to_add_y" name="to_add_y" bind:value={to_add_y}>
<br>
<button type="button" on:click={add_points}>Add Points</button>
<button type="button" on:click={clear_points}>Clear Points</button>
</section>
<section>
<h4>Fixed Points</h4>
<label for="fixed_x">x: </label>
<input type="number" id="fixed_x" name="fixed_x" bind:value={fixed_x}>
<label for="fixed_y">y: </label>
<input type="number" id="fixed_y" name="fixed_y" bind:value={fixed_y}>
<br>
<button type="button" on:click={solve}>Update Fixed Point</button>
</section>
<section>
<h4>Scale Factor</h4>
<label for="scale_x">x: </label>
<input type="number" id="fixed_x" on:change={solve}
name="scale_x" bind:value={scale_factor.y}>
<label for="scale_y">y: </label>
<input type="number" id="scale_y" on:change={solve}
name="scale_y" bind:value={scale_factor.x}>
<br>
<button type="button" on:click={solve}>Update Scale Factor</button>
</section>
<button type="button" on:click={solve}>Solve</button>
</form>
<hr>
<h3>Solution</h3>
<p>P<sup>'</sup> = P<sub>f</sub> + S * (P - P<sub>f</sub>)<p>
<p>
P - P<sub>f</sub>:<br>
<div class="mat">
x: {to_matrix(points_after_fixed[0])}
<br>
y: {to_matrix(points_after_fixed[1])}
</div>
<p>
<p>
S * (P - P<sub>f</sub>):<br>
<div class="mat">
x: {to_matrix(scaled_points[0])}
<br>
y: {to_matrix(scaled_points[1])}
</div>
<p>
<p>P<sup>'</sup> = P<sub>f</sub> + S * (P - P<sub>f</sub>)<p>
<p>P<sup>'</sup>:
<div class="mat">
x: {to_matrix(scaled_points_after_fixed[0])}
<br>
Y: {to_matrix(scaled_points_after_fixed[1])}
</div>
<p>
<div id="algoChart"></div>
<style>
hr { color: var(--bg-hl-alt-intense); }
button {
margin: .8em;
padding: 0.4em 1.2em;
width: 100%;
}
section {
border: 1px dashed var(--fg-alt);
padding: 0.4em 0.8em;
}
.mat {
padding-left: 2ch;
}
</style>
|