cloud particles linear motion

This is the actual linear motion particle demo updated with moving hands away from center: update Working !

by Nick Hulea

HTML

<canvas id="canvas"></canvas>
<div style="font-family:'helveticaCndBld';" />
<div style="font-family:'TrajanPro3Bold';" />

CSS

/*Simple reset*/
 * {
    margin: 0;
    padding: 0;
}
body {
    /*You can use any kind of background here.*/
    background-image:url(http://p1.pichost.me/640/41/1644656.jpg);
    background-size:cover;
    background-repeat:no-repeat;
}
canvas {
    display: block;
    position:absolute;
    overflow:hidden;
    top:0;
    left:0;
}
html {
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
    top:0;
    left:0;
}
@font-face {
    font-family:'helveticaCndBld';
    src: url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/hcb/helveticaneueltcom-bdcn.eot?#iefix') format('embedded-opentype'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/hcb/helveticaneueltcom-bdcn.woff') format('woff'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/hcb/helveticaneueltcom-bdcn.ttf') format('truetype'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/hcb/helveticaneueltcom-bdcn.svg#svgFontName') format('svg');
}
@font-face {
    font-family:'TrajanPro3Bold';
    src: url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.eot');
    src: url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.eot') format('embedded-opentype'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.woff') format('woff'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.ttf') format('truetype'), url('http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/as_font_bold/trajanpro3-bold.svg#TrajanPro3Bold') format('svg');
}

JavaScript

//Initializing the canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

//Image Cloud Array 
var clouds = [
    'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_2.png',
    'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_4.png',
    'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_3.png'];

//Canvas Images 
var img = new Image();
img.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_2.png';
var skyImg = new Image();
skyImg.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/black_jesus_concept_rough-copy_background.png';
var skyImg2 = new Image();
skyImg2.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/sky.jpg';
var rHand = new Image();
rHand.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/right-hand.png';
var lHand = new Image();
lHand.src = 'http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/left-hand.png';

//directions
var up = 90,
    right = 0,
    down = 270,
    left = 180;

var posX = 0;
var posY = 0;

//Text Init Value
fontSize = 0;

//Count
var v = isNaN(v) ? 0 : v;
var m = isNaN(m) ? 0 : m;

//Alpha
var alpha = 1.0;
var alpha2 = 1.0;
var scale = 0;
var scaleDirection = 0.01;

//Canvas Dimensions
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;

//Image Scaling vars
var transx = (canvas.width / 2);
var transy = (canvas.height / 2);
var scaleX = 0.0;
var scaleY = 0.0;

//Text Size Increase function
var upText = function (totalGrowth, time) {
    var growthPerFrame = time / totalGrowth / 60;
    fontSize += growthPerFrame;
    if (fontSize > totalGrowth) {
        fontSize = totalGrowth;
    }

};

//Image Scaling 
var imageZoom = function (imageSrc, scaleFactor,...