JAVASCRIPT   30

skycons js

Guest on 29th July 2022 01:27:32 PM

  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, delay) {
  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.       TWO_PI = 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, TWO_PI, 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 * TWO_PI),
  161.         s = Math.sin(t * TWO_PI);
  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, TWO_PI, false);
  211.     ctx.stroke();
  212.  
  213.     for(i = 8; i--; ) {
  214.       p = (t + i / 8) * TWO_PI;
  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 * TWO_PI),
  227.         p = c * TWO_PI / -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 + TWO_PI / 8, p + TWO_PI * 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 + TWO_PI * 5 / 8, p + TWO_PI * 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 = TWO_PI * 11 / 12,
  248.         c = TWO_PI *  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.         b = TWO_PI * 11 / 12,
  269.         c = TWO_PI *  7 / 12,
  270.         i, p, x, y;
  271.  
  272.     ctx.strokeStyle = color;
  273.     ctx.lineWidth = s * 0.5;
  274.     ctx.lineCap = "round";
  275.     ctx.lineJoin = "round";
  276.  
  277.     for(i = 4; i--; ) {
  278.       p = (t + i / 4) % 1;
  279.       x = Math.floor(cx + ((i - 1.5) / 1.5) * (i === 1 || i === 2 ? -1 : 1) * a) + 0.5;
  280.       y = cy + p * cw;
  281.       line(ctx, x, y - s * 1.5, x, y + s * 1.5);
  282.     }
  283.   }
  284.  
  285.   function snow(ctx, t, cx, cy, cw, s, color) {
  286.     t /= 3000;
  287.  
  288.     var a  = cw * 0.16,
  289.         b  = s * 0.75,
  290.         u  = t * TWO_PI * 0.7,
  291.         ux = Math.cos(u) * b,
  292.         uy = Math.sin(u) * b,
  293.         v  = u + TWO_PI / 3,
  294.         vx = Math.cos(v) * b,
  295.         vy = Math.sin(v) * b,
  296.         w  = u + TWO_PI * 2 / 3,
  297.         wx = Math.cos(w) * b,
  298.         wy = Math.sin(w) * b,
  299.         i, p, x, y;
  300.  
  301.     ctx.strokeStyle = color;
  302.     ctx.lineWidth = s * 0.5;
  303.     ctx.lineCap = "round";
  304.     ctx.lineJoin = "round";
  305.  
  306.     for(i = 4; i--; ) {
  307.       p = (t + i / 4) % 1;
  308.       x = cx + Math.sin((p + i / 4) * TWO_PI) * a;
  309.       y = cy + p * cw;
  310.  
  311.       line(ctx, x - ux, y - uy, x + ux, y + uy);
  312.       line(ctx, x - vx, y - vy, x + vx, y + vy);
  313.       line(ctx, x - wx, y - wy, x + wx, y + wy);
  314.     }
  315.   }
  316.  
  317.   function fogbank(ctx, t, cx, cy, cw, s, color) {
  318.     t /= 30000;
  319.  
  320.     var a = cw * 0.21,
  321.         b = cw * 0.06,
  322.         c = cw * 0.21,
  323.         d = cw * 0.28;
  324.  
  325.     ctx.fillStyle = color;
  326.     puffs(ctx, t, cx, cy, a, b, c, d);
  327.  
  328.     ctx.globalCompositeOperation = 'destination-out';
  329.     puffs(ctx, t, cx, cy, a, b, c - s, d - s);
  330.     ctx.globalCompositeOperation = 'source-over';
  331.   }
  332.  
  333.   /*
  334.   var WIND_PATHS = [
  335.         downsample(63, upsample(8, [
  336.           -1.00, -0.28,
  337.           -0.75, -0.18,
  338.           -0.50,  0.12,
  339.           -0.20,  0.12,
  340.           -0.04, -0.04,
  341.           -0.07, -0.18,
  342.           -0.19, -0.18,
  343.           -0.23, -0.05,
  344.           -0.12,  0.11,
  345.            0.02,  0.16,
  346.            0.20,  0.15,
  347.            0.50,  0.07,
  348.            0.75,  0.18,
  349.            1.00,  0.28
  350.         ])),
  351.         downsample(31, upsample(16, [
  352.           -1.00, -0.10,
  353.           -0.75,  0.00,
  354.           -0.50,  0.10,
  355.           -0.25,  0.14,
  356.            0.00,  0.10,
  357.            0.25,  0.00,
  358.            0.50, -0.10,
  359.            0.75, -0.14,
  360.            1.00, -0.10
  361.         ]))
  362.       ];
  363.   */
  364.  
  365.   var WIND_PATHS = [
  366.         [
  367.           -0.7500, -0.1800, -0.7219, -0.1527, -0.6971, -0.1225,
  368.           -0.6739, -0.0910, -0.6516, -0.0588, -0.6298, -0.0262,
  369.           -0.6083,  0.0065, -0.5868,  0.0396, -0.5643,  0.0731,
  370.           -0.5372,  0.1041, -0.5033,  0.1259, -0.4662,  0.1406,
  371.           -0.4275,  0.1493, -0.3881,  0.1530, -0.3487,  0.1526,
  372.           -0.3095,  0.1488, -0.2708,  0.1421, -0.2319,  0.1342,
  373.           -0.1943,  0.1217, -0.1600,  0.1025, -0.1290,  0.0785,
  374.           -0.1012,  0.0509, -0.0764,  0.0206, -0.0547, -0.0120,
  375.           -0.0378, -0.0472, -0.0324, -0.0857, -0.0389, -0.1241,
  376.           -0.0546, -0.1599, -0.0814, -0.1876, -0.1193, -0.1964,
  377.           -0.1582, -0.1935, -0.1931, -0.1769, -0.2157, -0.1453,
  378.           -0.2290, -0.1085, -0.2327, -0.0697, -0.2240, -0.0317,
  379.           -0.2064,  0.0033, -0.1853,  0.0362, -0.1613,  0.0672,
  380.           -0.1350,  0.0961, -0.1051,  0.1213, -0.0706,  0.1397,
  381.           -0.0332,  0.1512,  0.0053,  0.1580,  0.0442,  0.1624,
  382.            0.0833,  0.1636,  0.1224,  0.1615,  0.1613,  0.1565,
  383.            0.1999,  0.1500,  0.2378,  0.1402,  0.2749,  0.1279,
  384.            0.3118,  0.1147,  0.3487,  0.1015,  0.3858,  0.0892,
  385.            0.4236,  0.0787,  0.4621,  0.0715,  0.5012,  0.0702,
  386.            0.5398,  0.0766,  0.5768,  0.0890,  0.6123,  0.1055,
  387.            0.6466,  0.1244,  0.6805,  0.1440,  0.7147,  0.1630,
  388.            0.7500,  0.1800
  389.         ],
  390.         [
  391.           -0.7500,  0.0000, -0.7033,  0.0195, -0.6569,  0.0399,
  392.           -0.6104,  0.0600, -0.5634,  0.0789, -0.5155,  0.0954,
  393.           -0.4667,  0.1089, -0.4174,  0.1206, -0.3676,  0.1299,
  394.           -0.3174,  0.1365, -0.2669,  0.1398, -0.2162,  0.1391,
  395.           -0.1658,  0.1347, -0.1157,  0.1271, -0.0661,  0.1169,
  396.           -0.0170,  0.1046,  0.0316,  0.0903,  0.0791,  0.0728,
  397.            0.1259,  0.0534,  0.1723,  0.0331,  0.2188,  0.0129,
  398.            0.2656, -0.0064,  0.3122, -0.0263,  0.3586, -0.0466,
  399.            0.4052, -0.0665,  0.4525, -0.0847,  0.5007, -0.1002,
  400.            0.5497, -0.1130,  0.5991, -0.1240,  0.6491, -0.1325,
  401.            0.6994, -0.1380,  0.7500, -0.1400
  402.         ]
  403.       ],
  404.       WIND_OFFSETS = [
  405.         {start: 0.36, end: 0.11},
  406.         {start: 0.56, end: 0.16}
  407.       ];
  408.  
  409.   function leaf(ctx, t, x, y, cw, s, color) {
  410.     var a = cw / 8,
  411.         b = a / 3,
  412.         c = 2 * b,
  413.         d = (t % 1) * TWO_PI,
  414.         e = Math.cos(d),
  415.         f = Math.sin(d);
  416.  
  417.     ctx.fillStyle = color;
  418.     ctx.strokeStyle = color;
  419.     ctx.lineWidth = s;
  420.     ctx.lineCap = "round";
  421.     ctx.lineJoin = "round";
  422.  
  423.     ctx.beginPath();
  424.     ctx.arc(x        , y        , a, d          , d + Math.PI, false);
  425.     ctx.arc(x - b * e, y - b * f, c, d + Math.PI, d          , false);
  426.     ctx.arc(x + c * e, y + c * f, b, d + Math.PI, d          , true );
  427.     ctx.globalCompositeOperation = 'destination-out';
  428.     ctx.fill();
  429.     ctx.globalCompositeOperation = 'source-over';
  430.     ctx.stroke();
  431.   }
  432.  
  433.   function swoosh(ctx, t, cx, cy, cw, s, index, total, color) {
  434.     t /= 2500;
  435.  
  436.     var path = WIND_PATHS[index],
  437.         a = (t + index - WIND_OFFSETS[index].start) % total,
  438.         c = (t + index - WIND_OFFSETS[index].end  ) % total,
  439.         e = (t + index                            ) % total,
  440.         b, d, f, i;
  441.  
  442.     ctx.strokeStyle = color;
  443.     ctx.lineWidth = s;
  444.     ctx.lineCap = "round";
  445.     ctx.lineJoin = "round";
  446.  
  447.     if(a < 1) {
  448.       ctx.beginPath();
  449.  
  450.       a *= path.length / 2 - 1;
  451.       b  = Math.floor(a);
  452.       a -= b;
  453.       b *= 2;
  454.       b += 2;
  455.  
  456.       ctx.moveTo(
  457.         cx + (path[b - 2] * (1 - a) + path[b    ] * a) * cw,
  458.         cy + (path[b - 1] * (1 - a) + path[b + 1] * a) * cw
  459.       );
  460.  
  461.       if(c < 1) {
  462.         c *= path.length / 2 - 1;
  463.         d  = Math.floor(c);
  464.         c -= d;
  465.         d *= 2;
  466.         d += 2;
  467.  
  468.         for(i = b; i !== d; i += 2)
  469.           ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);
  470.  
  471.         ctx.lineTo(
  472.           cx + (path[d - 2] * (1 - c) + path[d    ] * c) * cw,
  473.           cy + (path[d - 1] * (1 - c) + path[d + 1] * c) * cw
  474.         );
  475.       }
  476.  
  477.       else
  478.         for(i = b; i !== path.length; i += 2)
  479.           ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);
  480.  
  481.       ctx.stroke();
  482.     }
  483.  
  484.     else if(c < 1) {
  485.       ctx.beginPath();
  486.  
  487.       c *= path.length / 2 - 1;
  488.       d  = Math.floor(c);
  489.       c -= d;
  490.       d *= 2;
  491.       d += 2;
  492.  
  493.       ctx.moveTo(cx + path[0] * cw, cy + path[1] * cw);
  494.  
  495.       for(i = 2; i !== d; i += 2)
  496.         ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);
  497.  
  498.       ctx.lineTo(
  499.         cx + (path[d - 2] * (1 - c) + path[d    ] * c) * cw,
  500.         cy + (path[d - 1] * (1 - c) + path[d + 1] * c) * cw
  501.       );
  502.  
  503.       ctx.stroke();
  504.     }
  505.  
  506.     if(e < 1) {
  507.       e *= path.length / 2 - 1;
  508.       f  = Math.floor(e);
  509.       e -= f;
  510.       f *= 2;
  511.       f += 2;
  512.  
  513.       leaf(
  514.         ctx,
  515.         t,
  516.         cx + (path[f - 2] * (1 - e) + path[f    ] * e) * cw,
  517.         cy + (path[f - 1] * (1 - e) + path[f + 1] * e) * cw,
  518.         cw,
  519.         s,
  520.         color
  521.       );
  522.     }
  523.   }
  524.  
  525.   var Skycons = function(opts) {
  526.         this.list        = [];
  527.         this.interval    = null;
  528.         this.color       = opts && opts.color ? opts.color : "black";
  529.         this.resizeClear = !!(opts && opts.resizeClear);
  530.       };
  531.  
  532.   Skycons.CLEAR_DAY = function(ctx, t, color) {
  533.     var w = ctx.canvas.width,
  534.         h = ctx.canvas.height,
  535.         s = Math.min(w, h);
  536.  
  537.     sun(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
  538.   };
  539.  
  540.   Skycons.CLEAR_NIGHT = function(ctx, t, color) {
  541.     var w = ctx.canvas.width,
  542.         h = ctx.canvas.height,
  543.         s = Math.min(w, h);
  544.  
  545.     moon(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
  546.   };
  547.  
  548.   Skycons.PARTLY_CLOUDY_DAY = function(ctx, t, color) {
  549.     var w = ctx.canvas.width,
  550.         h = ctx.canvas.height,
  551.         s = Math.min(w, h);
  552.  
  553.     sun(ctx, t, w * 0.625, h * 0.375, s * 0.75, s * STROKE, color);
  554.     cloud(ctx, t, w * 0.375, h * 0.625, s * 0.75, s * STROKE, color);
  555.   };
  556.  
  557.   Skycons.PARTLY_CLOUDY_NIGHT = function(ctx, t, color) {
  558.     var w = ctx.canvas.width,
  559.         h = ctx.canvas.height,
  560.         s = Math.min(w, h);
  561.  
  562.     moon(ctx, t, w * 0.667, h * 0.375, s * 0.75, s * STROKE, color);
  563.     cloud(ctx, t, w * 0.375, h * 0.625, s * 0.75, s * STROKE, color);
  564.   };
  565.  
  566.   Skycons.CLOUDY = function(ctx, t, color) {
  567.     var w = ctx.canvas.width,
  568.         h = ctx.canvas.height,
  569.         s = Math.min(w, h);
  570.  
  571.     cloud(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
  572.   };
  573.  
  574.   Skycons.RAIN = function(ctx, t, color) {
  575.     var w = ctx.canvas.width,
  576.         h = ctx.canvas.height,
  577.         s = Math.min(w, h);
  578.  
  579.     rain(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
  580.     cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
  581.   };
  582.  
  583.   Skycons.SLEET = function(ctx, t, color) {
  584.     var w = ctx.canvas.width,
  585.         h = ctx.canvas.height,
  586.         s = Math.min(w, h);
  587.  
  588.     sleet(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
  589.     cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
  590.   };
  591.  
  592.   Skycons.SNOW = function(ctx, t, color) {
  593.     var w = ctx.canvas.width,
  594.         h = ctx.canvas.height,
  595.         s = Math.min(w, h);
  596.  
  597.     snow(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
  598.     cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
  599.   };
  600.  
  601.   Skycons.WIND = function(ctx, t, color) {
  602.     var w = ctx.canvas.width,
  603.         h = ctx.canvas.height,
  604.         s = Math.min(w, h);
  605.  
  606.     swoosh(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, 0, 2, color);
  607.     swoosh(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, 1, 2, color);
  608.   };
  609.  
  610.   Skycons.FOG = function(ctx, t, color) {
  611.     var w = ctx.canvas.width,
  612.         h = ctx.canvas.height,
  613.         s = Math.min(w, h),
  614.         k = s * STROKE;
  615.  
  616.     fogbank(ctx, t, w * 0.5, h * 0.32, s * 0.75, k, color);
  617.  
  618.     t /= 5000;
  619.  
  620.     var a = Math.cos((t       ) * TWO_PI) * s * 0.02,
  621.         b = Math.cos((t + 0.25) * TWO_PI) * s * 0.02,
  622.         c = Math.cos((t + 0.50) * TWO_PI) * s * 0.02,
  623.         d = Math.cos((t + 0.75) * TWO_PI) * s * 0.02,
  624.         n = h * 0.936,
  625.         e = Math.floor(n - k * 0.5) + 0.5,
  626.         f = Math.floor(n - k * 2.5) + 0.5;
  627.  
  628.     ctx.strokeStyle = color;
  629.     ctx.lineWidth = k;
  630.     ctx.lineCap = "round";
  631.     ctx.lineJoin = "round";
  632.  
  633.     line(ctx, a + w * 0.2 + k * 0.5, e, b + w * 0.8 - k * 0.5, e);
  634.     line(ctx, c + w * 0.2 + k * 0.5, f, d + w * 0.8 - k * 0.5, f);
  635.   };
  636.  
  637.   Skycons.prototype = {
  638.     add: function(el, draw) {
  639.       var obj;
  640.  
  641.       if(typeof el === "string")
  642.         el = document.getElementById(el);
  643.  
  644.       // Does nothing if canvas name doesn't exists
  645.       if(el === null)
  646.         return;
  647.  
  648.       if(typeof draw === "string") {
  649.         draw = draw.toUpperCase().replace(/-/g, "_");
  650.         draw = Skycons.hasOwnProperty(draw) ? Skycons[draw] : null;
  651.       }
  652.  
  653.       // Does nothing if the draw function isn't actually a function
  654.       if(typeof draw !== "function")
  655.         return;
  656.  
  657.       obj = {
  658.         element: el,
  659.         context: el.getContext("2d"),
  660.         drawing: draw
  661.       };
  662.  
  663.       this.list.push(obj);
  664.       this.draw(obj, KEYFRAME);
  665.     },
  666.     set: function(el, draw) {
  667.       var i;
  668.  
  669.       if(typeof el === "string")
  670.         el = document.getElementById(el);
  671.  
  672.       for(i = this.list.length; i--; )
  673.         if(this.list[i].element === el) {
  674.           this.list[i].drawing = draw;
  675.           this.draw(this.list[i], KEYFRAME);
  676.           return;
  677.         }
  678.  
  679.       this.add(el, draw);
  680.     },
  681.     remove: function(el) {
  682.       var i;
  683.  
  684.       if(typeof el === "string")
  685.         el = document.getElementById(el);
  686.  
  687.       for(i = this.list.length; i--; )
  688.         if(this.list[i].element === el) {
  689.           this.list.splice(i, 1);
  690.           return;
  691.         }
  692.     },
  693.     draw: function(obj, time) {
  694.       var canvas = obj.context.canvas;
  695.  
  696.       if(this.resizeClear)
  697.         canvas.width = canvas.width;
  698.  
  699.       else
  700.         obj.context.clearRect(0, 0, canvas.width, canvas.height);
  701.  
  702.       obj.drawing(obj.context, time, this.color);
  703.     },
  704.     play: function() {
  705.       var self = this;
  706.  
  707.       this.pause();
  708.       this.interval = requestInterval(function() {
  709.         var now = Date.now(),
  710.             i;
  711.  
  712.         for(i = self.list.length; i--; )
  713.           self.draw(self.list[i], now);
  714.       }, 1000 / 60);
  715.     },
  716.     pause: function() {
  717.       var i;
  718.  
  719.       if(this.interval) {
  720.         cancelInterval(this.interval);
  721.         this.interval = null;
  722.       }
  723.     }
  724.   };
  725.  
  726.   global.Skycons = Skycons;
  727. }(this));

Raw Paste


Login or Register to edit or fork this paste. It's free.