HTML5 Hearts

An HTML5 Valentine's with different text variations. Twitter: @SirKoik

by SirKoik

HTML

<canvas id="canvas1">text</canvas>
<div id="stats"> <span id="object-count" title="number of objects that are updating"></span>
    <br/> <span id="growing-count" title="number of objects that are growing"></span>
    <br/> <span id="finished-count" title="number of objects that have finished growing"></span>

</div>

CSS

body {
    overflow: hidden;
    font-family: sans-serif;
}
canvas {
    position: absolute;
    left: 0;
    top: 0;
}
#stats {
    position: fixed;
    bottom: 1em;
    right: 1em;
    font-size: 1em;
    padding: 0.3em;
    background-color: white;
    border-radius: 0.3em;
    display: none;
}

JavaScript

var objectProps = {
    'circles': {
        scaleFactor: 1.5,
        //maxObjects: 200,
        numObjects: 0
    },
    'hearts': {
        scaleFactor: 1,
        //maxObjects: 100,
        growStep: 0.5,
        numObjects: 0
    }
}

var presets = {
    'party': {
        tickInterval: 10,
		objectTypes: ['circles'],
        maxObjects: 200,
        drawChance: 1,
        colorRanges: [
			{
				hMin: 0, hMax: 360,
				sMin: 100, sMax: 100,
				lMin: 50, lMax: 50
			}
		]
    },
    'valentines': {
		objectTypes: ['hearts'],
        tickInterval: 100,
        maxObjects: 75,
        drawChance: 1,
        drawText: true,
        texts: [
            ['iteration', 'infatuation'],
            ['expanding', 'love'],
            ['serene', 'screen'],
            ['valentine', 'visual'],
            ['BĂ©zier', 'hearts'],
            ['eye', 'candy'],
            ['devoted', 'drawing']
        ],
        colorRanges: [
			{
				hMin: 340, hMax: 0,
				sMin: 100, sMax: 100,
				lMin: 30, lMax: 95
			}/*,
			{
				hMin: 280, hMax: 300,
				sMin: 100, sMax: 100,
				lMin: 50, lMax: 65
			},
            {
				hMin: 50, hMax: 70,
				sMin: 100, sMax: 100,
				lMin: 30, lMax: 95
			},
			{
				hMin: 100, hMax: 120,
				sMin: 100, sMax: 100,
				lMin: 30, lMax: 95
			} */           
		]
    }
};

var preset = (function getPresets() {
    var presetName = 'party';
    var date = new Date(),
        month = date.getMonth(),
        day = date.getDay();
    //if (month == 1 && day < 20) presetName = 'valentines';
    presetName = 'valentines';

    return presets[presetName];
})();

console.log(preset);

var zc = new ZoomingObjects(preset);
zc.init();

function ZoomingObjects(args) {
    var canvas = args.canvas || 'canvas1';
    var ctx, cW, cH;
    var scale = 1;
    var scaleFactor = args.scaleFactor || 1;
    
    var tickInterval = args.tickInterval || 500;
    var maxFPS = args.maxFPS || 30;

    var drawChance = args.drawChance || 0.5;

    var drawText =...