Smoke effect using particles

by SHELDON PASCIAK

HTML

<title>Canvas</title>
<script type="text/javascript">
// When the window has loaded, DOM is ready. Run the draw() function.

</script>

<body>
  <canvas id="myCanvas" width="800" height="800"></canvas>
</body>

CSS

#myCanvas{
    background:black;
}

JavaScript

// Create an array to store our particles
var particles = [];

// The amount of particles to render
var particleCount = 111;

// The maximum velocity in each direction
var maxVelocity = 5;

// The target frames per second (how often do we want to update / redraw the scene)
var targetFPS = 15;

// Set the dimensions of the canvas as variables so they can be used.
var canvasWidth = 800;
var canvasHeight = 800;

// Create an image object (only need one instance)
var imageObj = new Image();

// Once the image has been downloaded then set the image on all of the particles
imageObj.onload = function() {
    particles.forEach(function(particle) {
            particle.setImage(imageObj);
    });
};

// Once the callback is arranged then set the source of the image
imageObj.src = "http://www.blog.jonnycornwell.com/wp-content/uploads/2012/07/Smoke10.png";

// A function to create a particle object.
function Particle(context) {
    
    // Set the initial x and y positions
    this.x = 0;
    this.y = 0;

    this.destX=canvasWidth/2;
    this.destY=particles.length;//canvasHeight/2;     
    
    // Set the initial velocity
    this.xVelocity = 0;
    this.yVelocity = 0;
    
    // Set the radius
    this.radius = 1;

    // Store the context which will be used to draw the particle
    this.context = context;

    // The function to draw the particle on the canvas.
    this.draw = function() {
        
        // If an image is set draw it
        if(this.image){
            this.context.drawImage(this.image, this.x-128, this.y-128);             
            // If the image is being rendered do not draw the circle so break out of the draw function                
            return;
        }
        
        // Draw the circle as before, with the addition of using the position and the radius from this object.
        this.context.beginPath();
        this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
        this.context.fillStyle = "rgba(0, 255, 255,...