EffectHub.com: your best source for gaming

Recommendation

More Effects...

'use strict';

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Wave = function () {
  function Wave(p) {
    _classCallCheck(this, Wave);

this.p = Object.assign({ radius: 10, theta: 0, thetaInc: 0.1 }, p);
    this.init(p);
  }

Wave.prototype.init = function init() {
    Object.assign(this, this.p); // re-assign
  };

Wave.prototype.calc = function calc() {
    this.val = this.radius * Math.sin(this.theta);
    this.theta += this.thetaInc;
    return this.val;
  };

Wave.prototype.calcXY = function calcXY() {
    var x = this.radius * Math.cos(this.theta),
        y = this.radius * Math.sin(this.theta);
    this.theta += this.thetaInc;
    return { x: x, y: y };
  };

return Wave;
}();

var Element = function () {
  function Element(c) {
    _classCallCheck(this, Element);

this.c = c;
    this.init();
  }

Element.prototype.init = function init() {};

Element.prototype.run = function run() {};

return Element;
}();

var BgBrush = function (_Element) {
  _inherits(BgBrush, _Element);

function BgBrush() {
    _classCallCheck(this, BgBrush);

return _possibleConstructorReturn(this, _Element.apply(this, arguments));
  }

BgBrush.prototype.init = function init() {
    this.waveA = new Wave({
      radius: Ring.halfWidth / 2 + Math.random() * (100 + window.innerWidth / 2000),
      theta: Math.PI * 2 * Math.random(),
      thetaInc: Math.random() * Math.random() * 0.005 - 0.0025
    });

this.waveArad = this.waveA.radius;
    this.waveB = new Wave({
      radius: Math.random() * 30 * 2,
      theta: Math.PI * 2 * Math.random(),
      thetaInc: this.waveA.thetaInc * 3 + Math.random() * 0.001
    });

var shade = Math.round(Math.random() * 100) + 155;
    var a = 0.01;
    if (Math.random() < 0.2) {
      shade = 0;
      a = Math.random() * 0.05 + 0.005;
    }

this.wvv = Math.random() * 30;
    this.dotSize = 1 + Math.random() * 3;
    if (Math.random() < 0.1) {
      this.dotSize = 2 + Math.random() * Math.random() * 50;
    }
    if (Math.random() < 0.5) {

this.wvv = 2;
      this.a *= 3;
      if (Math.random() < 0.5) {
        shade = 255;
      }
      if (Math.random() < 0.5) {
        shade = 0;
      }
    }
    this.waveC = new Wave({
      radius: this.wvv,
      theta: Math.PI * 2 * Math.random(),
      thetaInc: Math.random() * 0.03
    });

if (Math.random() < 0.1) {
      a = 0.02;
    }

var r = Math.round(shade - Math.random() * 30);
    var g = Math.round(shade - Math.random() * 30);
    var b = Math.round(g + Math.random() * 5 - 2);

this.ancR = r;
    this.ancG = g;
    this.ancB = b;
    this.ancA = a;

if (window.innerWidth > 1500) {
      if (Math.random() < 0.3) {
        this.dotSize *= 2 + Math.random() * 2;
      }
    }
  };

BgBrush.prototype.draw = function draw() {
    this.waveA.radius = this.waveArad + this.waveB.calc();

this.df = (this.waveA.theta % 6 - 2) / 3;
    var r = this.ancR + Math.round(this.df);
    var g = this.ancG + Math.round(this.df);
    var b = this.ancB + Math.round(this.df);
    var a = this.ancA + this.df / 50;
    this.col = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')';

var loc = this.waveA.calcXY();

this.x = Ring.halfWidth + loc.x;
    this.y = Ring.halfHeight + loc.y;
    this.c.lineWidth = this.dotSize + this.waveC.calc();
    this.c.lineCap = 'round';
    this.c.strokeStyle = this.col;
    this.c.beginPath();
    this.c.moveTo(this.x, this.y);
    this.c.lineTo(this.x, this.y + 1);
    this.c.stroke();
    if (Math.random() < 0.0005) {
      this.init();
    }
  };

return BgBrush;
}(Element);

var Ring = function () {
  function Ring() {
    _classCallCheck(this, Ring);

this.layers = [];
    this.bg = this.createLayer(true);
    this.fx = this.createLayer(true);
    this.fx.canvas.setAttribute('class', 'fx');
    this.copyBlur = this.createLayer();
    this.resize();
    this.initBgBrushes();

this.draw = this.draw.bind(this);
    this.clear();
    this.draw();
    window.addEventListener('resize', this.resize.bind(this));
  }

Ring.prototype.clear = function clear() {
    this.bg.c.fillStyle = 'rgba(6, 25, 28, 1)';
    this.bg.c.fillRect(0, 0, this.bg.canvas.width, this.bg.canvas.height);
  };

Ring.prototype.draw = function draw() {
    for (var i = 0; i < 10; i++) {
      this.bgBrushes.forEach(function (bgBrush) {
        return bgBrush.draw();
      });
    }

if (Math.random() < 0.005) {
      this.copyBlur.c.drawImage(this.bg.canvas, 0, 0);
      this.bg.c.globalAlpha = 0.1;
      var ww = Math.random() * 20 - 10;
      var hh = Math.random() * 20 - 10;
      this.bg.c.drawImage(this.copyBlur.canvas, -1, -1, this.bg.canvas.width, this.bg.canvas.height, ww, hh, this.bg.canvas.width + ww, this.bg.canvas.height + hh);
      this.bg.c.globalAlpha = 1;
    }

this.fx.c.drawImage(this.bg.canvas, 0, 0);
    requestAnimationFrame(this.draw);
  };

Ring.prototype.initBgBrushes = function initBgBrushes() {
    this.bgBrushNum = 100;
    this.bgBrushes = [];
    for (var i = 0; i < this.bgBrushNum; i++) {
      this.bgBrushes.push(new BgBrush(this.bg.c));
    }
  };

Ring.prototype.createLayer = function createLayer(add) {
    var canvas = document.createElement('canvas'),
        c = canvas.getContext('2d'),
        layer = { canvas: canvas, c: c };
    this.layers.push(layer);
    if (add) document.body.appendChild(canvas);
    return layer;
  };

Ring.prototype.resize = function resize() {
    var _this2 = this;

Ring.halfWidth = window.innerWidth / 2;
    Ring.halfHeight = window.innerHeight / 2;

this.layers.forEach(function (layer) {
      layer.canvas.width = window.innerWidth;
      layer.canvas.height = window.innerHeight;
    });
    clearTimeout(this.brushReset);
    this.brushReset = setTimeout(function () {
      if (_this2.bgBrushes != null) {
        _this2.bgBrushes.forEach(function (bgBrush) {
          return bgBrush.init();
        });
      }
    }, 100);
    this.clear();
  };

return Ring;
}();

new Ring();

CSS

HTML

Recommendation

Join Effecthub.com