EffectHub.com: your best source for gaming

Recommendation

More Effects...

var canvas1 = document.getElementById('canvas1');
var canvas2 = document.getElementById('canvas2');
var canvas3 = document.getElementById('canvas3');
var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
var ctx3 = canvas3.getContext('2d');

var rainthroughnum = 500;
var speedRainTrough = 25;
var RainTrough = [];

var rainnum = 500;
var rain = [];

var lightning = [];
var lightTimeCurrent = 0;
var lightTimeTotal = 0;

var w = canvas1.width = canvas2.width = canvas3.width = window.innerWidth;
var h = canvas1.height = canvas2.height = canvas3.height = window.innerHeight;
window.addEventListener('resize', function() {
  w = canvas1.width = canvas2.width = canvas3.width = window.innerWidth;
  h = canvas1.height = canvas2.height = canvas3.height = window.innerHeight;
});

function random(min, max) {
  return Math.random() * (max - min + 1) + min;
}

function clearcanvas1() {
  ctx1.clearRect(0, 0, w, h);
}

function clearcanvas2() {
  ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
}

function clearCanvas3() {
  ctx3.globalCompositeOperation = 'destination-out';
  ctx3.fillStyle = 'rgba(0,0,0,' + random(1, 30) / 100 + ')';
  ctx3.fillRect(0, 0, w, h);
  ctx3.globalCompositeOperation = 'source-over';
};

function createLightning() {
  var x = random(100, w - 100);
  var y = random(0, h / 4);

function drawRainTrough(i) {
  ctx1.beginPath();
  var grd = ctx1.createLinearGradient(0, RainTrough[i].y, 0, RainTrough[i].y + RainTrough[i].length);
  grd.addColorStop(0, "rgba(255,255,255,0)");
  grd.addColorStop(1, "rgba(255,255,255," + RainTrough[i].opacity + ")");

ctx1.fillStyle = grd;
  ctx1.fillRect(RainTrough[i].x, RainTrough[i].y, 1, RainTrough[i].length);
  ctx1.fill();
}

function drawRain(i) {
  ctx2.beginPath();
  ctx2.moveTo(rain[i].x, rain[i].y);
  ctx2.lineTo(rain[i].x + rain[i].l * rain[i].xs, rain[i].y + rain[i].l * rain[i].ys);
  ctx2.strokeStyle = 'rgba(174,194,224,0.5)';
  ctx2.lineWidth = 1;
  ctx2.lineCap = 'round';
  ctx2.stroke();
}

function drawLightning() {
  for (var i = 0; i < lightning.length; i++) {
    var light = lightning[i];

light.path.push({
      x: light.path[light.path.length - 1].x + (random(0, light.xRange) - (light.xRange / 2)),
      y: light.path[light.path.length - 1].y + (random(0, light.yRange))
    });

if (light.path.length > light.pathLimit) {
      lightning.splice(i, 1);
    }

ctx3.strokeStyle = 'rgba(255, 255, 255, .1)';
    ctx3.lineWidth = 3;
    if (random(0, 15) === 0) {
      ctx3.lineWidth = 6;
    }
    if (random(0, 30) === 0) {
      ctx3.lineWidth = 8;
    }

ctx3.beginPath();
    ctx3.moveTo(light.x, light.y);
    for (var pc = 0; pc < light.path.length; pc++) {
      ctx3.lineTo(light.path[pc].x, light.path[pc].y);
    }
    if (Math.floor(random(0, 30)) === 1) { //to fos apo piso
      ctx3.fillStyle = 'rgba(255, 255, 255, ' + random(1, 3) / 100 + ')';
      ctx3.fillRect(0, 0, w, h);
    }
    ctx3.lineJoin = 'miter';
    ctx3.stroke();
  }
};

function animateLightning() {
  clearCanvas3();
  lightTimeCurrent++;
  if (lightTimeCurrent >= lightTimeTotal) {
    createLightning();
    lightTimeCurrent = 0;
    lightTimeTotal = 200;  //rand(100, 200)
  }
  drawLightning();
}

function init() {
  createRainTrough();
  createRain();
  window.addEventListener('resize', createRainTrough);
}
init();

function animloop() {
  animateRainTrough();
  animateRain();
  animateLightning();
  requestAnimationFrame(animloop);
}
animloop();

CSS

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html,
body,
canvas {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  background-color: #222;
  background-image: url("https://drive.google.com/uc?export=view&id=0BzFF7FmbJUo5X0NEUXFVd0NBcWc");
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
}
body:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1;
  -webkit-animation: thunder-bg 6s infinite;
          animation: thunder-bg 6s infinite;
}

canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

#canvas3 {
  z-index: 5;
}

#canvas2 {
  z-index: 10;
}

#canvas1 {
  z-index: 100;
}

@-webkit-keyframes thunder-bg {
  0% {
    background-color: rgba(34, 34, 34, 0.9);
  }
  9% {
    background-color: rgba(34, 34, 34, 0.9);
  }
  10% {
    background-color: rgba(59, 59, 59, 0.3);
  }
  10.5% {
    background-color: rgba(34, 34, 34, 0.9);
  }
  80% {
    background-color: rgba(34, 34, 34, 0.9);
  }
  82% {
    background-color: rgba(59, 59, 59, 0.3);
  }
  83% {
    background-color: rgba(34, 34, 34, 0.9);
  }
  83.5% {
    background-color: rgba(59, 59, 59, 0.3);
  }
  100% {
    background-color: rgba(34, 34, 34, 0.9);
  }
}

HTML

Recommendation

Join Effecthub.com