EffectHub.com: your best source for gaming

Recommendation

More Effects...

var canvas = hexCanvas, w, h, ctx, hexGrid, rows, cols;
var nextT = 0, fadeT = 0, hue = 0;
var count = 0;
var watchList = [];
var c = createjs;
var radius = 12;

function init() {
  nextT = 0, fadeT = 0, hue = 0;
  count = 0;
  watchList = [];
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  
  ctx = canvas.getContext("2d");
  hexGrid = buildGrid(w, h, radius);
  
}

// neighbors:
  for (var i = 0, l = grid.length; i < l; i++) {
    hex = grid[i];
    var off = hex.row % 2;
    var col = hex.col;
    hex.neighbors = [
      grid[i - cols * 2],
      col + off < cols ? grid[i - cols + off] : null,
      col + off < cols ? grid[i + cols + off] : null,
      grid[i + cols * 2],
      col + off > 0 ? grid[i + cols - 1 + off] : null,
      col + off > 0 ? grid[i - cols - 1 + off] : null
    ];
  }

return grid;
}

function tick(evt) {
  var delta = evt.delta, grid = hexGrid;
  var t = getTime();
  for (var i = watchList.length - 1; i >= 0; i--) {
    var hex = watchList[i];
    if (hex.t < t) {
      watchList.splice(i, 1);
      trigger(hex, t);

}
  }

if (fadeT < t) {
    ctx.globalCompositeOperation = "destination-in";
    ctx.fillStyle = c.Graphics.getHSL(0, 0, 100, 0.94);
    ctx.fillRect(0, 0, w, h);
    ctx.globalCompositeOperation = "lighter"; //"source-over";
    fadeT = t + 100;
  }

if (t > nextT) {
    hex = hexGrid[Rnd.integer(cols) - cols + cols * rows]; //
    hex.t = getTime() + Rnd.float(100, 200);
    hex.from = 3;//Rnd.integer(6);
    hex.hue = Rnd.float(-35, 50) * 0.3 + 0;
    hex.lm = 0.7;
    hex.chance = 1.2;
    watchList.push(hex);
    nextT = getTime() + 250;
  }
  drawGrid(ctx, hexGrid);
}

function trigger(hex, t) {
  hex.t = t + 1800;
  hex.color = c.Graphics.getHSL(hex.hue, 50, 100, Rnd.float(0.8, 1) * (1 - hex.row / rows) * hex.lm);
  hex.clean = false;
  var chance = hex.chance;
  while (Rnd.boolean(chance)) {
    var dir = (hex.from + 3 + Rnd.bit(0.5) * Rnd.sign() + 6) % 6;
    var neighbor = hex.neighbors[dir];
    chance *= 0.4;
    if (!neighbor || neighbor.t > t) {
      continue;
    }
    neighbor.t = t + Rnd.float(20, 40);
    neighbor.from = (dir + 3) % 6;
    neighbor.chance = hex.chance * 0.996;
    neighbor.hue = hex.hue + Rnd.float(-3, 3) + (dir - 3) * 0;
    neighbor.lm = hex.lm;
    watchList.push(neighbor);

}
}

function getTime() {
  return (new Date()).getTime();
}

init();

window.addEventListener("resize", init);
c.Ticker.timingMode = c.Ticker.RAF;
c.Ticker.on("tick", tick, this);

CSS

HTML

Recommendation

Join Effecthub.com