EffectHub.com: your best source for gaming

Recommendation

More Effects...

'use strict';

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

var defaults = {
  width: window.innerWidth,
  height: window.innerHeight,
  scale: 50,
  opacity: 0.5
};

var BarnsleyFern = function () {
  function BarnsleyFern(element, options) {
    _classCallCheck(this, BarnsleyFern);

Object.assign(this, defaults, options);

this.element = element;

this.init();
    this.update(options);
  }

BarnsleyFern.prototype.init = function init() {
    var canvas = this.canvas = document.querySelector(this.element);
    var context = this.context = this.canvas.getContext('2d');
    var width = canvas.width = this.width;
    var height = canvas.height = this.height;

context.translate(width / 2, height);
  };

BarnsleyFern.prototype.getRule = function getRule(rules) {
    var rulesLenght = rules.length;
    var random = Math.random();

while (rulesLenght--) {
      var rule = rules[rulesLenght];

if (random < rule.weight) {
        return rule;
      }

random -= rule.weight;
    }
  };

BarnsleyFern.prototype.render = function render(options) {
    var scale = this.scale;
    var opacity = this.opacity;

var iterations = 100;
    var x = Math.random();
    var y = Math.random();

while (iterations--) {
      var rule = this.getRule(this.rules);
      var x1 = x * rule.a + y * rule.b + rule.tx;
      var y1 = x * rule.c + y * rule.d + rule.ty;

x = x1;
      y = y1;

this.context.fillRect(x * scale, -y * scale, opacity, opacity);
    }
  };

BarnsleyFern.prototype.update = function update(options) {
    this.render(options);
    requestAnimationFrame(this.update.bind(this));
  };

return BarnsleyFern;
}();

// https://en.wikipedia.org/wiki/Barnsley_fern

var rules = [{
  a: 0.85,
  b: 0.04,
  c: -0.04,
  d: 0.85,
  tx: 0,
  ty: 1.6,
  weight: 0.65
}, {
  a: -0.15,
  b: 0.28,
  c: 0.26,
  d: 0.24,
  tx: 0,
  ty: 0.44,
  weight: 0.07
}, {
  a: 0.2,
  b: -0.26,
  c: 0.23,
  d: 0.22,
  tx: 0,
  ty: 1.6,
  weight: 0.07
}, {
  a: 0,
  b: 0,
  c: 0,
  d: 0.16,
  tx: 0,
  ty: 0,
  weight: 0.21
}];

new BarnsleyFern('.canvas', {
  rules: rules
});

CSS

HTML

Recommendation

Join Effecthub.com