EffectHub.com: your best source for gaming

Recommendation

More Effects...

JS

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            function( callback ){
              window.setTimeout(callback, 1000 / 60);
            };
  })();

// Generated by CoffeeScript 1.4.0
(function() {
  var generateLineInfo;

generateLineInfo = function(x, y) {
    return {
      x: x,
      y: y,
      xVelocity: Math.random() * 20 * (~~(Math.random() * 2) === 1 ? -1 : 1),
      yVelocity: Math.random() * 10 * (~~(Math.random() * 2) === 1 ? -1 : 1)
    };
  };

window.onload = function() {
    var colors, ctx, drawAndMove, elm, explosion, frameCount, generateExplosion, height, lines, operations, pixelDensity, tick, width;
    width = window.innerWidth;
    height = window.innerHeight;
    elm = document.createElement('canvas');
    pixelDensity = window.devicePixelRatio || 1;
    lines = [];
    colors = ["#FF7A43", "#F24B4B", "#DB5139"];
    operations = ["sin", "cos"];
    elm.style.width = width + "px";
    elm.style.height = height + "px";
    frameCount = 0;
    explosion = 60 * 5;
    elm.setAttribute('width', width * pixelDensity);
    elm.setAttribute('height', height * pixelDensity);
    ctx = elm.getContext('2d');
    document.body.appendChild(elm);
    generateExplosion = function() {
      var i, _i, _results;
      lines.length = 0;
      _results = [];
      for (i = _i = 0; _i < 50; i = ++_i) {
        _results.push(lines.push(generateLineInfo(width, height), generateLineInfo(width, height)));
      }
      return _results;
    };
    window.addEventListener('resize', function() {
      width = window.innerWidth;
      height = window.innerHeight;
      elm.setAttribute('width', width * pixelDensity);
      elm.setAttribute('height', height * pixelDensity);
      elm.style.width = width + "px";
      elm.style.height = height + "px";
      return console.log("resize");
    });
    drawAndMove = function(line, i) {
      ctx.strokeStyle = colors[i % colors.length];
      ctx.beginPath();
      ctx.moveTo(line.x, line.y);
      ctx.lineTo((line.x += line.xVelocity), line.y += Math[operations[i % operations.length]](line.x) * 10 + line.yVelocity);
      if (line.xVelocity > 0) {
        line.xVelocity -= 0.2;
      } else {
        line.xVelocity += 0.2;
      }
      ctx.stroke();
      return ctx.closePath();
    };
    tick = function() {
      var i, line, _i, _len;
      if (!(++frameCount % explosion)) {
        generateExplosion();
        explosion = (~~(Math.random() * 8) + 2) * 60;
      }
      if (frameCount % explosion < 10) {
        ctx.fillStyle = "rgba(242,72,72,0.05)";
      } else {
        ctx.fillStyle = "rgba(0,0,0,0.05)";
      }
      ctx.rect(0, 0, elm.width, elm.height);
      ctx.fill();
      for (i = _i = 0, _len = lines.length; _i < _len; i = ++_i) {
        line = lines[i];
        drawAndMove(line, i);
      }
      return requestAnimFrame(tick);
    };
    generateExplosion();
    return tick();
  };

}).call(this);

CSS

HTML

Join Effecthub.com

Working with Global Gaming Artists and Developers!

Login
Sign Up

Or Sign Up with Your Email Address: