EffectHub.com: your best source for gaming

Recommendation

More Effects...

JS

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(128, 128, 128, 0.2)";
ctx.strokeStyle = "rgba(255, 255, 255, 0.2)";
ctx.lineWidth = 2;

var center = {
  x: canvas.width / 2,
  y: canvas.height / 2
};
var num = 6;

var hexes = [];
for (var i = 0; i < num; i++) {
  hexes.push(new Hex());
}

function Hex () {
  this.min = 0;
  this.max = 500;
  this.time = 5 * 1000;
  this.sides = 6;
  this.rad = Math.PI * 2 / this.sides;
  this.start = -(90 * Math.PI / 180);
}

window.requestAnimationFrame(drawFrame);

function drawFrame (timestamp) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var h = 0; h < hexes.length; h++) {
    var hex = hexes[h];
    ctx.beginPath();
    ctx.save();
    ctx.translate(center.x, center.y);
    ctx.rotate(hex.start);
    ctx.translate(-center.y, -center.y);
    var time = hex.time + timestamp - (hex.time / num * h);
    var r = easing.easeInCirc(time % hex.time, hex.min, hex.max - hex.min, hex.time);
    for (var i = 0; i < hex.sides; i++) {
      var x = r * Math.cos(hex.rad * i);
      var y = r * Math.sin(hex.rad * i);
      ctx.lineTo(x + center.x, y + center.y);
    }
    ctx.closePath();
    ctx.stroke();
    ctx.restore();
  }
  window.requestAnimationFrame(drawFrame);
}

var easing = {
  // Penner's easing equations
  // http://goo.gl/BdAl7X
  // ci = current increment
  // sv = starting value
  // civ = change in value
  // ti = total increments
  linearEase: function (ci, sv, civ, ti) {
    return civ * ci / ti + sv;
  },
  easeInQuad: function (ci, sv, civ, ti) {
    return civ * (ci /= ti) * ci + sv;
  },
  easeOutQuad: function (ci, sv, civ, ti) {
    return -civ * (ci /= ti) * (ci - 2) + sv;
  },
  easeInOutQuad: function (ci, sv, civ, ti) {
    if ((ci /= ti / 2) < 1) {
      return civ / 2 * ci * ci + sv;
    }
    return -civ / 2 * ((--ci) * (ci - 2) - 1) + sv;
  },
  easeInCubic: function (ci, sv, civ, ti) {
    return civ * Math.pow(ci / ti, 3) + sv;
  },
  easeOutCubic: function (ci, sv, civ, ti) {
    return civ * (Math.pow(ci / ti - 1, 3) + 1) + sv;
  },
  easeInOutCubic: function (ci, sv, civ, ti) {
    if ((ci /= ti / 2) < 1) {
      return civ / 2 * Math.pow(ci, 3) + sv;
    }
    return civ / 2 * (Math.pow(ci - 2, 3) + 2) + sv;
  },
  easeInQuart: function (ci, sv, civ, ti) {
    return civ * Math.pow(ci / ti, 4) + sv;
  },
  easeOutQuart: function (ci, sv, civ, ti) {
    return -civ * (Math.pow(ci / ti - 1, 4) - 1) + sv;
  },
  easeInOutQuart: function (ci, sv, civ, ti) {
    if ((ci /= ti / 2) < 1) {
      return civ / 2 * Math.pow(ci, 4) + sv;
    }
    return -civ / 2 * (Math.pow(ci - 2, 4) - 2) + sv;
  },
  easeInQuint: function (ci, sv, civ, ti) {
    return civ * Math.pow(ci / ti, 5) + sv;
  },
  easeOutQuint: function (ci, sv, civ, ti) {
    return civ * (Math.pow(ci / ti - 1, 5) + 1) + sv;
  },
  easeInOutQuint: function (ci, sv, civ, ti) {
    if ((ci /= ti / 2) < 1) {
      return civ / 2 * Math.pow(ci, 5) + sv;
    }
    return civ / 2 * (Math.pow(ci - 2, 5) + 2) + sv;
  },
  easeInSine: function (ci, sv, civ, ti) {
    return civ * (1 - Math.cos(ci / ti * (Math.PI / 2))) + sv;
  },
  easeOutSine: function (ci, sv, civ, ti) {
    return civ * Math.sin(ci / ti * (Math.PI / 2)) + sv;
  },
  easeInOutSine: function (ci, sv, civ, ti) {
    return civ / 2 * (1 - Math.cos(Math.PI * ci / ti)) + sv;
  },
  easeInExpo: function (ci, sv, civ, ti) {
    return civ * Math.pow(2, 10 * (ci / ti - 1)) + sv;
  },
  easeOutExpo: function (ci, sv, civ, ti) {
    return civ * (-Math.pow(2, -10 * ci / ti) + 1) + sv;
  },
  easeInOutExpo: function (ci, sv, civ, ti) {
    if ((ci /= ti / 2) < 1) {
      return civ / 2 * Math.pow(2, 10 * (ci - 1)) + sv;
    }
    return civ / 2 * (-Math.pow(2, -10 * --ci) + 2) + sv;
  },
  easeInCirc: function (ci, sv, civ, ti) {
    return civ * (1 - Math.sqrt(1 - (ci /= ti) * ci)) + sv;
  },
  easeOutCirc: function (ci, sv, civ, ti) {
    return civ * Math.sqrt(1 - (ci = ci / ti - 1) * ci) + sv;
  },
  easeInOutCirc: function (ci, sv, civ, ti) {
    if ((ci /= ti / 2) < 1) {
      return civ / 2 * (1 - Math.sqrt(1 - ci * ci)) + sv;
    }
    return civ / 2 * (Math.sqrt(1 - (ci -= 2) * ci) + 1) + sv;
  }
};

function makeColorGradient (len) {
  var f1 = 2 * Math.PI / len * 1;
  var f2 = 2 * Math.PI / len * 1;
  var f3 = 2 * Math.PI / len * 1;
  var o1 = 0;
  var o2 = 2 * Math.PI / 3;
  var o3 = 4 * Math.PI / 3;
  var w = 127;
  var c = 128;
  var a = [];
  for (var i = 0; i < len; i++) {
    var r = Math.round(Math.sin(f1 * i + o1) * w + c);
    var g = Math.round(Math.sin(f2 * i + o2) * w + c);
    var b = Math.round(Math.sin(f3 * i + o3) * w + c);
    a.push({ r: r, g: g, b: b});
  }
  return a;
}

CSS

HTML

Join Effecthub.com

Working with Global Gaming Artists and Developers!

Login
Sign Up

Or Sign Up with Your Email Address: