Super Slow Clouds

particle simulation of super slow clouds

by Nick Hulea

HTML

<canvas id="myCanvas" width="400" height="400"></canvas>

CSS

#myCanvas {
    background:;
}

JavaScript

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

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

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

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

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

function updateBounds() {
    canvasHeight = $(window).height();
    canvasWidth = $(window).width();

    $('#myCanvas').attr("height", $(window).height());
    $('#myCanvas').attr("width", $(window).width());
}
$(window).resize(updateBounds);
updateBounds();

// 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://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_2.png";

// A function to create a particle object.
function Particle(context) {

    // Set the initial x and y positions
    this.x = 0;
    this.y = 0;

    // Set the initial velocity
    this.xVelocity = 0;
    this.yVelocity = 0;

    // Set the radius
    this.radius = 5;

    // 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.
       ...