├── .gitignore
├── package.json
├── README.md
├── index.html
└── skycons.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "skycons",
3 | "version": "1.0.1",
4 | "main": "skycons.js",
5 | "repository": "git@github.com:darkskyapp/skycons.git",
6 | "author": "The Dark Sky Company, LLC ",
7 | "license": "CC0"
8 | }
9 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Skycons
2 | =======
3 |
4 | Skycons is a set of ten animated weather glyphs, procedurally generated by
5 | JavaScript using the HTML5 canvas tag. They're easy to use, and pretty
6 | lightweight, so they shouldn't rain on your parade:
7 |
8 |
9 |
10 |
11 |
35 |
36 | Skycons were designed for [Forecast](http://forecast.io/) by those wacky folks
37 | at The Dark Sky Company, and were heavily inspired by Adam Whitcroft's
38 | excellent [Climacons](http://adamwhitcroft.com/climacons/). The source code has
39 | been [released into the public domain][cc0], so please do with it as you see
40 | fit! ♡
41 |
42 | [cc0]: http://creativecommons.org/publicdomain/zero/1.0/
43 |
44 | Variants
45 | --------
46 |
47 | Dark Sky no longer actively maintains Skycons, but several kind folks have made
48 | variants that you might be interested in:
49 |
50 | * [Color Skycons](https://github.com/maxdow/skycons) by Maxime Warnier
51 | * [Skycons for Android](https://github.com/torryharris/Skycons) by Torry Harris
52 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Skycons
5 |
6 |
7 |
56 |
57 |
58 |
59 |
60 |
Skycons
61 |
62 |
Skycons is a set of ten animated weather glyphs,
63 | procedurally generated by JavaScript using the HTML5 canvas tag.
They’re easy to use, and pretty lightweight, so they
98 | shouldn’t rain on your parade:
99 |
100 |
<canvas id="icon1" width="128" height="128"></canvas>
101 | <canvas id="icon2" width="128" height="128"></canvas>
102 |
103 | <script>
104 | var skycons = new Skycons({"color": "pink"});
105 | // on Android, a nasty hack is needed: {"resizeClear": true}
106 |
107 | // you can add a canvas by it's ID...
108 | skycons.add("icon1", Skycons.PARTLY_CLOUDY_DAY);
109 |
110 | // ...or by the canvas DOM element itself.
111 | skycons.add(document.getElementById("icon2"), Skycons.RAIN);
112 |
113 | // if you're using the Forecast API, you can also supply
114 | // strings: "partly-cloudy-day" or "rain".
115 |
116 | // start animation!
117 | skycons.play();
118 |
119 | // you can also halt animation with skycons.pause()
120 |
121 | // want to change the icon? no problem:
122 | skycons.set("icon1", Skycons.PARTLY_CLOUDY_NIGHT);
123 |
124 | // want to remove one altogether? no problem:
125 | skycons.remove("icon2");
126 | </script>
127 |
128 |
Skycons were designed for Forecast
129 | by those wacky folks at The Dark Sky Company, and were
130 | heavily inspired by Adam Whitcroft’s excellent
131 | Climacons. The source
132 | code is available on
133 | Github, and has been
134 | released
135 | into the public domain, so please do with it as you see fit!
136 | ♡
137 |
138 |
139 |
140 |
141 |
155 |
156 |
157 |
--------------------------------------------------------------------------------
/skycons.js:
--------------------------------------------------------------------------------
1 | (function(global) {
2 | "use strict";
3 |
4 | /* Set up a RequestAnimationFrame shim so we can animate efficiently FOR
5 | * GREAT JUSTICE. */
6 | var requestInterval, cancelInterval;
7 |
8 | (function() {
9 | var raf = global.requestAnimationFrame ||
10 | global.webkitRequestAnimationFrame ||
11 | global.mozRequestAnimationFrame ||
12 | global.oRequestAnimationFrame ||
13 | global.msRequestAnimationFrame ,
14 | caf = global.cancelAnimationFrame ||
15 | global.webkitCancelAnimationFrame ||
16 | global.mozCancelAnimationFrame ||
17 | global.oCancelAnimationFrame ||
18 | global.msCancelAnimationFrame ;
19 |
20 | if(raf && caf) {
21 | requestInterval = function(fn) {
22 | var handle = {value: null};
23 |
24 | function loop() {
25 | handle.value = raf(loop);
26 | fn();
27 | }
28 |
29 | loop();
30 | return handle;
31 | };
32 |
33 | cancelInterval = function(handle) {
34 | caf(handle.value);
35 | };
36 | }
37 |
38 | else {
39 | requestInterval = setInterval;
40 | cancelInterval = clearInterval;
41 | }
42 | }());
43 |
44 | /* Catmull-rom spline stuffs. */
45 | /*
46 | function upsample(n, spline) {
47 | var polyline = [],
48 | len = spline.length,
49 | bx = spline[0],
50 | by = spline[1],
51 | cx = spline[2],
52 | cy = spline[3],
53 | dx = spline[4],
54 | dy = spline[5],
55 | i, j, ax, ay, px, qx, rx, sx, py, qy, ry, sy, t;
56 |
57 | for(i = 6; i !== spline.length; i += 2) {
58 | ax = bx;
59 | bx = cx;
60 | cx = dx;
61 | dx = spline[i ];
62 | px = -0.5 * ax + 1.5 * bx - 1.5 * cx + 0.5 * dx;
63 | qx = ax - 2.5 * bx + 2.0 * cx - 0.5 * dx;
64 | rx = -0.5 * ax + 0.5 * cx ;
65 | sx = bx ;
66 |
67 | ay = by;
68 | by = cy;
69 | cy = dy;
70 | dy = spline[i + 1];
71 | py = -0.5 * ay + 1.5 * by - 1.5 * cy + 0.5 * dy;
72 | qy = ay - 2.5 * by + 2.0 * cy - 0.5 * dy;
73 | ry = -0.5 * ay + 0.5 * cy ;
74 | sy = by ;
75 |
76 | for(j = 0; j !== n; ++j) {
77 | t = j / n;
78 |
79 | polyline.push(
80 | ((px * t + qx) * t + rx) * t + sx,
81 | ((py * t + qy) * t + ry) * t + sy
82 | );
83 | }
84 | }
85 |
86 | polyline.push(
87 | px + qx + rx + sx,
88 | py + qy + ry + sy
89 | );
90 |
91 | return polyline;
92 | }
93 |
94 | function downsample(n, polyline) {
95 | var len = 0,
96 | i, dx, dy;
97 |
98 | for(i = 2; i !== polyline.length; i += 2) {
99 | dx = polyline[i ] - polyline[i - 2];
100 | dy = polyline[i + 1] - polyline[i - 1];
101 | len += Math.sqrt(dx * dx + dy * dy);
102 | }
103 |
104 | len /= n;
105 |
106 | var small = [],
107 | target = len,
108 | min = 0,
109 | max, t;
110 |
111 | small.push(polyline[0], polyline[1]);
112 |
113 | for(i = 2; i !== polyline.length; i += 2) {
114 | dx = polyline[i ] - polyline[i - 2];
115 | dy = polyline[i + 1] - polyline[i - 1];
116 | max = min + Math.sqrt(dx * dx + dy * dy);
117 |
118 | if(max > target) {
119 | t = (target - min) / (max - min);
120 |
121 | small.push(
122 | polyline[i - 2] + dx * t,
123 | polyline[i - 1] + dy * t
124 | );
125 |
126 | target += len;
127 | }
128 |
129 | min = max;
130 | }
131 |
132 | small.push(polyline[polyline.length - 2], polyline[polyline.length - 1]);
133 |
134 | return small;
135 | }
136 | */
137 |
138 | /* Define skycon things. */
139 | /* FIXME: I'm *really really* sorry that this code is so gross. Really, I am.
140 | * I'll try to clean it up eventually! Promise! */
141 | var KEYFRAME = 500,
142 | STROKE = 0.08,
143 | TAU = 2.0 * Math.PI,
144 | TWO_OVER_SQRT_2 = 2.0 / Math.sqrt(2);
145 |
146 | function circle(ctx, x, y, r) {
147 | ctx.beginPath();
148 | ctx.arc(x, y, r, 0, TAU, false);
149 | ctx.fill();
150 | }
151 |
152 | function line(ctx, ax, ay, bx, by) {
153 | ctx.beginPath();
154 | ctx.moveTo(ax, ay);
155 | ctx.lineTo(bx, by);
156 | ctx.stroke();
157 | }
158 |
159 | function puff(ctx, t, cx, cy, rx, ry, rmin, rmax) {
160 | var c = Math.cos(t * TAU),
161 | s = Math.sin(t * TAU);
162 |
163 | rmax -= rmin;
164 |
165 | circle(
166 | ctx,
167 | cx - s * rx,
168 | cy + c * ry + rmax * 0.5,
169 | rmin + (1 - c * 0.5) * rmax
170 | );
171 | }
172 |
173 | function puffs(ctx, t, cx, cy, rx, ry, rmin, rmax) {
174 | var i;
175 |
176 | for(i = 5; i--; )
177 | puff(ctx, t + i / 5, cx, cy, rx, ry, rmin, rmax);
178 | }
179 |
180 | function cloud(ctx, t, cx, cy, cw, s, color) {
181 | t /= 30000;
182 |
183 | var a = cw * 0.21,
184 | b = cw * 0.12,
185 | c = cw * 0.24,
186 | d = cw * 0.28;
187 |
188 | ctx.fillStyle = color;
189 | puffs(ctx, t, cx, cy, a, b, c, d);
190 |
191 | ctx.globalCompositeOperation = 'destination-out';
192 | puffs(ctx, t, cx, cy, a, b, c - s, d - s);
193 | ctx.globalCompositeOperation = 'source-over';
194 | }
195 |
196 | function sun(ctx, t, cx, cy, cw, s, color) {
197 | t /= 120000;
198 |
199 | var a = cw * 0.25 - s * 0.5,
200 | b = cw * 0.32 + s * 0.5,
201 | c = cw * 0.50 - s * 0.5,
202 | i, p, cos, sin;
203 |
204 | ctx.strokeStyle = color;
205 | ctx.lineWidth = s;
206 | ctx.lineCap = "round";
207 | ctx.lineJoin = "round";
208 |
209 | ctx.beginPath();
210 | ctx.arc(cx, cy, a, 0, TAU, false);
211 | ctx.stroke();
212 |
213 | for(i = 8; i--; ) {
214 | p = (t + i / 8) * TAU;
215 | cos = Math.cos(p);
216 | sin = Math.sin(p);
217 | line(ctx, cx + cos * b, cy + sin * b, cx + cos * c, cy + sin * c);
218 | }
219 | }
220 |
221 | function moon(ctx, t, cx, cy, cw, s, color) {
222 | t /= 15000;
223 |
224 | var a = cw * 0.29 - s * 0.5,
225 | b = cw * 0.05,
226 | c = Math.cos(t * TAU),
227 | p = c * TAU / -16;
228 |
229 | ctx.strokeStyle = color;
230 | ctx.lineWidth = s;
231 | ctx.lineCap = "round";
232 | ctx.lineJoin = "round";
233 |
234 | cx += c * b;
235 |
236 | ctx.beginPath();
237 | ctx.arc(cx, cy, a, p + TAU / 8, p + TAU * 7 / 8, false);
238 | 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);
239 | ctx.closePath();
240 | ctx.stroke();
241 | }
242 |
243 | function rain(ctx, t, cx, cy, cw, s, color) {
244 | t /= 1350;
245 |
246 | var a = cw * 0.16,
247 | b = TAU * 11 / 12,
248 | c = TAU * 7 / 12,
249 | i, p, x, y;
250 |
251 | ctx.fillStyle = color;
252 |
253 | for(i = 4; i--; ) {
254 | p = (t + i / 4) % 1;
255 | x = cx + ((i - 1.5) / 1.5) * (i === 1 || i === 2 ? -1 : 1) * a;
256 | y = cy + p * p * cw;
257 | ctx.beginPath();
258 | ctx.moveTo(x, y - s * 1.5);
259 | ctx.arc(x, y, s * 0.75, b, c, false);
260 | ctx.fill();
261 | }
262 | }
263 |
264 | function sleet(ctx, t, cx, cy, cw, s, color) {
265 | t /= 750;
266 |
267 | var a = cw * 0.1875,
268 | i, p, x, y;
269 |
270 | ctx.strokeStyle = color;
271 | ctx.lineWidth = s * 0.5;
272 | ctx.lineCap = "round";
273 | ctx.lineJoin = "round";
274 |
275 | for(i = 4; i--; ) {
276 | p = (t + i / 4) % 1;
277 | x = Math.floor(cx + ((i - 1.5) / 1.5) * (i === 1 || i === 2 ? -1 : 1) * a) + 0.5;
278 | y = cy + p * cw;
279 | line(ctx, x, y - s * 1.5, x, y + s * 1.5);
280 | }
281 | }
282 |
283 | function snow(ctx, t, cx, cy, cw, s, color) {
284 | t /= 3000;
285 |
286 | var a = cw * 0.16,
287 | b = s * 0.75,
288 | u = t * TAU * 0.7,
289 | ux = Math.cos(u) * b,
290 | uy = Math.sin(u) * b,
291 | v = u + TAU / 3,
292 | vx = Math.cos(v) * b,
293 | vy = Math.sin(v) * b,
294 | w = u + TAU * 2 / 3,
295 | wx = Math.cos(w) * b,
296 | wy = Math.sin(w) * b,
297 | i, p, x, y;
298 |
299 | ctx.strokeStyle = color;
300 | ctx.lineWidth = s * 0.5;
301 | ctx.lineCap = "round";
302 | ctx.lineJoin = "round";
303 |
304 | for(i = 4; i--; ) {
305 | p = (t + i / 4) % 1;
306 | x = cx + Math.sin((p + i / 4) * TAU) * a;
307 | y = cy + p * cw;
308 |
309 | line(ctx, x - ux, y - uy, x + ux, y + uy);
310 | line(ctx, x - vx, y - vy, x + vx, y + vy);
311 | line(ctx, x - wx, y - wy, x + wx, y + wy);
312 | }
313 | }
314 |
315 | function fogbank(ctx, t, cx, cy, cw, s, color) {
316 | t /= 30000;
317 |
318 | var a = cw * 0.21,
319 | b = cw * 0.06,
320 | c = cw * 0.21,
321 | d = cw * 0.28;
322 |
323 | ctx.fillStyle = color;
324 | puffs(ctx, t, cx, cy, a, b, c, d);
325 |
326 | ctx.globalCompositeOperation = 'destination-out';
327 | puffs(ctx, t, cx, cy, a, b, c - s, d - s);
328 | ctx.globalCompositeOperation = 'source-over';
329 | }
330 |
331 | /*
332 | var WIND_PATHS = [
333 | downsample(63, upsample(8, [
334 | -1.00, -0.28,
335 | -0.75, -0.18,
336 | -0.50, 0.12,
337 | -0.20, 0.12,
338 | -0.04, -0.04,
339 | -0.07, -0.18,
340 | -0.19, -0.18,
341 | -0.23, -0.05,
342 | -0.12, 0.11,
343 | 0.02, 0.16,
344 | 0.20, 0.15,
345 | 0.50, 0.07,
346 | 0.75, 0.18,
347 | 1.00, 0.28
348 | ])),
349 | downsample(31, upsample(16, [
350 | -1.00, -0.10,
351 | -0.75, 0.00,
352 | -0.50, 0.10,
353 | -0.25, 0.14,
354 | 0.00, 0.10,
355 | 0.25, 0.00,
356 | 0.50, -0.10,
357 | 0.75, -0.14,
358 | 1.00, -0.10
359 | ]))
360 | ];
361 | */
362 |
363 | var WIND_PATHS = [
364 | [
365 | -0.7500, -0.1800, -0.7219, -0.1527, -0.6971, -0.1225,
366 | -0.6739, -0.0910, -0.6516, -0.0588, -0.6298, -0.0262,
367 | -0.6083, 0.0065, -0.5868, 0.0396, -0.5643, 0.0731,
368 | -0.5372, 0.1041, -0.5033, 0.1259, -0.4662, 0.1406,
369 | -0.4275, 0.1493, -0.3881, 0.1530, -0.3487, 0.1526,
370 | -0.3095, 0.1488, -0.2708, 0.1421, -0.2319, 0.1342,
371 | -0.1943, 0.1217, -0.1600, 0.1025, -0.1290, 0.0785,
372 | -0.1012, 0.0509, -0.0764, 0.0206, -0.0547, -0.0120,
373 | -0.0378, -0.0472, -0.0324, -0.0857, -0.0389, -0.1241,
374 | -0.0546, -0.1599, -0.0814, -0.1876, -0.1193, -0.1964,
375 | -0.1582, -0.1935, -0.1931, -0.1769, -0.2157, -0.1453,
376 | -0.2290, -0.1085, -0.2327, -0.0697, -0.2240, -0.0317,
377 | -0.2064, 0.0033, -0.1853, 0.0362, -0.1613, 0.0672,
378 | -0.1350, 0.0961, -0.1051, 0.1213, -0.0706, 0.1397,
379 | -0.0332, 0.1512, 0.0053, 0.1580, 0.0442, 0.1624,
380 | 0.0833, 0.1636, 0.1224, 0.1615, 0.1613, 0.1565,
381 | 0.1999, 0.1500, 0.2378, 0.1402, 0.2749, 0.1279,
382 | 0.3118, 0.1147, 0.3487, 0.1015, 0.3858, 0.0892,
383 | 0.4236, 0.0787, 0.4621, 0.0715, 0.5012, 0.0702,
384 | 0.5398, 0.0766, 0.5768, 0.0890, 0.6123, 0.1055,
385 | 0.6466, 0.1244, 0.6805, 0.1440, 0.7147, 0.1630,
386 | 0.7500, 0.1800
387 | ],
388 | [
389 | -0.7500, 0.0000, -0.7033, 0.0195, -0.6569, 0.0399,
390 | -0.6104, 0.0600, -0.5634, 0.0789, -0.5155, 0.0954,
391 | -0.4667, 0.1089, -0.4174, 0.1206, -0.3676, 0.1299,
392 | -0.3174, 0.1365, -0.2669, 0.1398, -0.2162, 0.1391,
393 | -0.1658, 0.1347, -0.1157, 0.1271, -0.0661, 0.1169,
394 | -0.0170, 0.1046, 0.0316, 0.0903, 0.0791, 0.0728,
395 | 0.1259, 0.0534, 0.1723, 0.0331, 0.2188, 0.0129,
396 | 0.2656, -0.0064, 0.3122, -0.0263, 0.3586, -0.0466,
397 | 0.4052, -0.0665, 0.4525, -0.0847, 0.5007, -0.1002,
398 | 0.5497, -0.1130, 0.5991, -0.1240, 0.6491, -0.1325,
399 | 0.6994, -0.1380, 0.7500, -0.1400
400 | ]
401 | ],
402 | WIND_OFFSETS = [
403 | {start: 0.36, end: 0.11},
404 | {start: 0.56, end: 0.16}
405 | ];
406 |
407 | function leaf(ctx, t, x, y, cw, s, color) {
408 | var a = cw / 8,
409 | b = a / 3,
410 | c = 2 * b,
411 | d = (t % 1) * TAU,
412 | e = Math.cos(d),
413 | f = Math.sin(d);
414 |
415 | ctx.fillStyle = color;
416 | ctx.strokeStyle = color;
417 | ctx.lineWidth = s;
418 | ctx.lineCap = "round";
419 | ctx.lineJoin = "round";
420 |
421 | ctx.beginPath();
422 | ctx.arc(x , y , a, d , d + Math.PI, false);
423 | ctx.arc(x - b * e, y - b * f, c, d + Math.PI, d , false);
424 | ctx.arc(x + c * e, y + c * f, b, d + Math.PI, d , true );
425 | ctx.globalCompositeOperation = 'destination-out';
426 | ctx.fill();
427 | ctx.globalCompositeOperation = 'source-over';
428 | ctx.stroke();
429 | }
430 |
431 | function swoosh(ctx, t, cx, cy, cw, s, index, total, color) {
432 | t /= 2500;
433 |
434 | var path = WIND_PATHS[index],
435 | a = (t + index - WIND_OFFSETS[index].start) % total,
436 | c = (t + index - WIND_OFFSETS[index].end ) % total,
437 | e = (t + index ) % total,
438 | b, d, f, i;
439 |
440 | ctx.strokeStyle = color;
441 | ctx.lineWidth = s;
442 | ctx.lineCap = "round";
443 | ctx.lineJoin = "round";
444 |
445 | if(a < 1) {
446 | ctx.beginPath();
447 |
448 | a *= path.length / 2 - 1;
449 | b = Math.floor(a);
450 | a -= b;
451 | b *= 2;
452 | b += 2;
453 |
454 | ctx.moveTo(
455 | cx + (path[b - 2] * (1 - a) + path[b ] * a) * cw,
456 | cy + (path[b - 1] * (1 - a) + path[b + 1] * a) * cw
457 | );
458 |
459 | if(c < 1) {
460 | c *= path.length / 2 - 1;
461 | d = Math.floor(c);
462 | c -= d;
463 | d *= 2;
464 | d += 2;
465 |
466 | for(i = b; i !== d; i += 2)
467 | ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);
468 |
469 | ctx.lineTo(
470 | cx + (path[d - 2] * (1 - c) + path[d ] * c) * cw,
471 | cy + (path[d - 1] * (1 - c) + path[d + 1] * c) * cw
472 | );
473 | }
474 |
475 | else
476 | for(i = b; i !== path.length; i += 2)
477 | ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);
478 |
479 | ctx.stroke();
480 | }
481 |
482 | else if(c < 1) {
483 | ctx.beginPath();
484 |
485 | c *= path.length / 2 - 1;
486 | d = Math.floor(c);
487 | c -= d;
488 | d *= 2;
489 | d += 2;
490 |
491 | ctx.moveTo(cx + path[0] * cw, cy + path[1] * cw);
492 |
493 | for(i = 2; i !== d; i += 2)
494 | ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);
495 |
496 | ctx.lineTo(
497 | cx + (path[d - 2] * (1 - c) + path[d ] * c) * cw,
498 | cy + (path[d - 1] * (1 - c) + path[d + 1] * c) * cw
499 | );
500 |
501 | ctx.stroke();
502 | }
503 |
504 | if(e < 1) {
505 | e *= path.length / 2 - 1;
506 | f = Math.floor(e);
507 | e -= f;
508 | f *= 2;
509 | f += 2;
510 |
511 | leaf(
512 | ctx,
513 | t,
514 | cx + (path[f - 2] * (1 - e) + path[f ] * e) * cw,
515 | cy + (path[f - 1] * (1 - e) + path[f + 1] * e) * cw,
516 | cw,
517 | s,
518 | color
519 | );
520 | }
521 | }
522 |
523 | var Skycons = function(opts) {
524 | this.list = [];
525 | this.interval = null;
526 | this.color = opts && opts.color ? opts.color : "black";
527 | this.resizeClear = !!(opts && opts.resizeClear);
528 | };
529 |
530 | Skycons.CLEAR_DAY = function(ctx, t, color) {
531 | var w = ctx.canvas.width,
532 | h = ctx.canvas.height,
533 | s = Math.min(w, h);
534 |
535 | sun(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
536 | };
537 |
538 | Skycons.CLEAR_NIGHT = function(ctx, t, color) {
539 | var w = ctx.canvas.width,
540 | h = ctx.canvas.height,
541 | s = Math.min(w, h);
542 |
543 | moon(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
544 | };
545 |
546 | Skycons.PARTLY_CLOUDY_DAY = function(ctx, t, color) {
547 | var w = ctx.canvas.width,
548 | h = ctx.canvas.height,
549 | s = Math.min(w, h);
550 |
551 | sun(ctx, t, w * 0.625, h * 0.375, s * 0.75, s * STROKE, color);
552 | cloud(ctx, t, w * 0.375, h * 0.625, s * 0.75, s * STROKE, color);
553 | };
554 |
555 | Skycons.PARTLY_CLOUDY_NIGHT = function(ctx, t, color) {
556 | var w = ctx.canvas.width,
557 | h = ctx.canvas.height,
558 | s = Math.min(w, h);
559 |
560 | moon(ctx, t, w * 0.667, h * 0.375, s * 0.75, s * STROKE, color);
561 | cloud(ctx, t, w * 0.375, h * 0.625, s * 0.75, s * STROKE, color);
562 | };
563 |
564 | Skycons.CLOUDY = function(ctx, t, color) {
565 | var w = ctx.canvas.width,
566 | h = ctx.canvas.height,
567 | s = Math.min(w, h);
568 |
569 | cloud(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
570 | };
571 |
572 | Skycons.RAIN = function(ctx, t, color) {
573 | var w = ctx.canvas.width,
574 | h = ctx.canvas.height,
575 | s = Math.min(w, h);
576 |
577 | rain(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
578 | cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
579 | };
580 |
581 | Skycons.SLEET = function(ctx, t, color) {
582 | var w = ctx.canvas.width,
583 | h = ctx.canvas.height,
584 | s = Math.min(w, h);
585 |
586 | sleet(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
587 | cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
588 | };
589 |
590 | Skycons.SNOW = function(ctx, t, color) {
591 | var w = ctx.canvas.width,
592 | h = ctx.canvas.height,
593 | s = Math.min(w, h);
594 |
595 | snow(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
596 | cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
597 | };
598 |
599 | Skycons.WIND = function(ctx, t, color) {
600 | var w = ctx.canvas.width,
601 | h = ctx.canvas.height,
602 | s = Math.min(w, h);
603 |
604 | swoosh(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, 0, 2, color);
605 | swoosh(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, 1, 2, color);
606 | };
607 |
608 | Skycons.FOG = function(ctx, t, color) {
609 | var w = ctx.canvas.width,
610 | h = ctx.canvas.height,
611 | s = Math.min(w, h),
612 | k = s * STROKE;
613 |
614 | fogbank(ctx, t, w * 0.5, h * 0.32, s * 0.75, k, color);
615 |
616 | t /= 5000;
617 |
618 | var a = Math.cos((t ) * TAU) * s * 0.02,
619 | b = Math.cos((t + 0.25) * TAU) * s * 0.02,
620 | c = Math.cos((t + 0.50) * TAU) * s * 0.02,
621 | d = Math.cos((t + 0.75) * TAU) * s * 0.02,
622 | n = h * 0.936,
623 | e = Math.floor(n - k * 0.5) + 0.5,
624 | f = Math.floor(n - k * 2.5) + 0.5;
625 |
626 | ctx.strokeStyle = color;
627 | ctx.lineWidth = k;
628 | ctx.lineCap = "round";
629 | ctx.lineJoin = "round";
630 |
631 | line(ctx, a + w * 0.2 + k * 0.5, e, b + w * 0.8 - k * 0.5, e);
632 | line(ctx, c + w * 0.2 + k * 0.5, f, d + w * 0.8 - k * 0.5, f);
633 | };
634 |
635 | Skycons.prototype = {
636 | _determineDrawingFunction: function(draw) {
637 | if(typeof draw === "string")
638 | draw = Skycons[draw.toUpperCase().replace(/-/g, "_")] || null;
639 |
640 | return draw;
641 | },
642 | add: function(el, draw) {
643 | var obj;
644 |
645 | if(typeof el === "string")
646 | el = document.getElementById(el);
647 |
648 | // Does nothing if canvas name doesn't exists
649 | if(el === null || el === undefined)
650 | return;
651 |
652 | draw = this._determineDrawingFunction(draw);
653 |
654 | // Does nothing if the draw function isn't actually a function
655 | if(typeof draw !== "function")
656 | return;
657 |
658 | obj = {
659 | element: el,
660 | context: el.getContext("2d"),
661 | drawing: draw
662 | };
663 |
664 | this.list.push(obj);
665 | this.draw(obj, KEYFRAME);
666 | },
667 | set: function(el, draw) {
668 | var i;
669 |
670 | if(typeof el === "string")
671 | el = document.getElementById(el);
672 |
673 | for(i = this.list.length; i--; )
674 | if(this.list[i].element === el) {
675 | this.list[i].drawing = this._determineDrawingFunction(draw);
676 | this.draw(this.list[i], KEYFRAME);
677 | return;
678 | }
679 |
680 | this.add(el, draw);
681 | },
682 | remove: function(el) {
683 | var i;
684 |
685 | if(typeof el === "string")
686 | el = document.getElementById(el);
687 |
688 | for(i = this.list.length; i--; )
689 | if(this.list[i].element === el) {
690 | this.list.splice(i, 1);
691 | return;
692 | }
693 | },
694 | draw: function(obj, time) {
695 | var canvas = obj.context.canvas;
696 |
697 | if(this.resizeClear)
698 | canvas.width = canvas.width;
699 |
700 | else
701 | obj.context.clearRect(0, 0, canvas.width, canvas.height);
702 |
703 | obj.drawing(obj.context, time, this.color);
704 | },
705 | play: function() {
706 | var self = this;
707 |
708 | this.pause();
709 | this.interval = requestInterval(function() {
710 | var now = Date.now(),
711 | i;
712 |
713 | for(i = self.list.length; i--; )
714 | self.draw(self.list[i], now);
715 | }, 1000 / 60);
716 | },
717 | pause: function() {
718 | if(this.interval) {
719 | cancelInterval(this.interval);
720 | this.interval = null;
721 | }
722 | }
723 | };
724 |
725 | global.Skycons = Skycons;
726 | }(this));
727 |
--------------------------------------------------------------------------------