cloud particles linear motion
working
HTML
<canvas id="canvas"></canvas>
JavaScript
//Lets create a simple particle system in HTML5 canvas and JS
//Initializing the canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_2.png';
var skyImg = new Image();
skyImg.src = 'http://p1.pichost.me/640/41/1644656.jpg';
//Canvas dimensions
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
//Lets create an array of particles
var particles = [];
for (var i = 0; i < 100; i++) {
//This will add 50 particles to the array with random positions
particles.push(new create_particle());
}
//Lets create a function which will help us to create multiple particles
function create_particle() {
//Random position on the canvas
this.x = Math.random() * W;
this.y = Math.random() * H;
//Lets add random velocity to each particle
this.vx = Math.random() * 20 - 1;
this.vy = Math.random() * 20 - 1;
//Random colors
var r = Math.random() * 255 >> 0;
var g = Math.random() * 255 >> 0;
var b = Math.random() * 255 >> 0;
this.color = "rgba(" + r + ", " + g + ", " + b + ", 0.5)";
//Random size
this.radius = Math.random() * 20 + 20;
}
var x = 100;
var y = 100;
//Lets animate the particle
function draw() {
//Moving this BG paint code insde draw() will help remove the trail
//of the particle
//Lets paint the canvas black
//But the BG paint shouldn't blend with the previous frame
ctx.globalCompositeOperation = "source-over";
//Lets reduce the opacity of the BG paint to give the final touch
ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.fillRect(0, 0, W, H);
ctx.drawImage(skyImg, 0, 0, W, H);
//Lets blend the particle with the BG
//ctx.globalCompositeOperation = "lighter";
//Lets draw particles from the array now
for (var t = 0; t < particles.length; t++) {
var p =...