skycons.js

(function (global) {
  'use strict';

  /* Set up a RequestAnimationFrame shim so we can animate efficiently FOR
   * GREAT JUSTICE. */
  var requestInterval, cancelInterval;

  (function () {
    var raf =
        global.requestAnimationFrame ||
        global.webkitRequestAnimationFrame ||
        global.mozRequestAnimationFrame ||
        global.oRequestAnimationFrame ||
        global.msRequestAnimationFrame,
      caf =
        global.cancelAnimationFrame ||
        global.webkitCancelAnimationFrame ||
        global.mozCancelAnimationFrame ||
        global.oCancelAnimationFrame ||
        global.msCancelAnimationFrame;

    if (raf && caf) {
      requestInterval = function (fn) {
        var handle = {
          value: null,
        };

        function loop() {
          handle.value = raf(loop);
          fn();
        }

        loop();
        return handle;
      };

      cancelInterval = function (handle) {
        caf(handle.value);
      };
    } else {
      requestInterval = setInterval;
      cancelInterval = clearInterval;
    }
  })();

  /* Catmull-rom spline stuffs. */
  /*
    function upsample(n, spline) {
      var polyline = [],
          len = spline.length,
          bx  = spline[0],
          by  = spline[1],
          cx  = spline[2],
          cy  = spline[3],
          dx  = spline[4],
          dy  = spline[5],
          i, j, ax, ay, px, qx, rx, sx, py, qy, ry, sy, t;
  
      for(i = 6; i !== spline.length; i += 2) {
        ax = bx;
        bx = cx;
        cx = dx;
        dx = spline[i    ];
        px = -0.5 * ax + 1.5 * bx - 1.5 * cx + 0.5 * dx;
        qx =        ax - 2.5 * bx + 2.0 * cx - 0.5 * dx;
        rx = -0.5 * ax            + 0.5 * cx           ;
        sx =                   bx                      ;
  
        ay = by;
        by = cy;
        cy = dy;
        dy = spline[i + 1];
        py = -0.5 * ay + 1.5 * by - 1.5 * cy + 0.5 * dy;
        qy =        ay - 2.5 * by + 2.0 * cy - 0.5 * dy;
        ry = -0.5 * ay            + 0.5 * cy           ;
        sy =                   by                      ;
  
        for(j = 0; j !== n; ++j) {
          t = j / n;
  
          polyline.push(
            ((px * t + qx) * t + rx) * t + sx,
            ((py * t + qy) * t + ry) * t + sy
          );
        }
      }
  
      polyline.push(
        px + qx + rx + sx,
        py + qy + ry + sy
      );
  
      return polyline;
    }
  
    function downsample(n, polyline) {
      var len = 0,
          i, dx, dy;
  
      for(i = 2; i !== polyline.length; i += 2) {
        dx = polyline[i    ] - polyline[i - 2];
        dy = polyline[i + 1] - polyline[i - 1];
        len += Math.sqrt(dx * dx + dy * dy);
      }
  
      len /= n;
  
      var small = [],
          target = len,
          min = 0,
          max, t;
  
      small.push(polyline[0], polyline[1]);
  
      for(i = 2; i !== polyline.length; i += 2) {
        dx = polyline[i    ] - polyline[i - 2];
        dy = polyline[i + 1] - polyline[i - 1];
        max = min + Math.sqrt(dx * dx + dy * dy);
  
        if(max > target) {
          t = (target - min) / (max - min);
  
          small.push(
            polyline[i - 2] + dx * t,
            polyline[i - 1] + dy * t
          );
  
          target += len;
        }
  
        min = max;
      }
  
      small.push(polyline[polyline.length - 2], polyline[polyline.length - 1]);
  
      return small;
    }
    */

  /* Define skycon things. */
  /* FIXME: I'm *really really* sorry that this code is so gross. Really, I am.
   * I'll try to clean it up eventually! Promise! */
  var KEYFRAME = 500,
    STROKE = 0.08,
    TAU = 2.0 * Math.PI,
    TWO_OVER_SQRT_2 = 2.0 / Math.sqrt(2);

  function circle(ctx, x, y, r) {
    ctx.beginPath();
    ctx.arc(x, y, r, 0, TAU, false);
    ctx.fill();
  }

  function line(ctx, ax, ay, bx, by) {
    ctx.beginPath();
    ctx.moveTo(ax, ay);
    ctx.lineTo(bx, by);
    ctx.stroke();
  }

  function puff(ctx, t, cx, cy, rx, ry, rmin, rmax) {
    var c = Math.cos(t * TAU),
      s = Math.sin(t * TAU);

    rmax -= rmin;

    circle(
      ctx,
      cx - s * rx,
      cy + c * ry + rmax * 0.5,
      rmin + (1 - c * 0.5) * rmax
    );
  }

  function puffs(ctx, t, cx, cy, rx, ry, rmin, rmax) {
    var i;

    for (i = 5; i--; ) puff(ctx, t + i / 5, cx, cy, rx, ry, rmin, rmax);
  }

  function cloud(ctx, t, cx, cy, cw, s, color) {
    t /= 30000;

    var a = cw * 0.21,
      b = cw * 0.12,
      c = cw * 0.24,
      d = cw * 0.28;

    ctx.fillStyle = color;
    puffs(ctx, t, cx, cy, a, b, c, d);

    ctx.globalCompositeOperation = 'destination-out';
    puffs(ctx, t, cx, cy, a, b, c - s, d - s);
    ctx.globalCompositeOperation = 'source-over';
  }

  function sun(ctx, t, cx, cy, cw, s, color) {
    t /= 120000;

    var a = cw * 0.25 - s * 0.5,
      b = cw * 0.32 + s * 0.5,
      c = cw * 0.5 - s * 0.5,
      i,
      p,
      cos,
      sin;

    ctx.strokeStyle = color;
    ctx.lineWidth = s;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    ctx.beginPath();
    ctx.arc(cx, cy, a, 0, TAU, false);
    ctx.stroke();

    for (i = 8; i--; ) {
      p = (t + i / 8) * TAU;
      cos = Math.cos(p);
      sin = Math.sin(p);
      line(ctx, cx + cos * b, cy + sin * b, cx + cos * c, cy + sin * c);
    }
  }

  function moon(ctx, t, cx, cy, cw, s, color) {
    t /= 15000;

    var a = cw * 0.29 - s * 0.5,
      b = cw * 0.05,
      c = Math.cos(t * TAU),
      p = (c * TAU) / -16;

    ctx.strokeStyle = color;
    ctx.lineWidth = s;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    cx += c * b;

    ctx.beginPath();
    ctx.arc(cx, cy, a, p + TAU / 8, p + (TAU * 7) / 8, false);
    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
    );
    ctx.closePath();
    ctx.stroke();
  }

  function rain(ctx, t, cx, cy, cw, s, color) {
    t /= 1350;

    var a = cw * 0.16,
      b = (TAU * 11) / 12,
      c = (TAU * 7) / 12,
      i,
      p,
      x,
      y;

    ctx.fillStyle = color;

    for (i = 4; i--; ) {
      p = (t + i / 4) % 1;
      x = cx + ((i - 1.5) / 1.5) * (i === 1 || i === 2 ? -1 : 1) * a;
      y = cy + p * p * cw;
      ctx.beginPath();
      ctx.moveTo(x, y - s * 1.5);
      ctx.arc(x, y, s * 0.75, b, c, false);
      ctx.fill();
    }
  }

  function sleet(ctx, t, cx, cy, cw, s, color) {
    t /= 750;

    var a = cw * 0.1875,
      i,
      p,
      x,
      y;

    ctx.strokeStyle = color;
    ctx.lineWidth = s * 0.5;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    for (i = 4; i--; ) {
      p = (t + i / 4) % 1;
      x =
        Math.floor(cx + ((i - 1.5) / 1.5) * (i === 1 || i === 2 ? -1 : 1) * a) +
        0.5;
      y = cy + p * cw;
      line(ctx, x, y - s * 1.5, x, y + s * 1.5);
    }
  }

  function snow(ctx, t, cx, cy, cw, s, color) {
    t /= 3000;

    var a = cw * 0.16,
      b = s * 0.75,
      u = t * TAU * 0.7,
      ux = Math.cos(u) * b,
      uy = Math.sin(u) * b,
      v = u + TAU / 3,
      vx = Math.cos(v) * b,
      vy = Math.sin(v) * b,
      w = u + (TAU * 2) / 3,
      wx = Math.cos(w) * b,
      wy = Math.sin(w) * b,
      i,
      p,
      x,
      y;

    ctx.strokeStyle = color;
    ctx.lineWidth = s * 0.5;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    for (i = 4; i--; ) {
      p = (t + i / 4) % 1;
      x = cx + Math.sin((p + i / 4) * TAU) * a;
      y = cy + p * cw;

      line(ctx, x - ux, y - uy, x + ux, y + uy);
      line(ctx, x - vx, y - vy, x + vx, y + vy);
      line(ctx, x - wx, y - wy, x + wx, y + wy);
    }
  }

  function fogbank(ctx, t, cx, cy, cw, s, color) {
    t /= 30000;

    var a = cw * 0.21,
      b = cw * 0.06,
      c = cw * 0.21,
      d = cw * 0.28;

    ctx.fillStyle = color;
    puffs(ctx, t, cx, cy, a, b, c, d);

    ctx.globalCompositeOperation = 'destination-out';
    puffs(ctx, t, cx, cy, a, b, c - s, d - s);
    ctx.globalCompositeOperation = 'source-over';
  }

  /*
    var WIND_PATHS = [
          downsample(63, upsample(8, [
            -1.00, -0.28,
            -0.75, -0.18,
            -0.50,  0.12,
            -0.20,  0.12,
            -0.04, -0.04,
            -0.07, -0.18,
            -0.19, -0.18,
            -0.23, -0.05,
            -0.12,  0.11,
             0.02,  0.16,
             0.20,  0.15,
             0.50,  0.07,
             0.75,  0.18,
             1.00,  0.28
          ])),
          downsample(31, upsample(16, [
            -1.00, -0.10,
            -0.75,  0.00,
            -0.50,  0.10,
            -0.25,  0.14,
             0.00,  0.10,
             0.25,  0.00,
             0.50, -0.10,
             0.75, -0.14,
             1.00, -0.10
          ]))
        ];
    */

  var WIND_PATHS = [
      [
        -0.75, -0.18, -0.7219, -0.1527, -0.6971, -0.1225, -0.6739, -0.091,
        -0.6516, -0.0588, -0.6298, -0.0262, -0.6083, 0.0065, -0.5868, 0.0396,
        -0.5643, 0.0731, -0.5372, 0.1041, -0.5033, 0.1259, -0.4662, 0.1406,
        -0.4275, 0.1493, -0.3881, 0.153, -0.3487, 0.1526, -0.3095, 0.1488,
        -0.2708, 0.1421, -0.2319, 0.1342, -0.1943, 0.1217, -0.16, 0.1025,
        -0.129, 0.0785, -0.1012, 0.0509, -0.0764, 0.0206, -0.0547, -0.012,
        -0.0378, -0.0472, -0.0324, -0.0857, -0.0389, -0.1241, -0.0546, -0.1599,
        -0.0814, -0.1876, -0.1193, -0.1964, -0.1582, -0.1935, -0.1931, -0.1769,
        -0.2157, -0.1453, -0.229, -0.1085, -0.2327, -0.0697, -0.224, -0.0317,
        -0.2064, 0.0033, -0.1853, 0.0362, -0.1613, 0.0672, -0.135, 0.0961,
        -0.1051, 0.1213, -0.0706, 0.1397, -0.0332, 0.1512, 0.0053, 0.158,
        0.0442, 0.1624, 0.0833, 0.1636, 0.1224, 0.1615, 0.1613, 0.1565, 0.1999,
        0.15, 0.2378, 0.1402, 0.2749, 0.1279, 0.3118, 0.1147, 0.3487, 0.1015,
        0.3858, 0.0892, 0.4236, 0.0787, 0.4621, 0.0715, 0.5012, 0.0702, 0.5398,
        0.0766, 0.5768, 0.089, 0.6123, 0.1055, 0.6466, 0.1244, 0.6805, 0.144,
        0.7147, 0.163, 0.75, 0.18,
      ],
      [
        -0.75, 0.0, -0.7033, 0.0195, -0.6569, 0.0399, -0.6104, 0.06, -0.5634,
        0.0789, -0.5155, 0.0954, -0.4667, 0.1089, -0.4174, 0.1206, -0.3676,
        0.1299, -0.3174, 0.1365, -0.2669, 0.1398, -0.2162, 0.1391, -0.1658,
        0.1347, -0.1157, 0.1271, -0.0661, 0.1169, -0.017, 0.1046, 0.0316,
        0.0903, 0.0791, 0.0728, 0.1259, 0.0534, 0.1723, 0.0331, 0.2188, 0.0129,
        0.2656, -0.0064, 0.3122, -0.0263, 0.3586, -0.0466, 0.4052, -0.0665,
        0.4525, -0.0847, 0.5007, -0.1002, 0.5497, -0.113, 0.5991, -0.124,
        0.6491, -0.1325, 0.6994, -0.138, 0.75, -0.14,
      ],
    ],
    WIND_OFFSETS = [
      {
        start: 0.36,
        end: 0.11,
      },
      {
        start: 0.56,
        end: 0.16,
      },
    ];

  function leaf(ctx, t, x, y, cw, s, color) {
    var a = cw / 8,
      b = a / 3,
      c = 2 * b,
      d = (t % 1) * TAU,
      e = Math.cos(d),
      f = Math.sin(d);

    ctx.fillStyle = color;
    ctx.strokeStyle = color;
    ctx.lineWidth = s;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    ctx.beginPath();
    ctx.arc(x, y, a, d, d + Math.PI, false);
    ctx.arc(x - b * e, y - b * f, c, d + Math.PI, d, false);
    ctx.arc(x + c * e, y + c * f, b, d + Math.PI, d, true);
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fill();
    ctx.globalCompositeOperation = 'source-over';
    ctx.stroke();
  }

  function swoosh(ctx, t, cx, cy, cw, s, index, total, color) {
    t /= 2500;

    var path = WIND_PATHS[index],
      a = (t + index - WIND_OFFSETS[index].start) % total,
      c = (t + index - WIND_OFFSETS[index].end) % total,
      e = (t + index) % total,
      b,
      d,
      f,
      i;

    ctx.strokeStyle = color;
    ctx.lineWidth = s;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    if (a < 1) {
      ctx.beginPath();

      a *= path.length / 2 - 1;
      b = Math.floor(a);
      a -= b;
      b *= 2;
      b += 2;

      ctx.moveTo(
        cx + (path[b - 2] * (1 - a) + path[b] * a) * cw,
        cy + (path[b - 1] * (1 - a) + path[b + 1] * a) * cw
      );

      if (c < 1) {
        c *= path.length / 2 - 1;
        d = Math.floor(c);
        c -= d;
        d *= 2;
        d += 2;

        for (i = b; i !== d; i += 2)
          ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);

        ctx.lineTo(
          cx + (path[d - 2] * (1 - c) + path[d] * c) * cw,
          cy + (path[d - 1] * (1 - c) + path[d + 1] * c) * cw
        );
      } else
        for (i = b; i !== path.length; i += 2)
          ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);

      ctx.stroke();
    } else if (c < 1) {
      ctx.beginPath();

      c *= path.length / 2 - 1;
      d = Math.floor(c);
      c -= d;
      d *= 2;
      d += 2;

      ctx.moveTo(cx + path[0] * cw, cy + path[1] * cw);

      for (i = 2; i !== d; i += 2)
        ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw);

      ctx.lineTo(
        cx + (path[d - 2] * (1 - c) + path[d] * c) * cw,
        cy + (path[d - 1] * (1 - c) + path[d + 1] * c) * cw
      );

      ctx.stroke();
    }

    if (e < 1) {
      e *= path.length / 2 - 1;
      f = Math.floor(e);
      e -= f;
      f *= 2;
      f += 2;

      leaf(
        ctx,
        t,
        cx + (path[f - 2] * (1 - e) + path[f] * e) * cw,
        cy + (path[f - 1] * (1 - e) + path[f + 1] * e) * cw,
        cw,
        s,
        color
      );
    }
  }

  var Skycons = function (opts) {
    this.list = [];
    this.interval = null;
    this.color = opts && opts.color ? opts.color : 'black';
    this.resizeClear = !!(opts && opts.resizeClear);
    this.loadPic = 0;
  };
  // ****************************************************************************************************** METHODS FOR ICONS

  Skycons.CLEAR_DAY = function (ctx, t, color) {
    var w = ctx.canvas.width,
      h = ctx.canvas.height,
      s = Math.min(w, h);
    this.loadPic = 0;
    sun(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
  };

  Skycons.CLEAR_NIGHT = function (ctx, t, color) {
    var w = ctx.canvas.width,
      h = ctx.canvas.height,
      s = Math.min(w, h);
    this.loadPic = 1;
    moon(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
  };

  Skycons.PARTLY_CLOUDY_DAY = function (ctx, t, color) {
    var w = ctx.canvas.width,
      h = ctx.canvas.height,
      s = Math.min(w, h);
    this.loadPic = 2;
    sun(ctx, t, w * 0.625, h * 0.375, s * 0.75, s * STROKE, color);
    cloud(ctx, t, w * 0.375, h * 0.625, s * 0.75, s * STROKE, color);
  };

  Skycons.PARTLY_CLOUDY_NIGHT = function (ctx, t, color) {
    var w = ctx.canvas.width,
      h = ctx.canvas.height,
      s = Math.min(w, h);
    this.loadPic = 3;
    moon(ctx, t, w * 0.667, h * 0.375, s * 0.75, s * STROKE, color);
    cloud(ctx, t, w * 0.375, h * 0.625, s * 0.75, s * STROKE, color);
  };

  Skycons.CLOUDY = function (ctx, t, color) {
    var w = ctx.canvas.width,
      h = ctx.canvas.height,
      s = Math.min(w, h);
    this.loadPic = 4;
    cloud(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color);
  };

  Skycons.RAIN = function (ctx, t, color) {
    var w = ctx.canvas.width,
      h = ctx.canvas.height,
      s = Math.min(w, h);
    this.loadPic = 5;
    rain(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
    cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
  };

  Skycons.SLEET = function (ctx, t, color) {
    var w = ctx.canvas.width,
      h = ctx.canvas.height,
      s = Math.min(w, h);
    this.loadPic = 6;
    sleet(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
    cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
  };

  Skycons.SNOW = function (ctx, t, color) {
    var w = ctx.canvas.width,
      h = ctx.canvas.height,
      s = Math.min(w, h);
    this.loadPic = 7;
    snow(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
    cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color);
  };

  Skycons.WIND = function (ctx, t, color) {
    var w = ctx.canvas.width,
      h = ctx.canvas.height,
      s = Math.min(w, h);
    this.loadPic = 8;
    swoosh(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, 0, 2, color);
    swoosh(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, 1, 2, color);
  };

  Skycons.FOG = function (ctx, t, color) {
    var w = ctx.canvas.width,
      h = ctx.canvas.height,
      s = Math.min(w, h),
      k = s * STROKE;
    this.loadPic = 9;

    fogbank(ctx, t, w * 0.5, h * 0.32, s * 0.75, k, color);
    // ****************************************************************************************************** END METHODS FOR ICONS
    t /= 5000;

    var a = Math.cos(t * TAU) * s * 0.02,
      b = Math.cos((t + 0.25) * TAU) * s * 0.02,
      c = Math.cos((t + 0.5) * TAU) * s * 0.02,
      d = Math.cos((t + 0.75) * TAU) * s * 0.02,
      n = h * 0.936,
      e = Math.floor(n - k * 0.5) + 0.5,
      f = Math.floor(n - k * 2.5) + 0.5;

    ctx.strokeStyle = color;
    ctx.lineWidth = k;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    line(ctx, a + w * 0.2 + k * 0.5, e, b + w * 0.8 - k * 0.5, e);
    line(ctx, c + w * 0.2 + k * 0.5, f, d + w * 0.8 - k * 0.5, f);
  };

  Skycons.prototype = {
    _determineDrawingFunction: function (draw) {
      if (typeof draw === 'string')
        draw = Skycons[draw.toUpperCase().replace(/-/g, '_')] || null;

      return draw;
    },
    add: function (el, draw) {
      var obj;

      if (typeof el === 'string') el = document.getElementById(el);

      // Does nothing if canvas name doesn't exists
      if (el === null || el === undefined) return;

      draw = this._determineDrawingFunction(draw);

      // Does nothing if the draw function isn't actually a function
      if (typeof draw !== 'function') return;

      obj = {
        element: el,
        context: el.getContext('2d'),
        drawing: draw,
      };

      this.list.push(obj);
      this.draw(obj, KEYFRAME);
    },
    set: function (el, draw) {
      var i;

      if (typeof el === 'string') el = document.getElementById(el);

      for (i = this.list.length; i--; )
        if (this.list[i].element === el) {
          this.list[i].drawing = this._determineDrawingFunction(draw);
          this.draw(this.list[i], KEYFRAME);
          return;
        }

      this.add(el, draw);
    },
    remove: function (el) {
      var i;

      if (typeof el === 'string') el = document.getElementById(el);

      for (i = this.list.length; i--; )
        if (this.list[i].element === el) {
          this.list.splice(i, 1);
          return;
        }
    },
    draw: function (obj, time) {
      var canvas = obj.context.canvas;

      if (this.resizeClear) canvas.width = canvas.width;
      else obj.context.clearRect(0, 0, canvas.width, canvas.height);

      obj.drawing(obj.context, time, this.color);
    },
    play: function () {
      var self = this;

      this.pause();
      this.interval = requestInterval(function () {
        var now = Date.now(),
          i;

        for (i = self.list.length; i--; ) self.draw(self.list[i], now);
      }, 1000 / 60);
    },
    pause: function () {
      if (this.interval) {
        cancelInterval(this.interval);
        this.interval = null;
      }
    },
  };

  global.Skycons = Skycons;
})(this);