path: root/letitsnow/snow.js

/*
Let it snow JS v1.0.0
Copyright 2018 Yaroslav de la Peña Smirnov
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted (subject to the limitations in the disclaimer
below) provided that the following conditions are met:

    * Redistributions of source code must retain the above copyright notice,
    this list of conditions and the following disclaimer.

    * Redistributions in binary form must reproduce the above copyright
    notice, this list of conditions and the following disclaimer in the
    documentation and/or other materials provided with the distribution.

    * Neither the name of the copyright holder nor the names of its
    contributors may be used to endorse or promote products derived from this
    software without specific prior written permission.

NO EXPRESS OR IMPLIED LICENSES TO ANY PARTY'S PATENT RIGHTS ARE GRANTED BY
THIS LICENSE. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND
CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
POSSIBILITY OF SUCH DAMAGE.
*/

/*
###     Happy holidays 2018, and happy new 2019!     ###
###     Felices fiestas 2018, y feliz año 2019       ###
### С праздниками 2018 года, и с наступающим 2019-м! ###
*/

// A class for the particles/snowflakes
function Particle(posx, posy, scale, flakeType, tradiusx, tradiusz, tDuration, lastT){
    this.posx = posx;
    this.posy = posy;
    this.scale = scale;
    this.flakeType = flakeType;
    this.tradiusx = tradiusx;
    this.tradiusz = tradiusz;
    this.tDuration = tDuration;
    this.lastT = 0;
}

