Benjamin Southall
7 years ago
2 changed files with 155 additions and 0 deletions
@ -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 |
|||
}); |
|||
}; |
@ -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(); |
|||
}); |
|||
} |
Loading…
Reference in new issue