EffectHub.com: your best source for gaming

Recommendation

More Effects...

//////////////////////////////
// Demo Functions
//////////////////////////////

function init(showStats) {
  // stats
  if (showStats) {
    var stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0';
    stats.domElement.style.top = '0';
    document.body.appendChild(stats.domElement);
    requestAnimationFrame(function updateStats(){
      stats.update();
      requestAnimationFrame(updateStats);
    });
  }

// init
  var svg = document.getElementById('demo');
  tesselation.setup(svg);
  gradients.setup();

var lastTransitionAt, transitionDelay = 5500, transitionDuration = 3000;

function playNextTransition() {
    tesselation.next(transitionDuration);
    gradients.next(transitionDuration);
  };

function tick(time) {
    if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) {
      lastTransitionAt = time;
      playNextTransition();
    }
    window.requestAnimationFrame(tick);
  }
  window.requestAnimationFrame(tick);
}

//////////////////////////////
// Delaunay Triangulation
//////////////////////////////

var tesselation = (function() {
  var svg, svgW, svgH, prevGroup;

function createRandomTesselation() {
    var wW = window.innerWidth;
    var wH = window.innerHeight;

var gridSpacing = 250, scatterAmount = 0.75;
    var gridSize, i, x, y;

if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize
      gridSize = gridSpacing * svgW / wW;
    } else { // window taller than svg = use height for gridSize
      gridSize = gridSpacing * svgH / wH;
    }

var vertices = [];
    var xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2;
    for (x = Math.floor(svgW/gridSize) + 1; x >= -1; x--) {
      for (y = Math.floor(svgH/gridSize) + 1; y >= -1; y--) {
        vertices.push(
          [
            xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)),
            yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5))
          ]
        );
      }
    }

var triangles = calcDelaunayTriangulation(vertices);

var group = document.createElementNS('http://www.w3.org/2000/svg','g');
    var polygon;
    for(i = triangles.length; i; ) {
      polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
      polygon.setAttribute('points',
        vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
        vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
        vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1]
      );
      group.appendChild(polygon);
    }

return group;
  }

return {
    setup: function(svgElement) {
      svg = svgElement;
      var vb = svg.getAttribute('viewBox').split(/\D/g);
      svgW = vb[2];
      svgH = vb[3];
    },
    next: function(t) {
      var toRemove, i, n;
      t /= 1000;

if (prevGroup && prevGroup.children && prevGroup.children.length) {
        toRemove = prevGroup;
        n = toRemove.children.length;
        for (i = n; i--; ) {
          TweenMax.to(toRemove.children[i], t*0.4, {opacity: 0, delay: t*(0.3*i/n)});
        }
        TweenMax.delayedCall(t * (0.7 + 0.05), function(group) { svg.removeChild(group); }, [toRemove], this);
      }
      var g = createRandomTesselation();
      n = g.children.length;
      for (i = n; i--; ) {
        TweenMax.fromTo(g.children[i], t*0.4, {opacity: 0}, {opacity: 0.3 + 0.25 * Math.random(), delay: t*(0.3*i/n + 0.3), ease: Back.easeOut});
      }
      svg.appendChild(g);
      prevGroup = g;
    }
  }
})();

//////////////////////////////
// Gradients
//////////////////////////////

var gradients = (function() {
  var grad1, grad2, showingGrad1;

// using colors from IBM Design Colors this time
  var colors = [ // 14 colors - use 3-5 span
    '#3c6df0', // ultramarine50
    '#12a3b4', // aqua40
    '#00a78f', // teal40
    '#00aa5e', // green40
    '#81b532', // lime30
    '#e3bc13', // yellow20
    '#ffb000', // gold20
    '#fe8500', // orange30
    '#fe6100', // peach40
    '#e62325', // red50
    '#dc267f', // magenta50
    '#c22dd5', // purple50
    '#9753e1', // violet50
    '#5a3ec8'  // indigo60
  ];

function assignRandomColors(gradObj) {
    var rA = Math.floor(colors.length * Math.random());
    var rB = Math.floor(Math.random() * 3) + 3; // [3 - 5]
    rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length;
    gradObj.stopA.setAttribute('stop-color', colors[rA]);
    gradObj.stopB.setAttribute('stop-color', colors[rB]);
  }

return {
    setup: function() {
      showingGrad1 = false;
      grad1 = {
        stopA: document.getElementById('stop1a'),
        stopB: document.getElementById('stop1b'),
        rect:  document.getElementById('rect1')
      };
      grad2 = {
        stopA: document.getElementById('stop2a'),
        stopB: document.getElementById('stop2b'),
        rect:  document.getElementById('rect2')
      };
      grad1.rect.style.opacity = 0;
      grad2.rect.style.opacity = 0;
    },
    next: function(t) {
      t /= 1000;

var show, hide;
      if (showingGrad1) {
        hide = grad1;
        show = grad2;
      } else {
        hide = grad2;
        show = grad1;
      }
      showingGrad1 = !showingGrad1;

TweenMax.to(hide.rect, 0.55*t, {opacity: 0, delay: 0.2*t, ease: Sine.easeOut});
      assignRandomColors(show);
      TweenMax.to(show.rect, 0.65*t, {opacity: 1, ease: Sine.easeIn});
    }
  };
})();

//////////////////////////////
// Start
//////////////////////////////

init();

CSS

HTML

Recommendation

Join Effecthub.com