From 2bf50bb65c486910b837d4dbeee41fe7f06350a5 Mon Sep 17 00:00:00 2001 From: Andinus Date: Mon, 11 Oct 2021 16:26:23 +0530 Subject: Add scaling solution The code is garbage but it works. --- src/Navbar.svelte | 4 +- src/algorithms/2d-transformations/Scaling.svelte | 175 ++++++++++++++++++++++- 2 files changed, 170 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/Navbar.svelte b/src/Navbar.svelte index cee69d0..04b63dd 100644 --- a/src/Navbar.svelte +++ b/src/Navbar.svelte @@ -31,8 +31,8 @@ - diff --git a/src/algorithms/2d-transformations/Scaling.svelte b/src/algorithms/2d-transformations/Scaling.svelte index ce312de..9f17fd1 100644 --- a/src/algorithms/2d-transformations/Scaling.svelte +++ b/src/algorithms/2d-transformations/Scaling.svelte @@ -2,17 +2,178 @@ import { onMount } from "svelte"; import Plotly from "plotly.js-basic-dist-min"; - onMount(() => { + 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() { + let scale_mat = [[scale_factor.x, 0], [0, scale_factor.y]]; + + scaled_points = [[], []]; + // Deep copy. + points_after_fixed = JSON.parse(JSON.stringify(points)); + for (let i = 0; i < points[0].length; i++) { + scaled_points[0].push(0); + scaled_points[1].push(0); + + 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: [1, 2], - y: [2, 3], + 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: 'Scaling' - }]); - }); + name: 'Scaled' + }], { title: "Scaling Transformation" }); + } + + onMount(() => { solve(); }); -

Scaling

+

Scaling Transformation

+

+ The graph might not print the expected figure. That is because the + order of points matter but the final answer should be correct. +

+

+ To solve: clear points, add required points, update fixed point, + update scale factor and click solve. +

+ +
+
+

+ Points (P):
+

+ x: {points_str_x} +
+ y: {points_str_y} +
+

+

+
+ +   + + +
+ + +
+
+

Fixed Points

+ +   + + +
+ +
+
+

Scale Factor

+ +   + + +
+ +
+ +
+ +
+

Solution

+ +

P' = Pf + S * (P - Pf)

+

+P - Pf:
+

+ x: {to_matrix(points_after_fixed[0])} +
+ y: {to_matrix(points_after_fixed[1])} +
+

+ +

+S * (P - Pf):
+

+ x: {to_matrix(scaled_points[0])} +
+ y: {to_matrix(scaled_points[1])} +
+

+ +

P' = Pf + S * (P - Pf)

+

P': +

+ x: {to_matrix(scaled_points_after_fixed[0])} +
+ Y: {to_matrix(scaled_points_after_fixed[1])} +
+

+

-- cgit 1.4.1-2-gfad0