// variables |
var $window = $(window), gardenCtx, gardenCanvas, $garden, garden; |
var clientWidth = $(window).width(); |
var clientHeight = $(window).height(); |
|
$( function () { |
// setup garden |
$loveHeart = $( "#loveHeart" ); |
var offsetX = $loveHeart.width() / 2; |
var offsetY = $loveHeart.height() / 2 - 55; |
$garden = $( "#garden" ); |
gardenCanvas = $garden[0]; |
gardenCanvas.width = $( "#loveHeart" ).width(); |
gardenCanvas.height = $( "#loveHeart" ).height() |
gardenCtx = gardenCanvas.getContext( "2d" ); |
gardenCtx.globalCompositeOperation = "lighter" ; |
garden = new Garden(gardenCtx, gardenCanvas); |
|
$( "#content" ).css( "width" , $loveHeart.width() + $( "#code" ).width()); |
$( "#content" ).css( "height" , Math.max($loveHeart.height(), $( "#code" ).height())); |
$( "#content" ).css( "margin-top" , Math.max(($window.height() - $( "#content" ).height()) / 2, 10)); |
$( "#content" ).css( "margin-left" , Math.max(($window.width() - $( "#content" ).width()) / 2, 10)); |
|
// renderLoop |
setInterval( function () { |
garden.render(); |
}, Garden.options.growSpeed); |
}); |
|
$(window).resize( function () { |
var newWidth = $(window).width(); |
var newHeight = $(window).height(); |
if (newWidth != clientWidth && newHeight != clientHeight) { |
location.replace(location); |
} |
}); |
|
function getHeartPoint(angle) { |
var t = angle / Math.PI; |
var x = 19.5 * (16 * Math.pow(Math.sin(t), 3)); |
var y = - 20 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)); |
return new Array(offsetX + x, offsetY + y); |
} |
|
function startHeartAnimation() { |
var interval = 50; |
var angle = 10; |
var heart = new Array(); |
var animationTimer = setInterval( function () { |
var bloom = getHeartPoint(angle); |
var draw = true ; |
for ( var i = 0; i < heart.length; i++) { |
var p = heart[i]; |
var distance = Math.sqrt(Math.pow(p[0] - bloom[0], 2) + Math.pow(p[1] - bloom[1], 2)); |
if (distance < Garden.options.bloomRadius.max * 1.3) { |
draw = false ; |
break ; |
} |
} |
if (draw) { |
heart.push(bloom); |
garden.createRandomBloom(bloom[0], bloom[1]); |
} |
if (angle >= 30) { |
clearInterval(animationTimer); |
showMessages(); |
} else { |
angle += 0.2; |
} |
}, interval); |
} |
|
( function ($) { |
$.fn.typewriter = function () { |
this .each( function () { |
var $ele = $( this ), str = $ele.html(), progress = 0; |
$ele.html( '' ); |
var timer = setInterval( function () { |
var current = str.substr(progress, 1); |
if (current == '<' ) { |
progress = str.indexOf( '>' , progress) + 1; |
} else { |
progress++; |
} |
$ele.html(str.substring(0, progress) + (progress & 1 ? '_' : '' )); |
if (progress >= str.length) { |
clearInterval(timer); |
} |
}, 75); |
}); |
return this ; |
}; |
})(jQuery); |
|
function timeElapse(date){ |
var current = Date(); |
var seconds = (Date.parse(current) - Date.parse(date)) / 1000; |
var days = Math.floor(seconds / (3600 * 24)); |
seconds = seconds % (3600 * 24); |
var hours = Math.floor(seconds / 3600); |
if (hours < 10) { |
hours = "0" + hours; |
} |
seconds = seconds % 3600; |
var minutes = Math.floor(seconds / 60); |
if (minutes < 10) { |
minutes = "0" + minutes; |
} |
seconds = seconds % 60; |
if (seconds < 10) { |
seconds = "0" + seconds; |
} |
var result = "<span class=\"digit\">" + days + "</span> days <span class=\"digit\">" + hours + "</span> hours <span class=\"digit\">" + minutes + "</span> minutes <span class=\"digit\">" + seconds + "</span> seconds" ; |
$( "#elapseClock" ).html(result); |
} |
|
function showMessages() { |
adjustWordsPosition(); |
$( '#messages' ).fadeIn(5000, function () { |
showLoveU(); |
}); |
} |
|
function adjustWordsPosition() { |
$( '#words' ).css( "position" , "absolute" ); |
$( '#words' ).css( "top" , $( "#garden" ).position().top + 195); |
$( '#words' ).css( "left" , $( "#garden" ).position().left + 70); |
} |
|
function adjustCodePosition() { |
$( '#code' ).css( "margin-top" , ($( "#garden" ).height() - $( "#code" ).height()) / 2); |
} |
|
function showLoveU() { |
$( '#loveu' ).fadeIn(3000); |
} |