var canvas1=document.getElementById("canvas1"),canvas2=document.getElementById("canvas2"),canvas3=document.getElementById("canvas3"),ctx1=canvas1.getContext("2d"),ctx2=canvas2.getContext("2d"),ctx3=canvas3.getContext("2d"),rainthroughnum=10,speedRainTrough=2,RainTrough=[],rainnum=300,rain=[],lightning=[],lightTimeCurrent=0,lightTimeTotal=0,w=canvas1.width=canvas2.width=canvas3.width=window.innerWidth,h=canvas1.height=canvas2.height=canvas3.height=window.innerHeight;function random(n,a){return Math.random()*(a-n+1)+n}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 createRainTrough(){for(var n=0;n<rainthroughnum;n++)RainTrough[n]={x:random(0,w),y:random(0,h),length:Math.floor(random(1,830)),opacity:.2*Math.random(),xs:random(-2,2),ys:random(10,20)}}function createRain(){for(var n=0;n<rainnum;n++)rain[n]={x:Math.random()*w,y:Math.random()*h,l:1*Math.random(),xs:4*Math.random()-4+2,ys:10*Math.random()+10}}function createLightning(){for(var n=random(100,w-100),a=random(0,h/4),t=random(1,3),i=0;i<t;i++)single={x:n,y:a,xRange:random(5,30),yRange:random(10,25),path:[{x:n,y:a}],pathLimit:random(40,55)},lightning.push(single)}function drawRainTrough(n){ctx1.beginPath();var a=ctx1.createLinearGradient(0,RainTrough[n].y,0,RainTrough[n].y+RainTrough[n].length);a.addColorStop(0,"rgba(255,255,255,0)"),a.addColorStop(1,"rgba(255,255,255,"+RainTrough[n].opacity+")"),ctx1.fillStyle=a,ctx1.fillRect(RainTrough[n].x,RainTrough[n].y,1,RainTrough[n].length),ctx1.fill()}function drawRain(n){ctx2.beginPath(),ctx2.moveTo(rain[n].x,rain[n].y),ctx2.lineTo(rain[n].x+rain[n].l*rain[n].xs,rain[n].y+rain[n].l*rain[n].ys),ctx2.strokeStyle="rgba(174,194,224,0.5)",ctx2.lineWidth=1,ctx2.lineCap="round",ctx2.stroke()}function drawLightning(){for(var n=0;n<lightning.length;n++){var a=lightning[n];a.path.push({x:a.path[a.path.length-1].x+(random(0,a.xRange)-a.xRange/2),y:a.path[a.path.length-1].y+random(0,a.yRange)}),a.path.length>a.pathLimit&&lightning.splice(n,1),ctx3.strokeStyle="rgba(255, 255, 255, .1)",ctx3.lineWidth=3,0===random(0,15)&&(ctx3.lineWidth=6),0===random(0,30)&&(ctx3.lineWidth=8),ctx3.beginPath(),ctx3.moveTo(a.x,a.y);for(var t=0;t<a.path.length;t++)ctx3.lineTo(a.path[t].x,a.path[t].y);1===Math.floor(random(0,30))&&(ctx3.fillStyle="rgba(255, 255, 255, "+random(1,3)/100+")",ctx3.fillRect(0,0,w,h)),ctx3.lineJoin="miter",ctx3.stroke()}}function animateRainTrough(){clearcanvas1();for(var n=0;n<rainthroughnum;n++)RainTrough[n].y>=h?RainTrough[n].y=h-RainTrough[n].y-5*RainTrough[n].length:RainTrough[n].y+=speedRainTrough,drawRainTrough(n)}function animateRain(){clearcanvas2();for(var n=0;n<rainnum;n++)rain[n].x+=rain[n].xs,rain[n].y+=rain[n].ys,(rain[n].x>w||rain[n].y>h)&&(rain[n].x=Math.random()*w,rain[n].y=-20),drawRain(n)}function animateLightning(){clearCanvas3(),++lightTimeCurrent>=lightTimeTotal&&(createLightning(),lightTimeCurrent=0,lightTimeTotal=200),drawLightning()}function init(){createRainTrough(),createRain(),window.addEventListener("resize",createRainTrough)}function animloop(){animateRainTrough(),animateRain(),animateLightning(),requestAnimationFrame(animloop)}window.addEventListener("resize",function(){w=canvas1.width=canvas2.width=canvas3.width=window.innerWidth,h=canvas1.height=canvas2.height=canvas3.height=window.innerHeight}),init(),animloop();