cloud particles random motion w/ hands moving and video rect video to be added

cloud particles random motion blue sky black jesus title

by Nick Hulea

HTML

<script src="http://use.typekit.net/aba1wjf.js"></script>
<div id="out">
    <video id="vid" controls poster="http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/Snowball.png">
        <source src="http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/Snowball.mp4" type="video/mp4" />
        <source src="http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/Snowball.ogv" type="video/ogg" />
        <source src="http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/Snowball.mp4" type="video/webm" />
<em>Sorry, your browser doesn't support HTML5 video.</em>

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

CSS

html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            border: 0;
            overflow: hidden;
            /*  Disable scrollbars */
            display: block;
            /* No floating content on sides */
        }
        video {
            z-index: 1;
            height: 50%;
            width: 50%;
            max-width: 700px;
            min-width: 700px;
            min-height: 389px;
            max-height: 389px;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    }
    canvas {
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
    }
    /*
        #out {
            height: 50%;
            width: 50%;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
*/
    /*
        #out {
            width: 690px;
            height: 425px;
            margin: 0 auto;
            padding: 0;
            position: absolute;
            left: -50%;
            right: -50%;
        }
*/
}
@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:...

JavaScript

//Typekit
try {
    Typekit.load();
} catch (e) {}

//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'];

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

//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';

//RECT SIZE
var rw = 345;
var rh = 425;

//Text Init Value
fontSize = 0;

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

//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 = (W / 2);
var transy = (H / 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...