Canvas rain

canvas-rain.markdown

Canvas rain

A Pen by Andreas Borgen on CodePen.

License.

index.html

<h1>Canvas rain</h1>
<button onclick="go()">Rerun</button>

script.js

console.clear();

//https://stackoverflow.com/questions/13129479/random-images-falling-like-rain-in-canvas-javascript
//https://stackoverflow.com/questions/17411991/html5-canvas-rotate-image
//https://stackoverflow.com/questions/18949122/javascript-canvas-change-the-opacity-of-image
function canvasRain(images, distance) {
    "use strict";

    var canvas, ctx, w, h;
    var fallingDrops = [],
        imgIndex = 0,
        creatingDrops = true,
        startFading = false;
    
    images = images.map(function(info) {
        var img = new Image();
        img.src = info[0];
        return {
            img: img,
            size: info[1],
        }
    });
    distance = distance || 20;

    function setup() {
        canvas = document.createElement('canvas');
        canvas.width = w = window.innerWidth;
        canvas.height = h = window.innerHeight;

        var s = canvas.style;
        s.position = 'fixed';
        s.top = s.left = 0;
        s.zIndex = 9999;
        s.opacity = 1;
        s.pointerEvents = 'none';
        document.body.append(canvas);

        ctx = canvas.getContext('2d');

        createDrop();
    }

    function createDrop() {
        var drop = { };
        resetDrop(drop);
        fallingDrops.push(drop);
    }
    function resetDrop(drop) {
        var info = images[imgIndex];
        imgIndex = (imgIndex + 1) % images.length;

        drop.image = info.img;
        var size = drop.size = info.size;
        
        drop.x = Math.random() * (w-size) + size/2;
        drop.y = -size;
        drop.speed = 3 + Math.random()*1;
        drop.rot = 0;
        drop.rotSpeed = .1 - Math.random()*.2;
    }

    function draw(t) {
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        var dropCount = fallingDrops.length,
            drop;
        //console.log('drops', dropCount);
        for (var i = 0; i < dropCount; i++) {
            drop = fallingDrops[i];

            ctx.globalAlpha = (h - drop.y)/h;
            drawDrop(drop); //The rain drop
            ctx.globalAlpha = 1.0;

            drop.y += drop.speed;   //Set the falling speed
            drop.rot += drop.rotSpeed;

            if (drop.y > h) {       //Repeat the raindrop when it falls out of view
                resetDrop(drop);
                creatingDrops = false;
                startFading = true;
            }

            if(creatingDrops && (i === dropCount-1) && ((drop.y + drop.size) > distance)) {
                createDrop();
            }
        }

        if(startFading) {
            var opacity = (t - startFading)/1000;
            canvas.style.opacity -= .01;
            if(canvas.style.opacity < 0) {
                document.body.removeChild(canvas);

                //No new requestAnimationFrame():
                return;
            }
        }
        requestAnimationFrame(draw);
    }
    function drawDrop(drop) {
        ctx.setTransform(1, 0, 0, 1, drop.x, drop.y); // sets scales and origin
        ctx.rotate(drop.rot);

        var img = drop.image;
        ctx.drawImage(img, -img.width/2, -img.height/2);
    }

    setup();
    draw();
}


function go() {
    canvasRain([
        ['https://lorempixel.com/40/40/sports/',    40],
        ['https://lorempixel.com/55/55/sports/',    55],
        ['https://lorempixel.com/70/70/sports/',    70],
        ['https://lorempixel.com/90/90/sports/',    90],
        ['https://lorempixel.com/120/120/sports/', 120],
        ['https://lorempixel.com/150/150/sports/', 150],
    ], 10);
}
go();

style.css

body {
    display: flex;
    flex-flow: column;
    margin: 0;
    height: 100vh;
    align-items: center;
    justify-content: center;
}
h1 {
    font-family: Georgia, sans-serif;
    text-align: center;
    font-size: 10vw;
    margin-top: 0;
}
button {
    font-size: 5vw;
}