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
|
<script>
import { onMount } from "svelte";
import Plotly from "plotly.js-basic-dist-min";
let points = [];
let newPoint = {x: 0, y: 0};
let translate = {x: 0, y: 0};
function addPoint() {
// Append to the list.
points = [
...points, {
x: newPoint.x,
y: newPoint.y,
id: Date.now(),
}
];
newPoint = {x: 0, y: 0}
}
function deletePoint(id) {
points = points.filter(item => item.id !== Number(id));
}
function translatePoints() {
let pointsArray = {x: [], y: []};
let translatedPointsArray = {x: [], y: []};
// Store the points in a matrix like array.
for (const point of points) {
pointsArray.x = [...pointsArray.x, point.x];
pointsArray.y = [...pointsArray.y, point.y];
}
// Translate the points.
for (const x of pointsArray.x)
translatedPointsArray.x.push(x + translate.x);
for (const y of pointsArray.y)
translatedPointsArray.y.push(y + translate.y);
// Plot graphs.
Plotly.newPlot('algoChart', [{
x: pointsArray.x,
y: pointsArray.y,
mode: 'markers',
marker: { size: 6 },
name: 'Original Points'
}, {
x: translatedPointsArray.x,
y: translatedPointsArray.y,
mode: 'markers',
marker: { size: 12 },
name: 'Translated Points'
}]);
}
</script>
<h2>Translation</h2>
<form>
<input type="number" aria-label="x co-ordinate" placeholder="0"
bind:value={newPoint.x}>
<input type="number" aria-label="y co-ordinate" placeholder="0"
bind:value={newPoint.y}>
<button type="button" on:click={addPoint}>Add Point</button>
</form>
<h4>Translation co-ordinates</h4>
<form>
<input type="number" aria-label="x co-ordinate" placeholder="0"
bind:value={translate.x}>
<input type="number" aria-label="y co-ordinate" placeholder="0"
bind:value={translate.y}>
</form>
{#if points.length > 0}
<button id="translatePoints" type="button"
on:click={translatePoints}>Translate Points</button>
{/if}
<hr>
{#if points.length > 0}
<h4>Original Points</h4>
<table>
<thead>
<tr>
<th style="width: 2em;">Delete</th>
<th>x</th>
<th>y</th>
</tr>
</thead>
<tbody>
{#each points as point (point.id)}
<tr>
<td>
<button type="button"
on:click={deletePoint(point.id)}> X </button>
</td>
<td>{point.x}</td>
<td>{point.y}</td>
</tr>
{/each}
</tbody>
</table>
{/if}
<div id="algoChart"></div>
<style>
#translatePoints {
margin: .8em;
padding: 0.4em 1.2em;
width: 100%;
}
hr { color: var(--bg-hl-alt-intense); }
</style>
|