-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.js
63 lines (60 loc) · 3.45 KB
/
test.js
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
// Local dependencies
const test = require('ava');
const generateHarmonographSVG = require('.');
test('harmongraph: should return a consistent SVG', t => {
t.is(generateHarmonographSVG({
pendulumTime: 10,
size: 500,
strokeWidth: 2,
strokeColor: '#000',
backgroundColor: 'red',
pendulums: [{
amplitude: 200, frequency: 2.985, phase: 2.054, damping: 0.001
},
{
amplitude: 200, frequency: 3.006, phase: 1.82, damping: 0.008
},
{
amplitude: 200, frequency: 3.003, phase: 2.283, damping: 0.001
},
{
amplitude: 200, frequency: 1.994, phase: 1.155, damping: 0.001
}]
}), '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" style="background-color: red;"><path stroke="#000" stroke-width="2" fill="none" pathLength="1" d="M 485.049 461.945 C 461.682 449.195, 298.015 354.214, 178.34 280.606 S -20.693 151.495, 6.749 143.845 164.232 172.513, 287.49 205.288 508.733 259.642, 499.308 250.542 374.535 205.158, 250.335 187.733 11.717 179.352, 3.05 225.26 92.674 350.303, 215.166 400.095 465.957 461.4, 492.424 411.458 439.625 252.877, 321.433 158.335 63.877 -6.171, 20.31 0.471 35.416 89.992, 146.816 190.484"></path></svg>');
});
test('harmongraph: add animation style', t => {
t.is(generateHarmonographSVG({
pendulumTime: 10,
animatePath: {
duration: '2000ms',
bezierCurve: 'ease-in-out'
},
pendulums: [{
amplitude: 200, frequency: 2.985, phase: 2.054, damping: 0.001
},
{
amplitude: 200, frequency: 3.006, phase: 1.82, damping: 0.008
},
{
amplitude: 200, frequency: 3.003, phase: 2.283, damping: 0.001
},
{
amplitude: 200, frequency: 1.994, phase: 1.155, damping: 0.001
}]
}), '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700"><style>path{stroke-dasharray:1;stroke-dashoffset:1;animation:go 2000ms linear;animation-fill-mode:forwards;}@keyframes go{from{stroke-dashoffset:1}to{stroke-dashoffset:0;}}</style><path stroke="#000" stroke-width="1" fill="none" pathLength="1" d="M 679.068 646.723 C 646.36 628.881, 417.218 495.899, 249.676 392.849 S -28.969 212.083, 9.448 201.383 229.928 241.52, 402.486 287.403 712.231 363.501, 699.031 350.759 524.344 287.226, 350.469 262.826 16.412 251.089, 4.27 315.364 129.74 490.425, 301.232 560.133 652.343 645.958, 689.393 576.041 615.481 354.027, 450.006 221.669 89.434 -8.64, 28.434 0.66 49.576 125.994, 205.543 266.677"></path></svg>');
});
test('harmongraph: does not render path', t => {
t.is(generateHarmonographSVG({
pendulumTime: 10,
animatePath: true,
pendulums: [{
amplitude: 200, frequency: 3.992, phase: 2.768, damping: 0.003
}, {
amplitude: 200, frequency: 1.983, phase: 1.697, damping: 0.004
}, {
amplitude: 200, frequency: 2.988, phase: 1.268, damping: 0.003
}, {
amplitude: 200, frequency: 2.989, phase: 0.318, damping: 0.002
}]
}), '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700"><style>path{stroke-dasharray:1;stroke-dashoffset:1;animation:go 15000ms linear;animation-fill-mode:forwards;}@keyframes go{from{stroke-dashoffset:1}to{stroke-dashoffset:0;}}</style><path stroke="#000" stroke-width="1" fill="none" pathLength="1" d="M 600.113 582.891 C 535.913 641.508, 282.793 708.3, 232.551 596.842 S 270.976 272.733, 329.776 136.891 369.993 -37.831, 267.893 52.586 23.756 349.231, 44.498 498.606 260.334 718.333, 443.201 650.975 740.714 388.621, 681.372 229.271 419.898 -30.114, 311.056 12.711 216.071 234.781, 280.238 400.331 406.134 693.122, 344.792 675.722 116.703 498.953, 59.736 331.111 94.919 11.929, 271.977 3.604"></path></svg>');
});