FelizNavidadFernetJS

by pjnovas

HTML

<a id="debug" href="#">mostrar/ocultar segmentos</a>
<br/>
<canvas id="canvas" width="600" height="600"></canvas>
<label id="coords"></label>

CSS

canvas {
    border: solid 1px silver;
    background-color: black;
}

JavaScript

var fernetjs = {};

fernetjs.config = {
    maxParticulas: [50, 200, 50],
    dibujarPoligono: false
};

fernetjs.imagenes = {};
fernetjs.imagenes.fondo = new Image();
fernetjs.imagenes.santa = new Image();

fernetjs.navidad = (function(){
    var reqAnimId,
        lastTime = Date.now(),
        time = 0,
        canvas,
        contexto,
        segmentos= [[99,291],[120,240],[156,218],[198,206],[204,171],[220,140],[237,106],[270,94],[307,108],[328,171],[342,186],[338,232],[357,241],[372,258],[383,282],[390,297],[390,237],[439,230],[446,220],[491,228],[520,227],[532,339]];
    particulas = [[], [], []];
    
    function crearParticulas(indice){
        var max = fernetjs.config.maxParticulas[indice];
        var ps = particulas[indice];
        if(max > ps.length){
            var x = Math.floor((Math.random()*canvas.width));
            ps.push({
                x: x,
                y: -Math.floor((Math.random()*400)+20),
                r: Math.floor((Math.random()*5)+1),
                vx: 0,
                vy: Math.floor((Math.random()*20)+10),
                initX: x,
                sinTime: Math.floor((Math.random()*7000)+3000),
                amp: Math.floor((Math.random()*10)+1),
                opacity: Math.floor((Math.random()*10)+5)/10
            });
        }
    }
    
    function actualizarParticulas(dt, indice){
        var ps = particulas[indice];
        for(var i=0; i < ps.length; i++){
            if (ps[i].colision <= 0 || !ps[i].colision){
                ps[i].x = ps[i].amp * Math.sin(time * 2 * Math.PI / ps[i].sinTime) + ps[i].initX;
                ps[i].y += ps[i].vy * dt;
                
                if (ps[i].y + ps[i].r > canvas.height){
                    ps.splice(i, 1);
                }
                else if(indice === 1 && !ps[i].colision && colisionSegmentos(ps[i])){
                    ps[i].colision = 20;
                    ps[i].initX = ps[i].x;
                }
            }
            else {
           ...