-
Notifications
You must be signed in to change notification settings - Fork 0
/
jellyfish.html
258 lines (254 loc) · 14 KB
/
jellyfish.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="../tweener.js"></script>
</head>
<body>
<canvas id="cvs" width="400" height="436" style="border:2px solid black;"></canvas>
<script>
(function(){
var cvs = new Tweener(document.getElementById('cvs'), 200, 200);
cvs.ctx.fillStyle = '#dfeffb';
cvs.ctx.strokeStyle = '#6595B8';
cvs.ctx.lineWidth = '2';
cvs.path('tentacle1Start', [
[150.079, 251.836],
[150.079, 249.76, 150.079, 247.683, 150.079, 245.607],
[150.651, 245.18, 150.172, 243.704, 150.329, 242.866],
[153.76, 240.731, 154.939, 236.347, 159.299, 235.142],
[159.715, 235.142, 160.13, 235.142, 160.545, 235.142],
[159.05, 249.536, 158.334, 270.957, 160.047, 287.217],
[160.566, 292.147, 161.69, 298.078, 163.784, 301.419],
[165.674, 304.433, 169.605, 306.44, 172.006, 309.391],
[175.637, 313.856, 179.57, 319.866, 178.485, 329.574],
[178.086, 333.147, 176.385, 337.249, 174.747, 340.537],
[173.564, 342.912, 170.579, 347.518, 167.023, 347.513],
[161.566, 347.504, 159.995, 340.991, 163.286, 337.297],
[164.604, 335.819, 166.904, 335.49, 168.269, 334.059],
[171.466, 330.707, 172.909, 322.726, 169.266, 318.612],
[167.765, 316.917, 165.069, 316.358, 163.286, 315.124],
[146.943, 303.792, 151.234, 278.903, 150.079, 251.836]
]);
cvs.path('tentacle2Start', [
[155.312, 239.877],
[155.312, 255.657, 155.312, 271.437, 155.312, 287.217],
[154.093, 303.227, 152.857, 317.236, 148.835, 331.069],
[146.166, 340.245, 142.68, 349.797, 140.861, 360.717],
[140.255, 364.363, 139.478, 369.029, 140.363, 372.179],
[141.134, 374.919, 144.99, 377.336, 147.34, 380.152],
[150.667, 384.14, 155.037, 390.136, 154.565, 397.842],
[154.093, 405.541, 150.454, 414.076, 143.104, 416.53],
[142.107, 416.53, 141.111, 416.53, 140.115, 416.53],
[127.029, 413.535, 133.82, 398.587, 143.353, 396.098],
[143.247, 392.856, 141.474, 390.148, 140.115, 387.626],
[138.781, 385.156, 137.519, 382.321, 135.879, 380.151],
[134.366, 378.149, 132.358, 377.123, 131.394, 374.67],
[129.595, 370.09, 131.414, 362.416, 132.142, 356.482],
[134.101, 340.513, 137.569, 326.971, 140.365, 312.63],
[144.372, 292.068, 146.312, 271.522, 144.849, 248.099],
[149.332, 246.355, 149.439, 240.233, 155.312, 239.877]
]);
cvs.path('tentacle3Start', [
[125.662,242.119],
[125.746,242.119,125.829,242.119,125.912,242.119],
[131.439,244.232,134.967,249.675,143.103,248.348],
[146.428,253.892,148.392,261.159,145.595,268.531],
[141.325,279.782,129.396,283.619,127.904,298.179],
[126.224,314.593,137.879,323.816,139.864,337.547],
[140.829,344.216,138.427,350.971,135.38,354.987],
[133.138,357.941,128.503,359.979,126.909,363.957],
[124.729,369.395,126.984,375.33,129.151,378.657],
[131.058,381.585,134.173,382.496,134.383,385.882],
[134.599,389.353,132.444,392.383,128.902,393.358],
[128.32,393.358,127.739,393.358,127.158,393.358],
[117.735,388.011,119.372,369.761,123.919,360.717],
[126.921,354.744,133.386,350.656,130.895,341.034],
[127.576,328.211,114.214,319.566,118.188,302.664],
[121.176,289.956,131.671,279.502,132.889,265.54],
[133.839,254.629,129.443,247.827,125.662,242.119]
]);
cvs.path('tentacle4Start', [
[154.814,239.627],
[154.897,239.627,154.98,239.627,155.063,239.627],
[159.245,250.354,165.271,263.228,166.275,277.249],
[166.743,283.789,165.622,289.373,162.289,292.448],
[157.974,296.431,142.176,297.083,144.848,307.647],
[146.3,313.387,154.389,312.704,157.805,316.118],
[160.656,318.97,161.836,326.097,160.794,332.811],
[159.747,339.555,155.658,351.888,152.322,357.229],
[149.912,361.089,146.771,364.088,140.612,364.205],
[139.947,364.205,139.283,364.205,138.619,364.205],
[135.755,363.562,132.873,362.791,132.39,360.219],
[131.313,354.49,139.776,345.259,145.346,350.501],
[149.841,346.265,154.588,338.95,154.316,330.569],
[154.171,326.115,152.702,321.217,149.583,319.606],
[147.203,318.377,144.332,318.546,142.107,317.863],
[136.879,316.254,131.293,313.613,129.899,308.144],
[128.296,301.861,132.56,295.501,135.629,291.95],
[139.008,288.04,146.23,285.93,148.087,280.987],
[149.562,277.061,148.679,271.265,147.838,268.53],
[145.755,261.747,140.013,254.527,138.37,248.098],
[146.558,248.926,151.438,244.428,154.814,239.627]
]);
cvs.path('tentacle5Start', [
[160.794,235.89],
[161.79,235.89,162.787,235.89,163.784,235.89],
[168.943,236.71,171.557,240.075,177.736,239.877],
[180.56,251.534,173.935,261.478,168.517,268.531],
[164.996,273.112,159.444,279.156,161.292,288.464],
[162.828,296.207,166.154,303.996,164.282,313.629],
[163.55,317.393,161.526,321.57,159.547,324.839],
[158.142,327.162,155.944,329.199,153.568,330.322],
[152.655,330.322,151.741,330.322,150.827,330.322],
[148.323,329.337,146.634,327.539,145.596,325.089],
[145.596,324.176,145.596,323.263,145.596,322.348],
[148.345,315.19,160.429,315.274,158.303,301.169],
[157.688,297.084,153.849,293.864,152.323,289.709],
[150.87,285.753,151.726,280.716,153.071,277.75],
[154.702,274.149,157.725,270.401,160.048,266.786],
[162.498,262.971,165.298,258.941,166.775,255.573],
[167.766,253.313,168.453,250.581,168.27,248.348],
[167.732,241.753,159.513,241.438,156.062,238.381],
[156.999,236.912,159.014,236.518,160.794,235.89]
]);
cvs.path('tentacle6Start', [
[161.541,236.637],
[161.707,236.637,161.873,236.637,162.04,236.637],
[162.627,246.5,163.332,255.739,166.026,262.55],
[168.034,267.628,171.575,271.72,173.75,276.753],
[175.999,281.953,177.423,287.226,178.235,294.192],
[178.235,295.936,178.235,297.679,178.235,299.424],
[177.824,301.348,177.643,304.309,176.989,306.65],
[174.597,315.216,169.379,324.977,164.78,329.822],
[161.027,333.776,153.503,336.83,155.063,344.522],
[155.582,347.077,158.898,348.873,161.541,351.499],
[163.558,353.502,166.03,356.379,167.272,359.223],
[170.827,367.356,167.479,378.856,156.807,378.409],
[153.865,377.059,152.124,372.133,153.319,368.193],
[154.048,365.792,155.905,365.879,157.057,364.206],
[156.239,357.805,150.085,354.227,148.335,347.762],
[145.869,338.646,150.758,333.636,154.814,329.824],
[159.867,325.072,164.667,319.398,166.773,311.885],
[168.938,304.161,166.468,296.442,164.53,289.461],
[163.414,285.432,162.271,280.981,160.794,277.751],
[159.704,275.369,157.982,273.362,156.808,271.022],
[153.098,263.645,150.842,256.351,149.832,245.858],
[153.627,242.674,155.378,237.451,161.541,236.637]
]);
cvs.path('tentacle7Start', [
[125.164,242.119],
[125.331,242.119,125.497,242.119,125.662,242.119],
[126.457,242.903,127.858,243.079,128.652,243.863],
[129.06,244.55,127.767,245.392,127.157,246.106],
[121.006,253.3,126.831,261.668,132.14,267.284],
[136.096,271.468,138.06,276.385,139.117,281.985],
[139.117,283.894,139.117,285.805,139.117,287.715],
[136.426,298.427,131.533,306.221,130.396,319.358],
[130.037,323.527,129.551,327.174,126.41,328.827],
[123.42,330.397,117.929,329.683,117.191,326.334],
[116.036,321.092,120.778,316.486,122.672,313.378],
[124.267,310.761,125.954,306.602,127.903,302.665],
[129.792,298.853,131.657,294.939,131.392,290.456],
[130.471,274.881,113.331,270.812,111.46,256.571],
[111.46,255.408,111.46,254.245,111.46,253.083],
[111.989,251.535,111.918,249.388,112.706,248.1],
[117.556,246.802,120.049,243.149,125.164,242.119]
]);
cvs.path('headStart', [
[139.117,177.587],
[140.861,177.587,142.605,177.587,144.349,177.587],
[154.846,178.333,165.398,180.157,173.998,183.318],
[182.301,186.369,190.266,190.728,191.688,200.759],
[191.688,201.507,191.688,202.253,191.688,203.001],
[190.121,211.4,187.836,219.082,184.213,225.425],
[186.085,226.679,186.594,230.27,184.213,231.405],
[192.546,235.527,184.377,242.403,177.236,242.368],
[171.227,242.338,166.434,236.752,159.546,238.63],
[156.022,239.59,154.514,243.326,152.57,245.108],
[149.607,247.824,147.608,248.608,143.35,250.091],
[141.772,250.091,140.195,250.091,138.617,250.091],
[133.112,249.521,130.644,244.196,125.66,243.862],
[120.092,243.488,117.38,249.798,111.209,250.091],
[110.462,250.091,109.714,250.091,108.967,250.091],
[96.351,245.681,86.92,238.085,85.546,222.434],
[85.546,222.268,85.546,222.102,85.546,221.936],
[87.313,203.009,97.891,192.821,111.209,185.31],
[119.031,180.9,128.597,178.253,139.117,177.587]
]);
cvs.frame('start', {
'tentacle1': {
'path': 'tentacle1Start',
'fill': true,
'stroke': true
},
'tentacle2': {
'path': 'tentacle2Start',
'fill': true,
'stroke': true
},
'tentacle3': {
'path': 'tentacle3Start',
'fill': true,
'stroke': true
},
'tentacle4': {
'path': 'tentacle4Start',
'fill': true,
'stroke': true
},
'tentacle5':{
'path': 'tentacle5Start',
'fill': true,
'stroke': true
},
'tentacle6':{
'path': 'tentacle6Start',
'fill': true,
'stroke': true
},
'tentacle7':{
'path': 'tentacle7Start',
'fill': true,
'stroke': true
},
'gradient1': {
'createLinearGradient':[
[0, 0, 500, 500],
[[0, '#417f9e'], [0.3, '#b8c5de'], [1, '#e0eefb']]
]
},
'head': {
'path': 'headStart',
'clip':true
},
'headBackground': {
'x': 84,
'y': 175,
'width': 110,
'height': 80,
'image': (function(){
var img = new Image();
img.src= 'data:image/jpeg;base64,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 1WbStRaqorUY6qNIq6luPP2eY0iMqHM+l0F1FPp9QFMX8/8AyaX0nnk9ekHPv2he/aK1GDlXKzip SunNayrlZSrlYsdua0lXKylXKzXSVpKqM5VSo6SrlVKiVURpUpplPqCumkwUCMDBGIYICYoEBMME YAAAACDDIAUECFkBUFRrCtTadRQLVRadRWoxStTTpKyVTVVNWM2IpcVSkajh3Pk4YipBiQuFxXgq NzlNhcqgLi5fI16RL5XfQ5MNorXUZ2NRipOUh1VlaSrlZSrlZsdeemkq5WUq5WbHXmtJVSs5Vysu sq5VSs5VSo1KuVUqJTlRpfT6iU+oqz6jp9BRp6fRDNJgYIxMMEAwwQEwwQ6LgHS6XQPpdK1Noqup tTdJujF1VqbU3RXS4ntDqaOl1UIuKAYixNaVnpYz1PhPPJ8HrzWe/wBG483WRpOC7kYf7b6K1cY9 o1ux9MfoTZh7NpT6ymj+jD2VL5a98MO+WsvgrnCqdRVpBWNJeohpkSrlZqlK1zWsqpWUq5WbHbnp rKqVlKqVmx156ayqlZyqlZx0ladOVEp9RqVfT6jo+kxfZp0+svo/ow9mvT6y+jmjD2a9PrOaPqLq zR0+goF0dAx0ul0FdLpdK0D6VqbpN0uGqukXSbpF0sjF6Vdpuk2pXGL2q6T9JpNYz71f0f0y6PpM Wfo2mj6xmlTSY6c9tE6E0WvM4NW7GG/0t9emfmt/9cFxG51Hl6/K27aw+S42uTx+V1V9mL+eJx+V s6jWOV33Mxhx781JdS84zCvk/hrUwtXy0zfDHVaYvgrnFVPTqEUVnWlTY1GKg+lQpqpVys5TlSxu dNZVysZVSs2OvPTaVUrGaXKzY6TptnyuRnmqu/5Gcb9jtibs/nvstfmTEtpfY+2epYmaaxj3bzap thNKmksanbeaVNMJpU0ljc7bzSvphNKmmcdJ016fWX0f0Yur6Oo+i+jF1d0m6TdJujGb0q6RdF3p NSMddC1NOiK57okHFSCw1cZ2J40qeLKzYz1E3xWtnhnqLGaXT6ngCdLlP6TDTG52f0CkaTJh76nO eun88STrKTirvkSp5T/+j9O+I5+dXq9pcWJYJF/MTF9VnHJo8UteyzW3CNLU9Fqe+WVWVEDTJWdZ 3w1TqdhqWIPos5SUVKqVHT6mNTppKqaZSqlTG503m/Cs6c/0rP6cZsbnbqlUwn7RU/aVm810n6c/ 1pqSsN4/4azXRSbDqTpz3sOaaazKy1njcuuVli5pU0x6cpiztvNnNsPo5pnG526Ps/th9H9J6tz9 G32X0y+h9UxfdpdFLanMtbYwJ7aUhaVqyMda7SMWi0SlynIVeWkp1OTRtNJVJUqb6RWlnhnVjFie DhmqYUh8Bpq4XGkScKYvrPVP6TfKN4QHAqU5FcTFCY47SOlXR5B9F0uEmLrWU6zlX1Qun1N9iCHY Pno6fRcTcWektOpNTP4XTlHzDmYplLqs5tOcaYZta553yrH4d9tJ+Mi8elOd6r0c/nzPpHzyFV30 mjXhNZ6nWtibmrGKz4PmcXcJsrTGJ14E8jWbTzmyCZ/FSKmOlOxphKson42rn4Km7P4P9uv+Gdrc xWfzmfZb3/Imb1ofKKz1bSmWnyfyKz+T4vhcFieGALpEqCxSps8M9RtxluEZqDLh8VAY4VGj6Ol5 HEU+nCkVIBcLi+C5BCujheRHJSAdXiIqAocV/AEVJgADgAp1NACgwAVP8NMewErXLpwoByr08+Cp AC0D/oBWKd9fxnr/AAAsZqZ/hc/wAIrx3+Lnr+AJVn+Kn+C/6ARo5/g6AilQAof8/iL7AAgAKDvs AUfxlsBYzURc/wAAFIL6/ib/AIAFH/RwAFf9ABBQAFTSAVH/2Q=='
return img;
})()
},
'headStroke': {
'path': 'headStart',
'stroke': true,
'lineWidth':4
}
});
cvs.frame('pulse', {
});
window.onload = function(){
cvs.draw('start');
}
//var bounce = function(){
// cvs.tween((cvs.current == 'square')?'square2':'square', 500, bounce, '<');
//}
//bounce();
})();
</script>
</body>
</html>