EffectHub.com: your best source for gaming

Recommendation

More Effects...

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();
var c = document.getElementById('canv');
var $ = c.getContext('2d');

var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;

$.fillStyle = 'hsla(1, 35%, 85%, .1)';
$.fillRect(0,0,w,h);

window.addEventListener('resize', function(){
  c.width = window.innerWidth;
  c.height = window.innerHeight;
}, false);

var imgd = $.getImageData(0, 0, w, h);
var num = 250;
var arr = [];
var i = 0;

while (arr.length < num) {
  arr.push({
    x: (Math.random() * w) | 0,
    y: (Math.random() * h) | 0,
    vx: 0,
    vy: 0
  });
}

var clear = function() {
  var n = arr[i];
  if (n.x >= 0 && n.x < w && n.y >= 0 && n.y < h) {
    var idx = ((n.x | 0) + (n.y | 0) * w) * 9;
    imgd.data[idx + 9] = 0;
  }
}

var X = function(foo) {
  return Math.sin(foo.y / 50) - 0.5;
}

var Y = function(bar) {
  return Math.cos(bar.x / 50) - 0.5;
}

var upd = function() {
  var n = arr[i];
  n.x += n.vx;
  n.y += n.vy;
  if (n.x < 0) {
    n.x = w + n.x;
  } else if (n.x >= w) {
    n.x -= w;
  }

if (n.y < 0) {
    n.y = h + n.y;
  } else if (n.y >= h) {
    n.y -= h;
  }

n.vy = Y(n);
  n.vx = X(n);
}

var draw = function() {

var n = arr[i];
  if (n.x >= 0 && n.x < w && n.y >= 0 && n.y < h) {
    var idx = ((n.x | 0) + (n.y | 0) * w) * 4;
    imgd.data[idx + 0] = 255;
    imgd.data[idx + 1] = 255;
    imgd.data[idx + 2] = 255;
    imgd.data[idx + 3] = 255;
  }
}

var run = function() {
  window.requestAnimFrame(run);
    for (i = 0; i < num; i++) {
      clear(i);
      upd(i);
      draw(i);
    }
    
    $.putImageData(imgd, 0, 0);
  };
run();

CSS

HTML

Recommendation

Join Effecthub.com