cloud particles random motion w/ hands moving and video rect

cloud particles random motion blue sky black jesus title

by Nick Hulea

HTML

<script src="http://use.typekit.net/aba1wjf.js"></script>
<canvas id="canvas"></canvas>
<div style="font-family:'helveticaCndBld';" />
<div style="font-family:'TrajanPro3Bold';" />

CSS

canvas {
    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

//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 = (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;
   ...