EffectHub.com: your best source for gaming

Recommendation

More Effects...

function $(sel) {
  return document.querySelector(sel);
}

var ns = "http://www.w3.org/2000/svg",
  mainCanvas = $(".main-canvas"),
  sin = intoDegrees(Math.sin),
  cos = intoDegrees(Math.cos);

function intoDegrees(func) {
  function f(x) {
    return func(x * (Math.PI / 180));
  }

return f;
}

var x = (angle, r) => r * cos(angle),
  y = (angle, r) => r * sin(angle);

function createCanvas(width, height) {
  var canvas = document.createElementNS(ns, "svg");
  canvas.classList.add("canvas");

canvas.setAttribute("viewBox", `0 0 ${width} ${height}`);
  mainCanvas.appendChild(canvas);
  return canvas;
}

function createRing(nCir, r, rCir) {
  var angleGap = 360 / nCir,
    w = r * 2,
    h = r * 2,
    canvas = createCanvas(w, h),
    cir = addPoint(canvas, w / 2, h / 2, r, "big-cir");

for (var i = 0; i <= 360; i += angleGap) {
    let angle = i,
      _x = r + x(angle, r),
      _y = r + y(angle, r);
    addPoint(canvas, _x, _y, rCir, "ring-circle");
  }

return canvas;

}

function createRings(dir, n, ringOpts, dur) {
  var angGap = 360 / n,
    rDir = dir == "horizontal" ? "X" : "Y",
    animationTimeline = [];
  for (var i = 0; i < 360; i += angGap) {
    var rotation = i,
      ring = createRing(ringOpts.n, ringOpts.r, ringOpts.rCir);

ring.style.transform = `rotate${rDir}(${rotation}deg)`;

var animateRing = ring.animate([{
      transform: `rotate${rDir}(${rotation}deg)`
    }, {
      transform: `rotate${rDir}(${rotation+360}deg)`
    }], {
      duration: dur || 20000,
      iterations: Infinity

});

animationTimeline.push(animateRing);
  }

return animationTimeline;
}

function createSphere(noOfRings, cirSettings, dur) {

var timeline1 = createRings("horizontal", noOfRings, cirSettings, dur),

timeline2 = createRings("veritcal", noOfRings, cirSettings, dur);

return timeline1.concat(timeline2);
}

function createCircle() {
  var cir = document.createElementNS(ns, "circle");
  return cir;
}

function addPoint(canvas, x, y, r, _class) {
  var cir = createCircle();
  cir.setAttribute("cx", x);
  cir.setAttribute("cy", y);
  cir.style.stroke = getRandomColor();
  cir.setAttribute("r", r);
  _class && cir.classList.add(_class);
  canvas.appendChild(cir);

return {
    pointEl: cir,
    updatePoint: function(newX, newY) {
      cir.setAttribute("cx", newX);
      cir.setAttribute("cy", newY);
    }
  }
}

function getRandomColor() {
  var colors = ["#ae81ff", "tomato", "#64caf1", "#f1d23b"];

return colors[Math.floor(Math.random() * colors.length)];
}

function randomPlaybackRate(maxPlaybackRate) {
  return Math.round(Math.random() * maxPlaybackRate);
}

var timelines = createSphere(20, {
  n: 10,
  r: 200,
  rCir: 5
}, 20000);

window.addEventListener("click", function() {

var randomPlayback = randomPlaybackRate(10);

timelines.forEach(function(timeline) {
    timeline.playbackRate = randomPlayback;
  });
});

CSS

HTML

Recommendation

Join Effecthub.com