dragon particles

by Nick Hulea

HTML

<canvas id="mainCanvas" width="1900px" height="900px"></canvas>

CSS

/*
* {
    padding: 0px;
    margin: 0px;
}
*/
 #particleCount {
    z-index: 101;
    background-color: #d3d3d3;
    position: absolute;
    left: 240px;
    margin: 5px;
    padding: 2px;
    width: 160px;
}
canvas {
}

JavaScript

// ==ClosureCompiler==
// @output_file_name default.js
// @compilation_level ADVANCED_OPTIMIZATIONS
// ==/ClosureCompiler==




var ParticleEngine = (function () {

    var screenWidth;
    var screenHeight;
    var canvas;
    var ctx;
    var acceleration;
    var particles;
    var particleSize;
    var numParticlesToAddAtOnce;
    var emitLocation;
    var velocityRange;

    var dragon = function () {
        var newImg = new Image();
        newImg.crossOrigin = "Anonymous";
        newImg.src = 'http://i.imgur.com/Hens46Y.png';
        newImg.onload = function () {
            var img = canvas.toDataURL('image/png');
            ctx.drawImage(newImg, 0, 0);
        };

    };


    var runPE = function () {

        ctx.fillStyle = "#999";
        ctx.fillRect(0, 0, screenWidth, screenHeight);



        for (var p = 0; p < numParticlesToAddAtOnce; p++) {
            addParticle();
        }

        for (var i = 0; i < particles.length; i++) {
            var particle = particles[i];
            drawParticle(particle);
            updateParticle(particle, i);
        }
            dragon();

    };

    var addParticle = function () {
        var particle = createParticle();
        particles.push(particle);
    };

    var createParticle = function () {
        var vRangeX = velocityRange.xRange;
        var vRangeY = velocityRange.yRange;

        var particle = {
            location: {
                x: emitLocation.x,
                y: emitLocation.y
            },
            velocity: {
                x: vRangeX[0] + (Math.random() * vRangeX[1] * 2),
                y: vRangeY[0] + (Math.random() * vRangeY[1] * 2)
            }
        };

        return particle;
    };

    var updateParticle = function (particle, index) {
        particle.location.x += particle.velocity.x;
        particle.location.y += particle.velocity.y;
        particle.velocity.x += acceleration.x;
        particle.velocity.y += acceleration.y;

        if...