sparkle.js

var canvas;
var stage;
var imgSeq = new Image(); // The image for the sparkle animation
var sprite; // The animated sparkle template to clone
var fpsLabel;
var fader; // Semi fades the Background to give a tracing effect
var spkls; // Container for all the sparkles

function init() {
    // create a new stage and point it at our canvas:
    canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    stage = new createjs.StageGL(canvas, {
        preserveBuffer: true,
        antialias: true,
        transparent: true,
    });

    // attach mouse handlers directly to the source canvas.
    // better than calling from canvas tag for cross browser compatibility:
    stage.addEventListener("stagemousemove", moveCanvas);
    stage.addEventListener("stagemousedown", clickCanvas);

    var img = new Image();
    img.crossOrigin = "Anonymous";
    img.onload = imageLoaded;
    img.src =
        "https://lab.gskinner.com/codepen/_assets/art/spritesheet_sparkle.png";
}

function handleResize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    fader.graphics
        .clear()
        .beginFill("rgba(0,0,0, 0.3)")
        .drawRect(0, 0, canvas.width, canvas.height)
        .endFill();
    fader.cache(0, 0, canvas.width, canvas.height, 1 / 32);
    stage.updateViewport(canvas.width, canvas.height);
    stage.update();
}

function imageLoaded() {
    // define simple sprite sheet data specifying the image(s) to use, the size of the frames,
    // and the registration point of the frame
    // it will auto-calculate the number of frames from the image dimensions and loop them
    var data = {
        images: [this], //'this' is a reference to the loaded image. Image loaded crossOrigin will throw security errors. For more information on Cross Origin Issues: https://www.createjs.com/docs/easeljs/classes/SpriteSheet.html
        frames: {
            width: 21,
            height: 23,
            regX: 10,
            regY: 11,
        },
    };
    // set up an animation instance, which we will clone
    sprite = new createjs.Sprite(new createjs.SpriteSheet(data));
    // setup slow fadeout
    fader = new createjs.Shape();
    stage.addChild(fader);
    var gfx = fader.graphics;
    gfx.beginFill("rgba(255,255,255, 0)").drawRect(0, 0, 1024, 704).endFill();
    fader.cache(0, 0, 1024, 1024, 1 / 32); // Power of two textures smooth better, but we don't need full resolution either
    spkls = new createjs.Container();
    stage.addChild(spkls);
    // add a text object to output the current FPS:
    /*fpsLabel = new createjs.Text("------ @ -- fps", "bold 14px Arial", "#FFF");
  stage.addChild(fpsLabel);
  fpsLabel.x = 10;
  fpsLabel.y = 20;
  fpsLabel.cache(0, 0, 128, 16);*/
    // start the tick and point it at the window so we can do some work before updating the stage:
    createjs.Ticker.timingMode = createjs.Ticker.RAF;
    createjs.Ticker.addEventListener("tick", tick);

    handleResize();
    window.addEventListener("resize", handleResize);
}
function tick(event) {
    // loop through all of the active sparkles on stage:
    var l = spkls.numChildren;
    var m = event.delta / 16;
    for (var i = 0; i < l; i++) {
        var sparkle = spkls.getChildAt(i);
        if (--sparkle.life <= 0) {
            spkls.removeChild(sparkle);
            i--;
            l--;
            continue;
        }
        // apply gravity and friction
        sparkle.vY += 0.1 * m;
        // update position, scale, and alpha:
        sparkle.x += sparkle.vX * m;
        sparkle.y += sparkle.vY * m;
        sparkle.alpha = sparkle.alphaStart * (sparkle.life / sparkle.lifeMax);
        // remove sparkles that are off screen or not invisible
        if (sparkle.y > canvas.height) {
            sparkle.vY *= -(Math.random() * 0.1 + 0.8);
            sparkle.vX += Math.cos(Math.random() * Math.PI * 2) * 3;
        } else if (sparkle.y < 0) {
            sparkle.vY *= 0.9;
        }
        if (sparkle.x > canvas.width || sparkle.x < 0) {
            sparkle.vX *= -1;
        }
    }
    /*fpsLabel.text = l + " @ " + Math.round(createjs.Ticker.getMeasuredFPS()) + " fps";
  fpsLabel.updateCache();*/
    // draw the updates to stage
    stage.update(event);
}
// sparkle explosion
function clickCanvas(evt) {
    addSparkles((Math.random() * 500 + 200) | 0, stage.mouseX, stage.mouseY, 1);
}
// sparkle trail
function moveCanvas(evt) {
    addSparkles((Math.random() * 6 + 3) | 0, stage.mouseX, stage.mouseY, 0.1);
}
function addSparkles(count, x, y, speed) {
    // create the specified number of sparkles
    for (var i = 0; i < count; i++) {
        // clone the original sparkle, so we don't need to set shared properties:
        var sparkle = sprite.clone();
        // set display properties:
        sparkle.x = x;
        sparkle.y = y;
        sparkle.rotation = Math.random() * 360;
        sparkle.alpha = sparkle.alphaStart = Math.random() * 0.7 + 0.6;
        sparkle.scale = Math.random() + 0.3;
        sparkle.life = sparkle.lifeMax = Math.random() * 100 + 50;
        // set up velocities:
        var a = Math.PI * 2 * Math.random();
        var v = (Math.random() - 0.5) * 30 * speed;
        sparkle.vX = Math.cos(a) * v;
        sparkle.vY = Math.sin(a) * v;
        // start the animation on a random frame:
        sparkle.gotoAndPlay(
            (Math.random() * sparkle.spriteSheet.getNumFrames()) | 0
        );
        // add to the display list:
        spkls.addChild(sparkle);
    }
}

init();