-
Notifications
You must be signed in to change notification settings - Fork 2
/
svgToEvenList.html
executable file
·126 lines (106 loc) · 3.36 KB
/
svgToEvenList.html
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
<!DOCTYPE html>
<html>
<body>
<a href="https://shinao.github.io/PathToPoints/">SVG to Pointlist</a>
<input id="arraySize" onkeyup="recalcSvgToEvenList();" type="number" value="20">
<textarea id="svgToEvenList" onkeyup="recalcSvgToEvenList();" style="height: 200px;">
</textarea>
<div id="arrayString"></div>
<script>
recalcSvgToEvenList();
function recalcSvgToEvenList() {
let points = restructurePoints(getPoints(document.getElementById("svgToEvenList").value));
let size = Number(document.getElementById("arraySize").value);
console.log(size);
console.log(points);
let normalize1 = normalize(points);
console.log(normalize1);
let evenOut1 = evenOut(normalize1, size);
showArray(evenOut1);
}
function showArray(toShow) {
document.getElementById("arrayString").textContent = toShow.join(", ");
}
function restructurePoints(points) {
const pointsRe = [];
for (let i = 0; i < points[0].length; i++) {
pointsRe.push([points[0][i], points[1][i]]);
}
return pointsRe;
}
function normalize(data) {
let minMax1 = minMax(data);
const scalex = Math.abs(minMax1.maxx - minMax1.minx);
const scaley = Math.abs(minMax1.maxy - minMax1.miny);
return data.map(value => [(value[0] - minMax1.minx) / scalex, 1 - (value[1] - minMax1.miny) / scaley]);
}
function minMax(data) {
var minx = 9999999;
var miny = 9999999;
var maxx = 0;
var maxy = 0;
data.forEach(point => {
if (point[0] < minx) {
minx = point[0];
}
if (point[1] < miny) {
miny = point[1];
}
if (point[0] > maxx) {
maxx = point[0];
}
if (point[1] > maxy) {
maxy = point[1];
}
})
return {
minx, miny, maxx, maxy
};
}
function getPoints(pointsString) {
let split = pointsString.split("\n");
const xs = [];
const ys = [];
split.forEach(value => {
let point = getPoint(value);
if (point) {
xs.push(point[0]);
ys.push(point[1]);
}
});
return [xs, ys];
}
function getPoint(str) {
let split = str.split(new RegExp(`[ |,]`));
if (split.length < 2) {
return;
}
return [Number(split[0]), Number(split[1])]
}
function evenOut(uneven, size) {
uneven.sort((a, b) => {
if (a[0] === b[0]) {
return 0;
}
return a[0] - b[0];
});
const even = [];
for (var i = 0; i < size; i++) {
even.push(unevenFrameModifier(uneven, 1.0 / size * i));
}
return even;
}
function unevenFrameModifier(points, percentTime) {
for (let i = 1; i < points.length; i++) {
if (percentTime >= points[i - 1][0] && percentTime <= points[i][0]) {
let percentBetween = (percentTime - points[i - 1][0]) / (points[i][0] - points[i - 1][0]);
return interpolate(points[i - 1][1], points[i][1], percentBetween);
}
}
}
function interpolate(l, r, percent) {
return l + ((r - l) * percent);
}
</script>
</body>
</html>