EffectHub.com: your best source for gaming

Recommendation

More Effects...

var cvs = document.createElement('canvas'),
    context = cvs.getContext("2d");

document.body.appendChild(cvs);

var centerPt = {x:0, y:0},
    PI = Math.PI,
    numRings = 20,
    p, r,
    rings = [];

resizeHandler();
window.onresize = resizeHandler;

function createPoints(){
  r=numRings;
  while(r--){
    rings.push({
      ang: (1-Math.random()*2)*PI,
      radius: 100,
      spin: Math.random()*PI,
      speed_spin: (1-Math.random()*2)*0.05,
      speed_rot: (1-Math.random()*2)*0.05
    });
  }
}

function drawPoints(){
  console.log("drawPoints");
  
  var _centerPt = centerPt,
      _context = context,
      currRing,
      dX = 0,
      dY = 0;
  
  _context.clearRect(0, 0, cvs.width, cvs.height);
  
  r=numRings;
  while(r--){
    currRing = rings[r];
    currRing.ang += currRing.speed_rot;
    currRing.spin += currRing.speed_spin;
    drawElipse(_context, currRing.radius, Math.sin(currRing.spin), currRing.ang);
  }
  //draw rings
  
  window.requestAnimationFrame(drawPoints);
}

function drawElipse(_context, radius, spin, ang){  
  _context.save();
  _context.translate(centerPt.x, centerPt.y);
  _context.rotate(ang);
  _context.scale(spin, 1);
  _context.beginPath();
  _context.arc(0, 0, radius, 0, 2 * Math.PI, false);
  _context.restore();
  
  _context.lineWidth = 1;
  _context.strokeStyle = '#333333';
  _context.stroke();
  
  _context.closePath();  
}

function resizeHandler(){
  var box = cvs.getBoundingClientRect();
  var w = box.width;
  var h = box.height;
  cvs.width = w;
  cvs.height = h;
  centerPt.x = Math.round(w/2);
  centerPt.y = Math.round(h/2);
}

createPoints();
drawPoints();

CSS

HTML

Recommendation

Join Effecthub.com