diff options
Diffstat (limited to 'js')
| -rw-r--r-- | js/hearts.js | 107 | ||||
| -rw-r--r-- | js/loadballoons.js | 48 |
2 files changed, 155 insertions, 0 deletions
diff --git a/js/hearts.js b/js/hearts.js new file mode 100644 index 00000000..897f8afd --- /dev/null +++ b/js/hearts.js @@ -0,0 +1,107 @@ +/* + 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<arr_hearts.length; i++) { + heart = arr_hearts[i]; + context.globalAlpha = heart.alpha; + context.drawImage(heart.image, heart.x, heart.y, heart.size, heart.size * heart.height/heart.width); + heart.y-=heart.speed; + heart.x = heart.x + heart.amplitude*Math.sin(heart.y*heart.frequency); + } + for(var i=0; i<arr_hearts.length; i++) { + if(arr_hearts[i].y<-100) { + pool.push(arr_hearts.splice(i,1)[0]); + break; + } + } + }; + + var init = function() { + canvas = document.createElement('canvas'); + canvas.height = window.innerHeight || html.clientHeight; + canvas.width = window.innerWidth || html.clientWidth; + var canvasStyle = canvas.style; + canvasStyle.position = 'fixed'; + canvasStyle.top = 0; + canvasStyle.left = 0; + canvasStyle.zIndex = 1138; + canvasStyle['pointerEvents'] = 'none'; + body = document.getElementsByTagName('body')[0]; + body.appendChild(canvas); + + res_heart = new Image(); + res_heart.onload = function() { + animate(); + }; + res_heart.src="/static/3rdbdayballoon2_75.png"; + + setTimeout(generateRandomHeart, settings.delay); + context = canvas.getContext('2d'); + }; + + return ({ + 'init': init + }); +}; diff --git a/js/loadballoons.js b/js/loadballoons.js new file mode 100644 index 00000000..c4cfdb4f --- /dev/null +++ b/js/loadballoons.js @@ -0,0 +1,48 @@ +if (active_page === "catalog" || active_page === "thread" || active_page === "index" || active_page === "ukko") { + +$(document).on("ready", function() { +if (window.Options && Options.get_tab('general')) { + Options.extend_tab("general", + "<fieldset><legend>Special Event Effects </legend>" + + ("<label class='event-effect' id='eventeffect'><input type='checkbox' /> Enable Special Event Effects</label>") + + "</fieldset>"); +} + +$('.event-effect').on('change', function(){ + var setting = $(this).attr('id'); + + localStorage[setting] = $(this).children('input').is(':checked'); + location.reload(); +}); + +if (!localStorage.eventeffect) { + localStorage.eventeffect = 'true'; +} + +function getSetting(key) { + return (localStorage[key] == 'true'); +} + +if (getSetting('eventeffect')) $('#eventeffect>input').prop('checked', 'checked'); + +function initBalloons() { //Pashe, influenced by tux, et al, WTFPL + if (!getSetting("eventeffect")) {return;} + +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(); +} +initBalloons(); +}); +} |