/* Script: Floating Hearts using Canvas and native JS Author: Abhinav Rastogi Date: Feb 14, 2013 Sample Usage: floatingLove({ 'minSpeed': 1.5, //Minimum vertical speed 'maxSpeed': 2, //Maximum vertical speed 'minAmplitude': 0.5, //Minimum amplitude (>0) 'maxAmplitude': 1.5, //Maximum amplitude (>0) 'minFrequency': 0.08, //Maximum Frequency (>0) 'maxFrequency': 0.1, //Maximum Frequency (>0) 'minAlpha': 0.7, //Minimum opacity (0-1) 'maxAlpha': 0.8, //Maximum opacity (0-1) 'minScale': 0.2, //Minimum size multiplier (0-1) 'maxScale': 0.8, //Maximum size multiplier (0-1) 'interval': 1000, //Time gap between each heart 'delay': 1000 //Starting delay from initialization }).init(); */ var floatingLove = function(settings) { var canvas, context; var res_heart, body; var pool = new Array(); var arr_hearts = new Array(); window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000/60); }; })(); var generateRandomHeart = function() { var obj_heart; if(pool.length>0) { obj_heart=pool.pop(); } else { obj_heart={}; obj_heart.image=res_heart; } obj_heart.x = (window.innerWidth-100)*Math.random(); obj_heart.y = window.innerHeight; obj_heart.speed = settings.minSpeed + (settings.maxSpeed-settings.minSpeed)*Math.random(); obj_heart.amplitude = settings.minAmplitude + (settings.maxAmplitude - settings.minAmplitude) * Math.random(); obj_heart.frequency = settings.minFrequency + (settings.maxFrequency - settings.minFrequency) * Math.random(); obj_heart.alpha = settings.minAlpha + (settings.maxAlpha - settings.minAlpha)*Math.random(); obj_heart.size = (res_heart.height * settings.minScale) + (res_heart.height*(settings.maxScale - settings.minScale)) * Math.random(); obj_heart.width = res_heart.width; obj_heart.height = res_heart.height; arr_hearts.push(obj_heart); setTimeout(generateRandomHeart, settings.interval); }; var animate = function() { requestAnimFrame(function() { animate(); }); context.clearRect(0,0,canvas.width,canvas.height); var heart; for(var i=0; i