EffectHub.com: your best source for gaming

Recommendation

More Effects...

function getRandomColor() {
  return 'rgba(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', .48)';
}

function Particle (x, y) {
  this.x = x;
  this.y = y;
  this.targetX = x + Math.random() * 20;
  this.targetY = y + Math.random() * 20;
  this.radius = Math.random();
  this.opacity = .35;
  this.color = 'rgba(255, 255, 255, ' + this.opacity + ')';
  this.angle = Math.random() * 360;
  this.speed = .01;
}

Particle.prototype.draw = function(ctx) {
  ctx.save();
  ctx.shadowBlur = 3;
  ctx.shadowColor = 'rgba(255, 255, 255, .2)';
  ctx.translate(this.x, this.y);
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(0, 0, this.radius, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}

function BezierCurve(cp1x, cp1y, cp2x, cp2y, x1, y1, x2, y2) {
  this.cp1x = cp1x;
  this.cp1y = cp1y;
  this.cp2x = cp2x;
  this.cp2y = cp2y;
  this.oldY1 = cp1y;
  this.oldY2 = cp2y;
  this.x1 = x1;
  this.y1 = y1;
  this.x2 = x2;
  this.y2 = y2;
  this.color = getRandomColor();
  this.vy = 2;
}

BezierCurve.prototype.draw = function(ctx) {
  ctx.save();	
  ctx.beginPath();
  ctx.strokeStyle = this.color;
  ctx.moveTo(this.x1, this.y1);
  ctx.bezierCurveTo(this.cp1x, this.cp1y, this.cp2x, this.cp2y, this.x2, this.y2);
  ctx.stroke();
  ctx.restore();
}

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d'),
    W = canvas.width = window.innerWidth,
    H = canvas.height = window.innerHeight,
    curves = [],
    linesCount = 20,
    particles = [],
    curve;

for (var x = 0; x < W; x += Math.round(20 + Math.random() * 20)) {
  var particle = new Particle(x, H / 2 + Math.round(Math.random() *400 - 200));
  particles.push(particle);
}

for (var i = 0; i < linesCount; i++) {
  curve = new BezierCurve(W / 2 - 300 + (Math.round(Math.random() * 400 - 200)), H / 2 - 300 + (Math.round(Math.random() * 300 - 150)), W / 2 + 400 + (Math.round(Math.random() * 400 - 200)), H / 2 + 400 + (Math.round(Math.random() * 400 - 200)),-300, H / 2, W + 300, H / 2);
  curves.push(curve);
}

(function drawFrame(){
  requestAnimationFrame(drawFrame, canvas);
  ctx.clearRect(0, 0, W, H);
  curves.forEach(function (c) {
    if (curves[0].cp1y > H / 2 + 450 || curves[0].cp1y < H / 2 - 450) {
      c.vy *= -1;
    }
    c.cp1y += c.vy;
    c.cp2y -= c.vy;
    c.draw(ctx);
  });
  particles.forEach(function(p) {
    var vx = Math.sin(p.angle) * p.speed,
        vy = Math.cos(p.angle) * p.speed;

if (p.radius <= 2) {
      p.radius += .02;
    } else {
      p.radius = .5;
    } 
    p.x += vx;
    p.y += vy;
    p.draw(ctx);
  });
}());

CSS

HTML

Recommendation

Join Effecthub.com