-
Notifications
You must be signed in to change notification settings - Fork 1
/
index2.html
116 lines (85 loc) · 13.2 KB
/
index2.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
<html>
<head>
<meta charset="utf-8">
<style>
path {
fill: none;
stroke: #000;
stroke-width: 1px;
}
.testPoint {
stroke: green;
fill: green;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<!--<script src="smartSVGPath.js" type="text/javascript"></script>-->
<script src="pathseg.js" type="text/javascript"></script>
<script src="morph.js" type="text/javascript"></script>
<script>
var svgWidth = 1500, svgHeight = 600;
svg = d3.select('body').append('svg')
.attr('width',svgWidth)
.attr('height',svgHeight)
.attr('viewBox','0 0 ' + svgWidth + ' ' + svgHeight)
.attr('id', 'dimensionsCircleSVG');
var group = svg.append('g');
var group2 = svg.append('g').attr('transform','translate(800,0)');
var pathData = "M88.212,331.44873c-10.65348,-17.5023 -17.95158,-58.789 -17.95158,-58.789c0,0 -16.4684,-12.6655 -21.49352,-21.4525c-3.79008,-6.6277 -3.22559,-14.9632 -5.7244,-22.1776c-6.05128,-17.47134 -22.32633,-50.77696 -22.32633,-50.77696l4.24818,32.68614c0,0 -11.61127,-12.48961 -15.06501,-20.12405c-6.56151,-14.50409 -10.52441,-30.83395 -9.81834,-46.73731c0.60805,-13.68947 5.72958,-27.13073 11.98402,-39.32296c5.78171,-11.27095 13.20157,-22.25263 23.06275,-30.20374c5.2581,-4.23959 12.3118,-5.56839 18.34594,-8.60304c18.81207,-9.46079 36.25539,-21.68672 55.63499,-29.92258c29.01781,-12.33175 59.12462,-22.84837 90.07246,-28.87645c31.41933,-6.11996 63.75342,-7.10317 95.76312,-7.14844c24.75999,-0.03503 49.36252,4.03604 74.08912,5.31979c32.4512,1.6848 65.25588,-1.39817 97.4343,3.12507c10.35337,1.45533 20.65248,3.92508 30.41155,7.67603c5.79902,2.22891 10.72256,6.36797 16.47411,8.71641c7.44199,3.03854 16.12116,2.9057 23.11737,6.86422c6.10699,3.45542 9.27598,11.02693 15.52793,14.21221c3.56193,1.81478 8.18233,0.59567 11.75105,2.39693c5.90471,2.98016 9.20278,9.66511 14.73813,13.28551c4.45723,2.9153 10.52672,3.10457 14.55746,6.58568c4.39046,3.79158 5.56177,10.29737 9.40488,14.64265c17.12697,19.36514 42.13403,30.55514 59.64483,49.57379c6.19679,6.73039 15.74412,22.48129 15.74412,22.48129c1.73187,0.35616 21.90591,31.90777 20.41326,33.64125c27.57943,3.97129 25.30895,22.99384 10.31143,35.35401c0,0 11.91226,19.94335 16.97326,30.38155c5.17526,10.6738 6.51545,23.3855 13.64252,32.8681c2.5297,3.3657 8.23929,4.0091 9.86012,7.8952c2.28672,5.4827 0.01285,12.0896 -1.87398,17.7224c-1.69492,5.0601 -4.86391,9.5946 -8.24643,13.7225c-5.13313,6.2648 -10.6267,12.9259 -17.95925,16.3656c-4.53079,2.1255 -14.87042,2.0691 -14.87042,2.0691c0,0 -2.16158,1.4428 -3.40215,1.5326c-15.02234,1.0895 -31.19474,-3.658 -43.44495,-12.4212c-3.91309,-2.7995 -4.56542,-8.7437 -8.2375,-11.8528c-3.45035,-2.9212 -8.64096,-3.0898 -12.26091,-5.798c-8.67918,-6.4937 -12.6244,-18.2506 -21.63277,-24.2792c-3.75724,-2.5145 -12.80185,-4.4792 -12.80185,-4.4792c0,0 -3.87078,8.6227 -7.89544,9.8601c-8.0729,2.4824 -17.4826,-2.3613 -24.21353,-7.4632c-5.49482,-4.165 -11.20779,-17.3852 -11.20779,-17.3852c0,0 -9.95902,5.5459 -15.02235,4.3182c-4.89765,-1.1874 -8.79253,-5.839 -11.00374,-10.3675c-2.47186,-5.0617 -1.57584,-16.8254 -1.57584,-16.8254l-5.93578,-2.434c0,0 -1.92521,17.8632 -3.11686,26.7662c-1.01242,7.5629 -1.67082,15.2075 -3.42536,22.6334c-0.58074,2.4581 -2.33922,7.2076 -2.33922,7.2076c0,0 6.43279,11.3226 8.03363,14.4445c0.78926,1.539 3.18149,5.7669 4.03841,7.2695c0.89638,1.5719 2.90907,2.2998 3.80544,3.8719c0.85692,1.5026 0.24511,3.6706 1.3334,5.0153c11.05463,8.2705 13.10874,0.8933 17.34317,18.2059c-17.13572,3.9811 -39.72145,-0.4036 -59.58218,-1.6263c0,0 -5.00209,-5.4143 -6.0927,-8.816c-0.55235,-1.7233 0.54932,-3.7336 -0.08551,-5.4282c-1.33519,-3.563 -8.5035,-7.5077 -10.06935,-10.9753c-2.41187,-5.3406 -2.83319,-21.8656 -3.92915,-23.7019c-1.09632,-1.8361 -6.71915,-12.925 -6.71915,-12.925c0,0 -6.56811,8.0966 -9.29508,12.5221c-0.97528,1.5826 -2.14391,3.1588 -2.50542,4.9822c-0.64055,3.2313 2.53024,12.9026 2.08821,16.1669c-0.1405,1.0372 -1.23147,1.924 -1.05794,2.9562c0.34205,2.0346 3.3336,2.835 3.87649,4.8255c0.25797,0.9451 -0.78819,1.9999 -0.42203,2.9087c1.12417,2.7914 4.24604,4.672 7.12689,5.5418c7.34809,-0.973 9.06318,3.6776 13.73696,12.721l-11.76283,0.878c-8.92161,1.1759 -17.8159,-0.7798 -26.67127,-1.8453c-9.17833,3.9815 -12.80346,3.8428 -21.12433,-0.3411c-6.29175,-3.1638 -4.4226,-12.1376 -5.20079,-13.9975c-0.77819,-1.8598 0.21816,-7.2879 -0.48898,-10.8327c-0.69089,-3.4641 -4.72091,-12.7477 -4.97299,-16.2713c-0.52111,-7.2797 5.28148,-14.1793 4.47384,-21.4328c-0.23798,-2.1385 -2.29084,-3.7572 -2.67627,-5.8744c-0.53826,-2.9569 0.60734,-8.9964 0.60734,-8.9964l-14.67136,0.456c0,0 -30.3505,11.8432 -46.14889,15.5927c-15.74965,3.7378 -32.07237,4.416 -48.08499,6.7863c-13.28672,1.9666 -26.62218,8.6667 -39.81946,6.1691c-4.05466,-0.7673 -6.86393,-4.7015 -10.69525,-6.2346c-13.66627,-5.4691 -28.90945,-5.8335 -42.96079,-10.2197c-7.75834,-2.4219 -22.71873,-8.8536 -22.71873,-8.8536c-0.42239,6.5047 -0.40383,13.0202 -0.46006,19.5349c0,0 6.43422,6.0056 9.6416,10.5501c3.48766,4.9418 3.63744,13.0002 7.22919,17.867c2.90049,3.9302 14.8572,23.8168 14.8572,23.8168c-7.0894,1.8615 -14.2304,2.6608 -21.49905,3.2035c-6.23266,3.7938 -10.89984,-0.2655 -17.86945,-0.6409l-14.04492,-1.7469c-6.01576,-5.3579 -11.12996,-14.4867 -17.11644,-21.8041c-3.43893,-4.2034 -7.92062,-6.9027 -11.10015,-10.2575c1.98895,6.8821 0.9294,11.5298 -1.21433,17.9926l3.66726,2.2805c7.02514,0.063 11.70571,6.7172 17.75574,12.5576c-4.59327,1.3198 -14.57888,-0.7078 -19.00916,-1.1818c-8.43709,5.6837 -15.4408,0.9585 -25.10543,0.1519c0,0 -10.24305,5.4459 -14.30449,4.4338c-9.84191,-2.4527 -5.22382,-13.4982 -10.49745,-22.1622z";
//pathData = SmartSVGPath.reverse(pathData);
element = group.append('path').attr('d',pathData);
var pathAnimations = [];
function prepareAnimations()
{
pathAnimations.push(getNewMorphInstance());
var segmentPointsHippo = pathAnimations[0].getSegmentCoordinates(element.node());
//use this to see the segment points of the shape, use the indexes for the control points
pathAnimations[0].displayPointArray(segmentPointsHippo,group,true);
//always define control points in CW (ClockWise) even when path is CCW defined
var controlPointsHippo = [
segmentPointsHippo[96], //point of tail
segmentPointsHippo[71], //right bottom of nose
segmentPointsHippo[46], //bottom right feet right side
segmentPointsHippo[12], //bottom left feet right side
segmentPointsHippo[1], //bottom left feet right side
segmentPointsHippo[97] //inner point of tail
];
//path that arcs will transform into, elephant svg taken from author freepik http://www.flaticon.com/free-icon/elephant-side-view_47101
var otherSVG = "M436.99838,89.90813c7.47256,0.54267 34.48874,-1.08534 41.96131,0c7.47256,1.08534 18.394,3.79869 27.01618,7.05472s11.49625,3.79869 16.66956,10.31074c5.17331,7.05472 10.92144,16.28012 13.22069,18.4508c1.72444,2.17068 8.04737,9.76807 12.64587,15.73745c4.5985,6.51205 5.74812,8.68273 11.49625,21.70682c5.74812,12.48142 13.22069,21.70682 14.94512,26.04819s5.17331,17.90813 6.89775,23.8775c1.72444,5.42671 3.44887,16.82279 3.44887,22.24949c0,5.42671 -0.57481,26.59086 -1.72444,33.1029c-1.14962,6.51205 -11.49625,102.02206 -12.07106,107.99144s-4.02369,37.44427 -5.17331,41.24296c-1.14962,3.79869 -4.5985,17.90813 -6.32294,21.16415c-1.72444,3.25602 -6.32294,7.05472 -10.34662,7.05472s-8.04737,0 -8.04737,0s-1.72444,-2.17068 -1.72444,-3.25602c0,-0.54267 1.72444,-1.08534 2.29925,-4.34136c0.57481,-3.25602 1.72444,-22.79216 1.72444,-29.84688c0,-7.05472 0,-71.08984 0.57481,-79.77257c0,-8.68273 0,-26.04819 -1.14962,-34.18824c-1.14962,-8.14006 -2.29925,-21.70682 -5.74812,-29.30421c-2.87406,-7.59739 -6.89775,-20.07881 -11.49625,-24.96284c-4.5985,-5.42671 -8.04737,-7.59739 -9.197,-7.59739c-1.14962,0 -2.87406,2.71335 -5.74812,1.62801c-2.87406,-0.54267 -6.32294,-4.88403 -9.197,-4.88403s-7.47256,1.08534 -10.34662,1.08534s-10.92144,1.08534 -12.64587,2.17068c-1.72444,1.08534 -0.57481,17.36546 -1.72444,21.70682c-1.72444,4.34136 -2.29925,4.34136 -3.44887,3.79869s1.14962,-10.85341 -1.72444,-14.10943c-2.87406,-3.25602 -5.74812,-3.79869 -9.77181,-4.34136c-3.44887,-0.54267 -5.17331,-0.54267 -5.17331,-0.54267s3.44887,12.48142 3.44887,14.10943s-5.17331,2.17068 -9.197,1.62801c-4.02369,-1.08534 -20.11843,-8.14006 -20.11843,-8.14006s-8.04737,0.54267 -9.77181,2.17068c-1.72444,1.62801 -9.197,12.48142 -9.197,12.48142s2.87406,10.85341 2.87406,13.56676s0,7.05472 0,7.05472s3.44887,17.36546 4.5985,28.76154s1.72444,37.98694 1.72444,40.70029s1.72444,12.48142 1.72444,16.28012c0.57481,3.79869 1.14962,12.48142 0.57481,16.28012c-0.57481,3.79869 -2.87406,17.36546 -2.87406,19.53614c0,1.62801 -0.57481,5.96938 2.29925,11.39608c3.44887,5.42671 10.34662,14.10943 10.92144,17.36546s2.29925,6.51205 1.14962,8.68273s-60.93012,0 -60.93012,0l-2.29925,-0.54267c0,0 -3.44887,-4.88403 -2.29925,-9.2254c1.14962,-4.34136 4.5985,-9.2254 6.32294,-10.31074c1.72444,-1.62801 4.02369,-6.51205 4.5985,-9.76807c0,-3.25602 -1.14962,-17.90813 -2.29925,-25.50552c-1.14962,-7.59739 -7.47256,-29.30421 -7.47256,-29.30421s-10.34662,27.13353 -10.34662,29.84688s-2.87406,8.14006 -5.17331,11.39608c-2.29925,3.25602 -6.89775,7.05472 -6.89775,8.68273c0,1.08534 -1.14962,5.42671 1.14962,8.68273c2.29925,3.25602 13.7955,12.48142 14.94512,15.19478c1.14962,2.17068 2.87406,8.68273 0,10.85341l-59.78049,0c0,0 -4.02369,-3.79869 -2.87406,-11.93875c1.14962,-7.59739 5.17331,-10.85341 7.47256,-12.48142c2.29925,-1.62801 5.17331,-5.42671 5.74812,-7.59739s6.32294,-34.73091 8.04737,-41.78563c1.72444,-7.05472 4.5985,-29.84688 4.5985,-33.1029c0,-3.25602 0,-22.79216 1.14962,-29.30421c1.14962,-5.96938 2.29925,-12.48142 2.29925,-12.48142s-2.87406,-5.96938 -2.87406,-7.05472c0,-1.62801 -4.02369,0 -5.17331,0c-1.14962,0 -2.87406,2.17068 -10.92144,4.34136s-20.11843,7.05472 -28.74062,10.31074s-31.61468,10.85341 -50.00868,13.02409c-18.394,1.62801 -43.68574,-3.25602 -43.68574,-3.25602s-19.54362,-3.25602 -23.56731,-1.08534c-3.44887,1.62801 -9.197,13.56676 -12.07106,21.70682s-5.17331,14.6521 -5.17331,21.16415c0,7.05472 0.57481,47.21234 1.14962,50.46836c0.57481,3.25602 2.87406,8.68273 6.89775,12.48142c4.02369,3.25602 16.66956,14.10943 16.66956,15.73745c0,1.08534 0,4.88403 -1.72444,6.51205c-1.72444,1.62801 -37.36281,0 -37.36281,0s-2.87406,3.25602 -4.02369,3.79869c-1.72444,0 -60.3553,0 -63.80418,0s-5.74812,-8.68273 -3.44887,-12.48142c2.29925,-4.34136 3.44887,-6.51205 3.44887,-8.68273s0,-8.68273 -0.57481,-11.39608s0.57481,-10.31074 2.29925,-16.82279c1.72444,-5.96938 6.32294,-42.3283 6.32294,-45.58433c0,-3.25602 1.14962,-15.73745 0,-18.4508c-1.14962,-3.25602 -5.74812,-14.10943 -5.17331,-19.53614c0,-5.42671 -1.72444,-18.4508 -1.14962,-23.8775c0.57481,-5.42671 2.29925,-18.99347 2.29925,-22.79216c0,-3.25602 0.57481,-12.48142 -1.14962,-15.19478c-1.72444,-3.25602 -5.74812,-13.02409 -5.74812,-16.28012c0,-2.71335 0,-2.71335 0,-2.71335s-0.57481,12.48142 -0.57481,14.10943c0,1.62801 0,19.53614 -1.14962,22.79216c-1.14962,3.25602 -1.72444,12.48142 -2.29925,17.36546c-0.57481,5.42671 -0.57481,21.70682 -1.14962,24.42017s-2.29925,24.42017 -2.29925,26.59086c0,2.17068 -1.14962,4.34136 -2.87406,4.34136s-5.74812,0 -4.5985,-6.51205c0.57481,-6.51205 2.87406,-23.33483 3.44887,-27.6762c0.57481,-3.79869 0,-26.04819 0,-28.21887s0,-8.68273 0.57481,-11.93875s0.57481,-16.82279 0,-19.53614s-2.29925,-5.96938 -1.72444,-11.39608s0.57481,-10.85341 0,-11.93875s0,-7.05472 0.57481,-9.2254c0.57481,-2.17068 0.57481,-11.39608 0.57481,-13.02409s1.14962,-5.96938 4.02369,-9.76807c3.44887,-3.79869 11.49625,-17.36546 14.37031,-21.16415s9.197,-15.73745 12.07106,-20.07881c2.87406,-4.34136 13.22069,-17.36546 24.14212,-25.50552s25.29175,-19.53614 28.74062,-21.70682s14.37031,-9.76807 18.394,-12.48142s16.66956,-8.68273 32.1895,-10.31074s33.91393,0 39.66206,1.62801s17.24437,5.42671 23.56731,7.05472s14.37031,7.05472 29.31543,7.05472c14.94512,0 35.06356,-3.25602 48.28424,-5.96938c13.7955,-2.71335 21.26806,-3.79869 24.14212,-4.88403s14.37031,-8.68273 21.84287,-8.68273c7.47256,0 14.94512,1.08534 17.24437,1.62801s8.04737,1.08534 9.77181,1.62801c1.72444,0.54267 6.89775,3.79869 11.49625,5.96938c5.17331,2.71335 17.24437,8.14006 25.29175,8.68273z";
var testElement = group2.append('path').attr('d',otherSVG);
var segmentPointsElephant = pathAnimations[0].getSegmentCoordinates(testElement.node());
pathAnimations[0].displayPointArray(segmentPointsElephant, group2, true);
var controlPointsElephant = [
segmentPointsElephant[102], //point of tail
segmentPointsElephant[14], //mouth
segmentPointsElephant[47], //
segmentPointsElephant[81],
segmentPointsElephant[84],
segmentPointsElephant[96] //inner point of tail
];
pathAnimations[0].initialize(4,element.attr('d'), otherSVG, element, controlPointsHippo, controlPointsElephant);
//check result sampled points
//pathAnimations[0].displayPointArray(pathAnimations[0].points0,group,true,10);
//pathAnimations[0].displayPointArray(pathAnimations[0].points1,group2,true,10);
}
function startTransition(delay)
{
if (delay === undefined) delay = 0;
pathAnimations[0].startAnimation(1500,delay, 'ease-out',nextAnimationInTransition);
}
function nextAnimationInTransition()
{
doReverse();
}
function doReverse()
{
pathAnimations[0].reverse();
startTransition(1000);
}
prepareAnimations();
setTimeout(startTransition, 1000);
</script>
</body>
</html>