skycons.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726
  1. (function(global) {
  2. "use strict";
  3. /* Set up a RequestAnimationFrame shim so we can animate efficiently FOR
  4. * GREAT JUSTICE. */
  5. var requestInterval, cancelInterval;
  6. (function() {
  7. var raf = global.requestAnimationFrame ||
  8. global.webkitRequestAnimationFrame ||
  9. global.mozRequestAnimationFrame ||
  10. global.oRequestAnimationFrame ||
  11. global.msRequestAnimationFrame ,
  12. caf = global.cancelAnimationFrame ||
  13. global.webkitCancelAnimationFrame ||
  14. global.mozCancelAnimationFrame ||
  15. global.oCancelAnimationFrame ||
  16. global.msCancelAnimationFrame ;
  17. if(raf && caf) {
  18. requestInterval = function(fn) {
  19. var handle = {value: null};
  20. function loop() {
  21. handle.value = raf(loop);
  22. fn();
  23. }
  24. loop();
  25. return handle;
  26. };
  27. cancelInterval = function(handle) {
  28. caf(handle.value);
  29. };
  30. }
  31. else {
  32. requestInterval = setInterval;
  33. cancelInterval = clearInterval;
  34. }
  35. }());
  36. /* Catmull-rom spline stuffs. */
  37. /*
  38. function upsample(n, spline) {
  39. var polyline = [],
  40. len = spline.length,
  41. bx = spline[0],
  42. by = spline[1],
  43. cx = spline[2],
  44. cy = spline[3],
  45. dx = spline[4],
  46. dy = spline[5],
  47. i, j, ax, ay, px, qx, rx, sx, py, qy, ry, sy, t;
  48. for(i = 6; i !== spline.length; i += 2) {
  49. ax = bx;
  50. bx = cx;
  51. cx = dx;
  52. dx = spline[i ];
  53. px = -0.5 * ax + 1.5 * bx - 1.5 * cx + 0.5 * dx;
  54. qx = ax - 2.5 * bx + 2.0 * cx - 0.5 * dx;
  55. rx = -0.5 * ax + 0.5 * cx ;
  56. sx = bx ;
  57. ay = by;
  58. by = cy;
  59. cy = dy;
  60. dy = spline[i + 1];
  61. py = -0.5 * ay + 1.5 * by - 1.5 * cy + 0.5 * dy;
  62. qy = ay - 2.5 * by + 2.0 * cy - 0.5 * dy;
  63. ry = -0.5 * ay + 0.5 * cy ;
  64. sy = by ;
  65. for(j = 0; j !== n; ++j) {
  66. t = j / n;
  67. polyline.push(
  68. ((px * t + qx) * t + rx) * t + sx,
  69. ((py * t + qy) * t + ry) * t + sy
  70. );
  71. }
  72. }
  73. polyline.push(
  74. px + qx + rx + sx,
  75. py + qy + ry + sy
  76. );
  77. return polyline;
  78. }
  79. function downsample(n, polyline) {
  80. var len = 0,
  81. i, dx, dy;
  82. for(i = 2; i !== polyline.length; i += 2) {
  83. dx = polyline[i ] - polyline[i - 2];
  84. dy = polyline[i + 1] - polyline[i - 1];
  85. len += Math.sqrt(dx * dx + dy * dy);
  86. }
  87. len /= n;
  88. var small = [],
  89. target = len,
  90. min = 0,
  91. max, t;
  92. small.push(polyline[0], polyline[1]);
  93. for(i = 2; i !== polyline.length; i += 2) {
  94. dx = polyline[i ] - polyline[i - 2];
  95. dy = polyline[i + 1] - polyline[i - 1];
  96. max = min + Math.sqrt(dx * dx + dy * dy);
  97. if(max > target) {
  98. t = (target - min) / (max - min);
  99. small.push(
  100. polyline[i - 2] + dx * t,
  101. polyline[i - 1] + dy * t
  102. );
  103. target += len;
  104. }
  105. min = max;
  106. }
  107. small.push(polyline[polyline.length - 2], polyline[polyline.length - 1]);
  108. return small;
  109. }
  110. */
  111. /* Define skycon things. */
  112. /* FIXME: I'm *really really* sorry that this code is so gross. Really, I am.
  113. * I'll try to clean it up eventually! Promise! */
  114. var KEYFRAME = 500,
  115. STROKE = 0.08,
  116. TAU = 2.0 * Math.PI,
  117. TWO_OVER_SQRT_2 = 2.0 / Math.sqrt(2);
  118. function circle(ctx, x, y, r) {
  119. ctx.beginPath();
  120. ctx.arc(x, y, r, 0, TAU, false);
  121. ctx.fill();
  122. }
  123. function line(ctx, ax, ay, bx, by) {
  124. ctx.beginPath();
  125. ctx.moveTo(ax, ay);
  126. ctx.lineTo(bx, by);
  127. ctx.stroke();
  128. }
  129. function puff(ctx, t, cx, cy, rx, ry, rmin, rmax) {
  130. var c = Math.cos(t * TAU),
  131. s = Math.sin(t * TAU);
  132. rmax -= rmin;
  133. circle(
  134. ctx,
  135. cx - s * rx,
  136. cy + c * ry + rmax * 0.5,
  137. rmin + (1 - c * 0.5) * rmax
  138. );
  139. }
  140. function puffs(ctx, t, cx, cy, rx, ry, rmin, rmax) {
  141. var i;
  142. for(i = 5; i--; )
  143. puff(ctx, t + i / 5, cx, cy, rx, ry, rmin, rmax);
  144. }
  145. function cloud(ctx, t, cx, cy, cw, s, color) {
  146. t /= 30000;
  147. var a = cw * 0.21,
  148. b = cw * 0.12,
  149. c = cw * 0.24,
  150. d = cw * 0.28;
  151. ctx.fillStyle = color;
  152. puffs(ctx, t, cx, cy, a, b, c, d);
  153. ctx.globalCompositeOperation = 'destination-out';
  154. puffs(ctx, t, cx, cy, a, b, c - s, d - s);
  155. ctx.globalCompositeOperation = 'source-over';
  156. }
  157. function sun(ctx, t, cx, cy, cw, s, color) {
  158. t /= 120000;
  159. var a = cw * 0.25 - s * 0.5,
  160. b = cw * 0.32 + s * 0.5,
  161. c = cw * 0.50 - s * 0.5,
  162. i, p, cos, sin;
  163. ctx.strokeStyle = color;
  164. ctx.lineWidth = s;
  165. ctx.lineCap = "round";
  166. ctx.lineJoin = "round";
  167. ctx.beginPath();
  168. ctx.arc(cx, cy, a, 0, TAU, false);
  169. ctx.stroke();
  170. for(i = 8; i--; ) {
  171. p = (t + i / 8) * TAU;
  172. cos = Math.cos(p);
  173. sin = Math.sin(p);
  174. line(ctx, cx + cos * b, cy + sin * b, cx + cos * c, cy + sin * c);
  175. }
  176. }
  177. function moon(ctx, t, cx, cy, cw, s, color) {
  178. t /= 15000;
  179. var a = cw * 0.29 - s * 0.5,
  180. b = cw * 0.05,
  181. c = Math.cos(t * TAU),
  182. p = c * TAU / -16;
  183. ctx.strokeStyle = color;
  184. ctx.lineWidth = s;
  185. ctx.lineCap = "round";
  186. ctx.lineJoin = "round";
  187. cx += c * b;
  188. ctx.beginPath();
  189. ctx.arc(cx, cy, a, p + TAU / 8, p + TAU * 7 / 8, false);
  190. ctx.arc(cx + Math.cos(p) * a * TWO_OVER_SQRT_2, cy + Math.sin(p) * a * TWO_OVER_SQRT_2, a, p + TAU * 5 / 8, p + TAU * 3 / 8, true);
  191. ctx.closePath();
  192. ctx.stroke();
  193. }
  194. function rain(ctx, t, cx, cy, cw, s, color) {
  195. t /= 1350;
  196. var a = cw * 0.16,
  197. b = TAU * 11 / 12,
  198. c = TAU * 7 / 12,
  199. i, p, x, y;
  200. ctx.fillStyle = color;
  201. for(i = 4; i--; ) {
  202. p = (t + i / 4) % 1;
  203. x = cx + ((i - 1.5) / 1.5) * (i === 1 || i === 2 ? -1 : 1) * a;
  204. y = cy + p * p * cw;
  205. ctx.beginPath();
  206. ctx.moveTo(x, y - s * 1.5);
  207. ctx.arc(x, y, s * 0.75, b, c, false);
  208. ctx.fill();
  209. }
  210. }
  211. function sleet(ctx, t, cx, cy, cw, s, color) {
  212. t /= 750;
  213. var a = cw * 0.1875,
  214. i, p, x, y;
  215. ctx.strokeStyle = color;
  216. ctx.lineWidth = s * 0.5;
  217. ctx.lineCap = "round";
  218. ctx.lineJoin = "round";
  219. for(i = 4; i--; ) {
  220. p = (t + i / 4) % 1;
  221. x = Math.floor(cx + ((i - 1.5) / 1.5) * (i === 1 || i === 2 ? -1 : 1) * a) + 0.5;
  222. y = cy + p * cw;
  223. line(ctx, x, y - s * 1.5, x, y + s * 1.5);
  224. }
  225. }
  226. function snow(ctx, t, cx, cy, cw, s, color) {
  227. t /= 3000;
  228. var a = cw * 0.16,
  229. b = s * 0.75,
  230. u = t * TAU * 0.7,
  231. ux = Math.cos(u) * b,
  232. uy = Math.sin(u) * b,
  233. v = u + TAU / 3,
  234. vx = Math.cos(v) * b,
  235. vy = Math.sin(v) * b,
  236. w = u + TAU * 2 / 3,
  237. wx = Math.cos(w) * b,
  238. wy = Math.sin(w) * b,
  239. i, p, x, y;
  240. ctx.strokeStyle = color;
  241. ctx.lineWidth = s * 0.5;
  242. ctx.lineCap = "round";
  243. ctx.lineJoin = "round";
  244. for(i = 4; i--; ) {
  245. p = (t + i / 4) % 1;
  246. x = cx + Math.sin((p + i / 4) * TAU) * a;
  247. y = cy + p * cw;
  248. line(ctx, x - ux, y - uy, x + ux, y + uy);
  249. line(ctx, x - vx, y - vy, x + vx, y + vy);
  250. line(ctx, x - wx, y - wy, x + wx, y + wy);
  251. }
  252. }
  253. function fogbank(ctx, t, cx, cy, cw, s, color) {
  254. t /= 30000;
  255. var a = cw * 0.21,
  256. b = cw * 0.06,
  257. c = cw * 0.21,
  258. d = cw * 0.28;
  259. ctx.fillStyle = color;
  260. puffs(ctx, t, cx, cy, a, b, c, d);
  261. ctx.globalCompositeOperation = 'destination-out';
  262. puffs(ctx, t, cx, cy, a, b, c - s, d - s);
  263. ctx.globalCompositeOperation = 'source-over';
  264. }
  265. /*
  266. var WIND_PATHS = [
  267. downsample(63, upsample(8, [
  268. -1.00, -0.28,
  269. -0.75, -0.18,
  270. -0.50, 0.12,
  271. -0.20, 0.12,
  272. -0.04, -0.04,
  273. -0.07, -0.18,
  274. -0.19, -0.18,
  275. -0.23, -0.05,
  276. -0.12, 0.11,
  277. 0.02, 0.16,
  278. 0.20, 0.15,
  279. 0.50, 0.07,
  280. 0.75, 0.18,
  281. 1.00, 0.28
  282. ])),
  283. downsample(31, upsample(16, [
  284. -1.00, -0.10,
  285. -0.75, 0.00,
  286. -0.50, 0.10,
  287. -0.25, 0.14,
  288. 0.00, 0.10,
  289. 0.25, 0.00,
  290. 0.50, -0.10,
  291. 0.75, -0.14,
  292. 1.00, -0.10
  293. ]))
  294. ];
  295. */
  296. var WIND_PATHS = [
  297. [
  298. -0.7500, -0.1800, -0.7219, -0.1527, -0.6971, -0.1225,
  299. -0.6739, -0.0910, -0.6516, -0.0588, -0.6298, -0.0262,
  300. -0.6083, 0.0065, -0.5868, 0.0396, -0.5643, 0.0731,
  301. -0.5372, 0.1041, -0.5033, 0.1259, -0.4662, 0.1406,
  302. -0.4275, 0.1493, -0.3881, 0.1530, -0.3487, 0.1526,
  303. -0.3095, 0.1488, -0.2708, 0.1421, -0.2319, 0.1342,
  304. -0.1943, 0.1217, -0.1600, 0.1025, -0.1290, 0.0785,
  305. -0.1012, 0.0509, -0.0764, 0.0206, -0.0547, -0.0120,
  306. -0.0378, -0.0472, -0.0324, -0.0857, -0.0389, -0.1241,
  307. -0.0546, -0.1599, -0.0814, -0.1876, -0.1193, -0.1964,
  308. -0.1582, -0.1935, -0.1931, -0.1769, -0.2157, -0.1453,
  309. -0.2290, -0.1085, -0.2327, -0.0697, -0.2240, -0.0317,
  310. -0.2064, 0.0033, -0.1853, 0.0362, -0.1613, 0.0672,
  311. -0.1350, 0.0961, -0.1051, 0.1213, -0.0706, 0.1397,
  312. -0.0332, 0.1512, 0.0053, 0.1580, 0.0442, 0.1624,
  313. 0.0833, 0.1636, 0.1224, 0.1615, 0.1613, 0.1565,
  314. 0.1999, 0.1500, 0.2378, 0.1402, 0.2749, 0.1279,
  315. 0.3118, 0.1147, 0.3487, 0.1015, 0.3858, 0.0892,
  316. 0.4236, 0.0787, 0.4621, 0.0715, 0.5012, 0.0702,
  317. 0.5398, 0.0766, 0.5768, 0.0890, 0.6123, 0.1055,
  318. 0.6466, 0.1244, 0.6805, 0.1440, 0.7147, 0.1630,
  319. 0.7500, 0.1800
  320. ],
  321. [
  322. -0.7500, 0.0000, -0.7033, 0.0195, -0.6569, 0.0399,
  323. -0.6104, 0.0600, -0.5634, 0.0789, -0.5155, 0.0954,
  324. -0.4667, 0.1089, -0.4174, 0.1206, -0.3676, 0.1299,
  325. -0.3174, 0.1365, -0.2669, 0.1398, -0.2162, 0.1391,
  326. -0.1658, 0.1347, -0.1157, 0.1271, -0.0661, 0.1169,
  327. -0.0170, 0.1046, 0.0316, 0.0903, 0.0791, 0.0728,
  328. 0.1259, 0.0534, 0.1723, 0.0331, 0.2188, 0.0129,
  329. 0.2656, -0.0064, 0.3122, -0.0263, 0.3586, -0.0466,
  330. 0.4052, -0.0665, 0.4525, -0.0847, 0.5007, -0.1002,
  331. 0.5497, -0.1130, 0.5991, -0.1240, 0.6491, -0.1325,
  332. 0.6994, -0.1380, 0.7500, -0.1400
  333. ]
  334. ],
  335. WIND_OFFSETS = [
  336. {start: 0.36, end: 0.11},
  337. {start: 0.56, end: 0.16}
  338. ];
  339. function leaf(ctx, t, x, y, cw, s, color) {
  340. var a = cw / 8,
  341. b = a / 3,
  342. c = 2 * b,
  343. d = (t % 1) * TAU,
  344. e = Math.cos(d),
  345. f = Math.sin(d);
  346. ctx.fillStyle = color;
  347. ctx.strokeStyle = color;
  348. ctx.lineWidth = s;
  349. ctx.lineCap = "round";
  350. ctx.lineJoin = "round";
  351. ctx.beginPath();
  352. ctx.arc(x , y , a, d , d + Math.PI, false);
  353. ctx.arc(x - b * e, y - b * f, c, d + Math.PI, d , false);
  354. ctx.arc(x + c * e, y + c * f, b, d + Math.PI, d , true );
  355. ctx.globalCompositeOperation = 'destination-out';
  356. ctx.fill();
  357. ctx.globalCompositeOperation = 'source-over';
  358. ctx.stroke();
  359. }
  360. function swoosh(ctx, t, cx, cy, cw, s, index, total, color) {
  361. t /= 2500;
  362. var path = WIND_PATHS[index],
  363. a = (t + index - WIND_OFFSETS[index].start) % total,
  364. c = (t + index - WIND_OFFSETS[index].end ) % total,
  365. e = (t + index ) % total,
  366. b, d, f, i;
  367. ctx.strokeStyle = color;
  368. ctx.lineWidth = s;
  369. ctx.lineCap = "round";
  370. ctx.lineJoin = "round";
  371. if(a < 1) {
  372. ctx.beginPath();
  373. a *= path.length / 2 - 1;
  374. b = Math.floor(a);
  375. a -= b;
  376. b *= 2;
  377. b += 2;
  378. ctx.moveTo(
  379. cx + (path[b - 2] * (1 - a) + path[b ] * a) * cw,
  380. cy + (path[b - 1] * (1 - a) + path[b + 1] * a) * cw
  381. );
  382. if(c < 1) {
  383. c *= path.length / 2 - 1;
  384. d = Math.floor(c);
  385. c -= d;
  386. d *= 2;
  387. d += 2;
  388. for(i = b; i !== d; i += 2)
  389. ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);
  390. ctx.lineTo(
  391. cx + (path[d - 2] * (1 - c) + path[d ] * c) * cw,
  392. cy + (path[d - 1] * (1 - c) + path[d + 1] * c) * cw
  393. );
  394. }
  395. else
  396. for(i = b; i !== path.length; i += 2)
  397. ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);
  398. ctx.stroke();
  399. }
  400. else if(c < 1) {
  401. ctx.beginPath();
  402. c *= path.length / 2 - 1;
  403. d = Math.floor(c);
  404. c -= d;
  405. d *= 2;
  406. d += 2;
  407. ctx.moveTo(cx + path[0] * cw, cy + path[1] * cw);
  408. for(i = 2; i !== d; i += 2)
  409. ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);
  410. ctx.lineTo(
  411. cx + (path[d - 2] * (1 - c) + path[d ] * c) * cw,
  412. cy + (path[d - 1] * (1 - c) + path[d + 1] * c) * cw
  413. );
  414. ctx.stroke();
  415. }
  416. if(e < 1) {
  417. e *= path.length / 2 - 1;
  418. f = Math.floor(e);
  419. e -= f;
  420. f *= 2;
  421. f += 2;
  422. leaf(
  423. ctx,
  424. t,
  425. cx + (path[f - 2] * (1 - e) + path[f ] * e) * cw,
  426. cy + (path[f - 1] * (1 - e) + path[f + 1] * e) * cw,
  427. cw,
  428. s,
  429. color
  430. );
  431. }
  432. }
  433. var Skycons = function(opts) {
  434. this.list = [];
  435. this.interval = null;
  436. this.color = opts && opts.color ? opts.color : "black";
  437. this.resizeClear = !!(opts && opts.resizeClear);
  438. };
  439. Skycons.CLEAR_DAY = function(ctx, t, color) {
  440. var w = ctx.canvas.width,
  441. h = ctx.canvas.height,
  442. s = Math.min(w, h);
  443. sun(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
  444. };
  445. Skycons.CLEAR_NIGHT = function(ctx, t, color) {
  446. var w = ctx.canvas.width,
  447. h = ctx.canvas.height,
  448. s = Math.min(w, h);
  449. moon(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
  450. };
  451. Skycons.PARTLY_CLOUDY_DAY = function(ctx, t, color) {
  452. var w = ctx.canvas.width,
  453. h = ctx.canvas.height,
  454. s = Math.min(w, h);
  455. sun(ctx, t, w * 0.625, h * 0.375, s * 0.75, s * STROKE, color);
  456. cloud(ctx, t, w * 0.375, h * 0.625, s * 0.75, s * STROKE, color);
  457. };
  458. Skycons.PARTLY_CLOUDY_NIGHT = function(ctx, t, color) {
  459. var w = ctx.canvas.width,
  460. h = ctx.canvas.height,
  461. s = Math.min(w, h);
  462. moon(ctx, t, w * 0.667, h * 0.375, s * 0.75, s * STROKE, color);
  463. cloud(ctx, t, w * 0.375, h * 0.625, s * 0.75, s * STROKE, color);
  464. };
  465. Skycons.CLOUDY = function(ctx, t, color) {
  466. var w = ctx.canvas.width,
  467. h = ctx.canvas.height,
  468. s = Math.min(w, h);
  469. cloud(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
  470. };
  471. Skycons.RAIN = function(ctx, t, color) {
  472. var w = ctx.canvas.width,
  473. h = ctx.canvas.height,
  474. s = Math.min(w, h);
  475. rain(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
  476. cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
  477. };
  478. Skycons.SLEET = function(ctx, t, color) {
  479. var w = ctx.canvas.width,
  480. h = ctx.canvas.height,
  481. s = Math.min(w, h);
  482. sleet(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
  483. cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
  484. };
  485. Skycons.SNOW = function(ctx, t, color) {
  486. var w = ctx.canvas.width,
  487. h = ctx.canvas.height,
  488. s = Math.min(w, h);
  489. snow(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
  490. cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
  491. };
  492. Skycons.WIND = function(ctx, t, color) {
  493. var w = ctx.canvas.width,
  494. h = ctx.canvas.height,
  495. s = Math.min(w, h);
  496. swoosh(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, 0, 2, color);
  497. swoosh(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, 1, 2, color);
  498. };
  499. Skycons.FOG = function(ctx, t, color) {
  500. var w = ctx.canvas.width,
  501. h = ctx.canvas.height,
  502. s = Math.min(w, h),
  503. k = s * STROKE;
  504. fogbank(ctx, t, w * 0.5, h * 0.32, s * 0.75, k, color);
  505. t /= 5000;
  506. var a = Math.cos((t ) * TAU) * s * 0.02,
  507. b = Math.cos((t + 0.25) * TAU) * s * 0.02,
  508. c = Math.cos((t + 0.50) * TAU) * s * 0.02,
  509. d = Math.cos((t + 0.75) * TAU) * s * 0.02,
  510. n = h * 0.936,
  511. e = Math.floor(n - k * 0.5) + 0.5,
  512. f = Math.floor(n - k * 2.5) + 0.5;
  513. ctx.strokeStyle = color;
  514. ctx.lineWidth = k;
  515. ctx.lineCap = "round";
  516. ctx.lineJoin = "round";
  517. line(ctx, a + w * 0.2 + k * 0.5, e, b + w * 0.8 - k * 0.5, e);
  518. line(ctx, c + w * 0.2 + k * 0.5, f, d + w * 0.8 - k * 0.5, f);
  519. };
  520. Skycons.prototype = {
  521. _determineDrawingFunction: function(draw) {
  522. if(typeof draw === "string")
  523. draw = Skycons[draw.toUpperCase().replace(/-/g, "_")] || null;
  524. return draw;
  525. },
  526. add: function(el, draw) {
  527. var obj;
  528. if(typeof el === "string")
  529. el = document.getElementById(el);
  530. // Does nothing if canvas name doesn't exists
  531. if(el === null)
  532. return;
  533. draw = this._determineDrawingFunction(draw);
  534. // Does nothing if the draw function isn't actually a function
  535. if(typeof draw !== "function")
  536. return;
  537. obj = {
  538. element: el,
  539. context: el.getContext("2d"),
  540. drawing: draw
  541. };
  542. this.list.push(obj);
  543. this.draw(obj, KEYFRAME);
  544. },
  545. set: function(el, draw) {
  546. var i;
  547. if(typeof el === "string")
  548. el = document.getElementById(el);
  549. for(i = this.list.length; i--; )
  550. if(this.list[i].element === el) {
  551. this.list[i].drawing = this._determineDrawingFunction(draw);
  552. this.draw(this.list[i], KEYFRAME);
  553. return;
  554. }
  555. this.add(el, draw);
  556. },
  557. remove: function(el) {
  558. var i;
  559. if(typeof el === "string")
  560. el = document.getElementById(el);
  561. for(i = this.list.length; i--; )
  562. if(this.list[i].element === el) {
  563. this.list.splice(i, 1);
  564. return;
  565. }
  566. },
  567. draw: function(obj, time) {
  568. var canvas = obj.context.canvas;
  569. if(this.resizeClear)
  570. canvas.width = canvas.width;
  571. else
  572. obj.context.clearRect(0, 0, canvas.width, canvas.height);
  573. obj.drawing(obj.context, time, this.color);
  574. },
  575. play: function() {
  576. var self = this;
  577. this.pause();
  578. this.interval = requestInterval(function() {
  579. var now = Date.now(),
  580. i;
  581. for(i = self.list.length; i--; )
  582. self.draw(self.list[i], now);
  583. }, 1000 / 60);
  584. },
  585. pause: function() {
  586. if(this.interval) {
  587. cancelInterval(this.interval);
  588. this.interval = null;
  589. }
  590. }
  591. };
  592. global.Skycons = Skycons;
  593. }(this));