// Let it snow!
function letItSnow(options){
    /* >>> Some parameters <<< */
    // > max_particles: Number of snowflakes on screen
    // > base_speed: Base speed for snowflakes in pixels/second
    // It is multiplied by the size of the snowflake so that
    // snowflakes in the foreground fall faster than ones in
    // the background to give a parallax effect
    // > max_xspeed: Same as base_speed but for the x (horizontal) axis
    var max_particles =
        options.hasOwnProperty('max_particles') ? options['max_particles'] : 400;
    var base_speed =
        options.hasOwnProperty('base_speed') ? options['base_speed'] : 100;
    var max_xspeed =
        options.hasOwnProperty('max_xspeed') ? options['max_xspeed'] : 150;
    var max_tradius =
        options.hasOwnProperty('max_tradius') ? options['max_tradius'] : 10;
    var max_tduration =
        options.hasOwnProperty('max_tduration') ? options['max_tduration'] : 5000;
    var interactive = options['interactive'];


    // x and y size of the original snowflake in pixels
    const BASE_SIZE = 9;

    var canvas = document.getElementById("snow");
    if (!canvas){
        console.log("There is no '#snow' canvas to draw on! Aborting...");
        return;
    }
    var container = canvas.parentNode;
    var ctx = canvas.getContext("2d");
    ctx.save();
    var hor_speed = 0;

    // This will be populated with all the 'particles' (i.e. snowflakes)
    // on the canvas
    var particles = [];
    var last = null; // previous timestamp
    var requestedFrame;

    // The (quarter) paths for our different snowflakes
    var paths = [
        function(){
            let sfquarter = new Path2D();
            sfquarter.rect(1,1,1,1);
            sfquarter.rect(3,0,1,1);
            sfquarter.rect(3,2,1,1);
            sfquarter.rect(2,3,1,1);
            sfquarter.rect(0,3,1,1);
            sfquarter.rect(1,4,2,1);
            sfquarter.rect(4,4,1,1);
            return sfquarter;
        },
        function(){
            let sfquarter = new Path2D();
            sfquarter.rect(2,2,1,1);
            sfquarter.rect(0,2,1,1);
            sfquarter.rect(2,0,1,1);
            sfquarter.rect(1,3,1,1);
            sfquarter.rect(3,1,1,1);
            sfquarter.rect(0,4,5,1);
            return sfquarter;
        },
        function(){
            let sfquarter = new Path2D();
            sfquarter.rect(1,1,1,1);
            sfquarter.rect(3,0,1,1);
            sfquarter.rect(0,3,1,1);
            sfquarter.rect(2,3,1,1);
            sfquarter.rect(3,2,1,1);
            sfquarter.rect(1,4,3,1);
            return sfquarter;
        },
        function(){
            let sfquarter = new Path2D();
            sfquarter.rect(1,1,1,1);
            sfquarter.rect(2,2,1,1);
            sfquarter.rect(3,3,1,1);
            sfquarter.rect(3,0,1,1);
            sfquarter.rect(0,3,1,1);
            sfquarter.rect(1,4,3,1);
            return sfquarter;
        }
    ]
    // This array will be populated with the prerendered snowflakes
    // (i.e. the canvases)
    var snowflakeTypes = []

    function randomMulti(){
        return Math.floor(Math.random() * 11)/10 + 0.5;
    }

    function randomInt(max){
        return Math.floor(Math.random() * max);
    }

    function resize(){
        // On window/viewport resize, get the new size of the container
        // and accordingly resize the canvas, then reinitialize
        canvas.height = parseInt(container.offsetHeight);
        canvas.width = parseInt(container.offsetWidth);
        try{ window.cancelAnimationFrame(requestedFrame); }
        catch(e) {}
        initParticles();
    }

    function updateHorSpeed(e){
        // Get the rectangle for our canvas
        let rect = canvas.getBoundingClientRect();
        // Determine the mouse's x position relative to our canvas
        let mx = e.clientX - rect.left;
        let half_rect = canvas.width/2;
        hor_speed = (mx-half_rect)/half_rect*max_xspeed;
    }


    function prerenderAll(){
        for (let i = 0; i < paths.length; i++){
            snowflakeTypes.push(document.createElement("canvas"));
            prerenderSnowflake(snowflakeTypes[i], paths[i]());
        }
    }

    function prerenderSnowflake(flakeCanvas, sfquarter){
        // Prerender the snowflake to optimize
        flakeCanvas.width = BASE_SIZE;
        flakeCanvas.height = BASE_SIZE;
        var flakeCtx = flakeCanvas.getContext("2d");
        flakeCtx.fillStyle = "#ffffff";
        flakeCtx.save()
        // Draw a path with one quarter of the flake
        flakeCtx.fill(sfquarter);
        // Translate to center rotate, return to origin and draw another quarter
        // Repeat 3 times
        flakeCtx.translate(BASE_SIZE/2, BASE_SIZE/2);
        flakeCtx.rotate((Math.PI/180) * 90);
        flakeCtx.translate(-BASE_SIZE/2, -BASE_SIZE/2);
        flakeCtx.fill(sfquarter);

        flakeCtx.translate(BASE_SIZE/2, BASE_SIZE/2);
        flakeCtx.rotate((Math.PI/180) * 90);
        flakeCtx.translate(-BASE_SIZE/2, -BASE_SIZE/2);
        flakeCtx.fill(sfquarter);

        flakeCtx.translate(BASE_SIZE/2, BASE_SIZE/2);
        flakeCtx.rotate((Math.PI/180) * 90);
        flakeCtx.translate(-BASE_SIZE/2, -BASE_SIZE/2);
        flakeCtx.fill(sfquarter);
        flakeCtx.restore()
        flakeCtx.save()
    }

    // Draw the snowflake on our main (visible) canvas
    function drawSnowflake(particle){
        let turbulenceZ = particle.tradiusz*Math.cos(particle.lastT);
        // Position correctly, and scale accordingly
        ctx.translate(particle.posx, particle.posy);
        ctx.scale(particle.scale+turbulenceZ, particle.scale+turbulenceZ);
        // Also, change the opacity based on its size
        // to give an effect of distance
        ctx.globalAlpha = particle.scale/1.7+turbulenceZ;
        preCanvas = snowflakeTypes[particle.flakeType];
        ctx.drawImage(preCanvas, 0, 0);
        ctx.restore();
        ctx.save();
    }

    function getNewParticle(){
        // Randomly assign them a position and size and draw them
        // on the canvas
        let posx = randomInt(canvas.width);
        let posy = randomInt(canvas.height);
        let size = randomMulti();
        let tradiusx = randomInt(max_tradius)/10;
        let tradiusz = randomInt(3)/10;
        let tDuration = randomInt(max_tduration);
        let lastT = randomInt(63)/10;
        // Also randomly choose a snowflake type
        let flakeType = randomInt(paths.length);
        return new Particle(posx,
            posy,
            size,
            flakeType,
            tradiusx,
            tradiusz,
            tDuration,
            lastT);
    }

    function initParticles(){
        particles.length = 0;
        ctx.save()
        for (let i = 0; i < max_particles; ++i){
            let particle = getNewParticle();
            particles.push(particle);
            drawSnowflake(particle);
        }
        // Request the first frame
        requestedFrame = window.requestAnimationFrame(nextFrame);
    }

    function nextFrame(timestamp){
        if (!last) last = timestamp;
        let delta = timestamp - last;
        // If more than 250ms have passed since last frame, it is assumed
        // that the browser stopped calling back frames because the tab/page
        // was in the background, thus this frame is ignored, and the last
        // timestamp reset
        if (delta > 250){
            last = timestamp;
            requestedFrame = window.requestAnimationFrame(nextFrame);
            return;
        }
        // Clear the canvas before redrawing the snowflakes
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for(let i = 0; i < max_particles; i++){
            let particle = particles[i];
            // Determine how much the snowflake should fall based on
            // how much time has passed since the last frame, our base speed
            // and how large is our snowflake
            let fall = delta*base_speed*particle.scale/1000;
            let wind = delta*hor_speed*particle.scale/1000;
            let nt = delta*2*Math.PI/max_tduration;
            particle.lastT += nt;
            if(particle.lastT > 2*Math.PI){
                particle.lastT = particle.lastT - 2*Math.PI;
            }
            let turbulenceX = particle.tradiusx*Math.cos(particle.lastT);
            let turbulenceZ = particle.tradiusz*Math.cos(particle.lastT);
            particle.posy += fall;
            particle.posx += wind+turbulenceX;
            // If the snowflake has fallen out of our canvas' bounds
            // redraw at the top
            if (particle.posy > canvas.height+BASE_SIZE*particle.scale){
                particle = getNewParticle();
                particles[i] = particle;
                particle.posy = -BASE_SIZE*(particle.scale+turbulenceZ);
            }
            // If it fell out of bounds horizontally, redraw at the left
            // or at the right edge of the canvas
            if(particle.posx > canvas.width+BASE_SIZE*particle.scale){
                particle.posx = -BASE_SIZE*(particle.scale+turbulenceZ);
            }
            if(particle.posx < -BASE_SIZE*particle.scale){
                particle.posx = canvas.width+BASE_SIZE*(particle.scale+turbulenceZ);
            }
            drawSnowflake(particle);
        }
        last = timestamp;
        requestedFrame = window.requestAnimationFrame(nextFrame);
    }

    // This will resize and initialize the canvas
    prerenderAll();
    resize();

    function stop(){
        try{ window.cancelAnimationFrame(requestedFrame); }
        catch(e) {
            console.log("Couldn't stop");
            console.log(e);
        }
    }

    // Update horizontal speed based on how far the mouse is from
    // the middle of the canvas
    if(interactive){
        console.log("Interactivity is on");
        document.addEventListener("mousemove", updateHorSpeed);
    }

    //If the window is resized, resize the canvas accordingly
    window.addEventListener("resize", resize);
}