Random Snow Path

by eprouver

HTML

<button onclick="path()">Add Path</button>
<button onclick="reset()">Reset</button>
<div class="holder">
    <canvas width="500" height="500" id="stones"></canvas>
    <canvas width="500" height="500" id="snow"></canvas>
</div>

CSS

canvas {
    position:absolute;
    top:20;
    left:20;
}
.holder {
    position:relative;
}

.lesson, .start {
    position: absolute;
    height: 20px;
    width: 20px;
    background: rgb(11, 167, 250);
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    border-radius: 20px;
    text-align: center;
    color: white;
}

.start{
    background:#EE6C4E;
}
@-webkit-keyframes bounceInDown {
    /* line 564, ../../app/styles/animate.scss */
    0%, 60%, 75%, 90%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    /* line 569, ../../app/styles/animate.scss */
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }
    /* line 575, ../../app/styles/animate.scss */
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }
    /* line 581, ../../app/styles/animate.scss */
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }
    /* line 586, ../../app/styles/animate.scss */
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    /* line 591, ../../app/styles/animate.scss */
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes bounceInDown {
    /* line 598, ../../app/styles/animate.scss */
    0%, 60%, 75%, 90%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    /* line 603, ../../app/styles/animate.scss */
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }
    /* line 609, ../../app/styles/animate.scss */
    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0,...

JavaScript

function reset(){
    x = Math.random() * snow.canvas.width,
    y = Math.random() * snow.canvas.height,
    inc = 1;
    stones.drawImage(s, 0, 0, stones.canvas.width, stones.canvas.height);
    snow.fillStyle = 'white';
snow.fillRect(0, 0, snow.canvas.width, snow.canvas.height);
    $('.lesson, .start').remove();
    drawparticle(x, y);
$('.holder').append($('<div>').addClass('start bounceInDown').css({
                top: y + 15,
                left: x + 15
            }).text(inc));
    inc++;
}

var stones = document.getElementById('stones').getContext('2d');
stones.canvas.width = window.innerWidth;
stones.canvas.height = window.innerHeight;

var s = new Image();
s.onload = function () {
reset()

}
s.src = 'http://th02.deviantart.net/fs70/PRE/i/2011/339/d/9/seamless_stone_wall_texture_by_hhh316-d4i9d4s.jpg'

var snow = document.getElementById('snow').getContext('2d');
snow.canvas.width = window.innerWidth;
snow.canvas.height = window.innerHeight;

var brush = new Image();
brush.src = 'https://jaykalabs.files.wordpress.com/2013/12/circle_gradient1.png'

window.drawparticle = function (x, y) {
    snow.save();
    snow.translate(x, y);
    snow.scale(0.05, 0.05);
    snow.globalCompositeOperation = 'destination-out';
    snow.drawImage(brush, 0, 0);
    snow.restore();
}

var x = Math.random() * snow.canvas.width,
    y = Math.random() * snow.canvas.height,
    inc = 1;


function path() {
    $({
        x: x,
        y: y
    }).animate({
        x: Math.random() * snow.canvas.width,
        y: Math.random() * snow.canvas.height
    }, {
        duration: 1000,
        queue: false,
        step: function (v, e) {
            if (e.prop == 'x') {
                x = v;
            } else {
                y = v;
                drawparticle(x, y);
            }
        },
        complete: function () {
            $('.holder').append($('<div>').addClass('lesson bounceInDown').css({
                top: y + 15,
                left: x + 15
           ...