rainyday.js
/**
* Defines a new instance of the rainyday.js.
* @param options options element with script parameters
* @param canvas to be used (if not defined a new one will be created)
*/
function RainyDay(options, canvas) {
if (this === window) { //if *this* is the window object, start over with a *new* object
return new RainyDay(options);
}
this.img = options.image;
var defaults = {
opacity: 1,
blur: 10,
crop: [0, 0, this.img.naturalWidth, this.img.naturalHeight],
enableSizeChange: true,
parentElement: document.getElementsByTagName('body')[0],
fps: 30,
fillStyle: '#8ED6FF',
enableCollisions: true,
gravityThreshold: 3,
gravityAngle: Math.PI / 2,
gravityAngleVariance: 0,
reflectionScaledownFactor: 5,
reflectionDropMappingWidth: 200,
reflectionDropMappingHeight: 200,
width: this.img.clientWidth,
height: this.img.clientHeight,
position: 'absolute',
top: 0,
left: 0
};
// add the defaults to options
for (var option in defaults) {
if (typeof options[option] === 'undefined') {
options[option] = defaults[option];
}
}
this.options = options;
this.drops = [];
// prepare canvas elements
this.canvas = canvas || this.prepareCanvas();
this.prepareBackground();
this.prepareGlass();
// assume defaults
this.reflection = this.REFLECTION_MINIATURE;
this.trail = this.TRAIL_DROPS;
this.gravity = this.GRAVITY_NON_LINEAR;
this.collision = this.COLLISION_SIMPLE;
// set polyfill of requestAnimationFrame
this.setRequestAnimFrame();
}
/**
* Create the main canvas over a given element
* @returns HTMLElement the canvas
*/
RainyDay.prototype.prepareCanvas = function() {
var canvas = document.createElement('canvas');
canvas.style.position = this.options.position;
canvas.style.top = this.options.top;
canvas.style.left = this.options.left;
canvas.width = this.options.width;
canvas.height = this.options.height;
this.options.parentElement.appendChild(canvas);
if (this.options.enableSizeChange) {
this.setResizeHandler();
}
return canvas;
};
RainyDay.prototype.setResizeHandler = function() {
// use setInterval if oneresize event already use by other.
if (window.onresize !== null) {
window.setInterval(this.checkSize.bind(this), 100);
} else {
window.onresize = this.checkSize.bind(this);
window.onorientationchange = this.checkSize.bind(this);
}
};
/**
* Periodically check the size of the underlying element
*/
RainyDay.prototype.checkSize = function() {
var clientWidth = this.img.clientWidth;
var clientHeight = this.img.clientHeight;
var clientOffsetLeft = this.img.offsetLeft;
var clientOffsetTop = this.img.offsetTop;
var canvasWidth = this.canvas.width;
var canvasHeight = this.canvas.height;
var canvasOffsetLeft = this.canvas.offsetLeft;
var canvasOffsetTop = this.canvas.offsetTop;
if (canvasWidth !== clientWidth || canvasHeight !== clientHeight) {
this.canvas.width = clientWidth;
this.canvas.height = clientHeight;
this.prepareBackground();
this.glass.width = this.canvas.width;
this.glass.height = this.canvas.height;
this.prepareReflections();
}
if (canvasOffsetLeft !== clientOffsetLeft || canvasOffsetTop !== clientOffsetTop) {
this.canvas.offsetLeft = clientOffsetLeft;
this.canvas.offsetTop = clientOffsetTop;
}
};
/**
* Start animation loop
*/
RainyDay.prototype.animateDrops = function() {
if (this.addDropCallback) {
this.addDropCallback();
}
// |this.drops| array may be changed as we iterate over drops
var dropsClone = this.drops.slice();
var newDrops = [];
for (var i = 0; i < dropsClone.length; ++i) {
if (dropsClone[i].animate()) {
newDrops.push(dropsClone[i]);
}
}
this.drops = newDrops;
window.requestAnimFrame(this.animateDrops.bind(this));
};
/**
* Polyfill for requestAnimationFrame
*/
RainyDay.prototype.setRequestAnimFrame = function() {
var fps = this.options.fps;
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / fps);
};
})();
};
/**
* Create the helper canvas for rendering raindrop reflections.
*/
RainyDay.prototype.prepareReflections = function() {
this.reflected = document.createElement('canvas');
this.reflected.width = this.canvas.width / this.options.reflectionScaledownFactor;
this.reflected.height = this.canvas.height / this.options.reflectionScaledownFactor;
var ctx = this.reflected.getContext('2d');
ctx.drawImage(this.img, this.options.crop[0], this.options.crop[1], this.options.crop[2], this.options.crop[3], 0, 0, this.reflected.width, this.reflected.height);
};
/**
* Create the glass canvas.
*/
RainyDay.prototype.prepareGlass = function() {
this.glass = document.createElement('canvas');
this.glass.width = this.canvas.width;
this.glass.height = this.canvas.height;
this.context = this.glass.getContext('2d');
};
/**
* Main function for starting rain rendering.
* @param presets list of presets to be applied
* @param speed speed of the animation (if not provided or 0 static image will be generated)
*/
RainyDay.prototype.rain = function(presets, speed) {
// prepare canvas for drop reflections
if (this.reflection !== this.REFLECTION_NONE) {
this.prepareReflections();
}
this.animateDrops();
// animation
this.presets = presets;
this.PRIVATE_GRAVITY_FORCE_FACTOR_Y = (this.options.fps * 0.001) / 25;
this.PRIVATE_GRAVITY_FORCE_FACTOR_X = ((Math.PI / 2) - this.options.gravityAngle) * (this.options.fps * 0.001) / 50;
// prepare gravity matrix
if (this.options.enableCollisions) {
// calculate max radius of a drop to establish gravity matrix resolution
var maxDropRadius = 0;
for (var i = 0; i < presets.length; i++) {
if (presets[i][0] + presets[i][1] > maxDropRadius) {
maxDropRadius = Math.floor(presets[i][0] + presets[i][1]);
}
}
if (maxDropRadius > 0) {
// initialize the gravity matrix
var mwi = Math.ceil(this.canvas.width / maxDropRadius);
var mhi = Math.ceil(this.canvas.height / maxDropRadius);
this.matrix = new CollisionMatrix(mwi, mhi, maxDropRadius);
} else {
this.options.enableCollisions = false;
}
}
for (var i = 0; i < presets.length; i++) {
if (!presets[i][3]) {
presets[i][3] = -1;
}
}
var lastExecutionTime = 0;
this.addDropCallback = function() {
var timestamp = new Date().getTime();
if (timestamp - lastExecutionTime < speed) {
return;
}
lastExecutionTime = timestamp;
var context = this.canvas.getContext('2d');
context.clearRect(0, 0, this.canvas.width, this.canvas.height);
context.drawImage(this.background, 0, 0, this.canvas.width, this.canvas.height);
// select matching preset
var preset;
for (var i = 0; i < presets.length; i++) {
if (presets[i][2] > 1 || presets[i][3] === -1) {
if (presets[i][3] !== 0) {
presets[i][3]--;
for (var y = 0; y < presets[i][2]; ++y) {
this.putDrop(new Drop(this, Math.random() * this.canvas.width, Math.random() * this.canvas.height, presets[i][0], presets[i][1]));
}
}
} else if (Math.random() < presets[i][2]) {
preset = presets[i];
break;
}
}
if (preset) {
this.putDrop(new Drop(this, Math.random() * this.canvas.width, Math.random() * this.canvas.height, preset[0], preset[1]));
}
context.save();
context.globalAlpha = this.options.opacity;
context.drawImage(this.glass, 0, 0, this.canvas.width, this.canvas.height);
context.restore();
}
.bind(this);
};
/**
* Adds a new raindrop to the animation.
* @param drop drop object to be added to the animation
*/
RainyDay.prototype.putDrop = function(drop) {
drop.draw();
if (this.gravity && drop.r > this.options.gravityThreshold) {
if (this.options.enableCollisions) {
this.matrix.update(drop);
}
this.drops.push(drop);
}
};
/**
* Clear the drop and remove from the list if applicable.
* @drop to be cleared
* @force force removal from the list
* result if true animation of this drop should be stopped
*/
RainyDay.prototype.clearDrop = function(drop, force) {
var result = drop.clear(force);
if (result) {
var index = this.drops.indexOf(drop);
if (index >= 0) {
this.drops.splice(index, 1);
}
}
return result;
};
/**
* Defines a new raindrop object.
* @param rainyday reference to the parent object
* @param centerX x position of the center of this drop
* @param centerY y position of the center of this drop
* @param min minimum size of a drop
* @param base base value for randomizing drop size
*/
function Drop(rainyday, centerX, centerY, min, base) {
this.x = Math.floor(centerX);
this.y = Math.floor(centerY);
this.r = (Math.random() * base) + min;
this.rainyday = rainyday;
this.context = rainyday.context;
this.reflection = rainyday.reflected;
}
/**
* Draws a raindrop on canvas at the current position.
*/
Drop.prototype.draw = function() {
this.context.save();
this.context.beginPath();
var orgR = this.r;
this.r = 0.95 * this.r;
if (this.r < 3) {
this.context.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
this.context.closePath();
} else if (this.colliding || this.yspeed > 2) {
if (this.colliding) {
var collider = this.colliding;
this.r = 1.001 * (this.r > collider.r ? this.r : collider.r);
this.x += (collider.x - this.x);
this.colliding = null;
}
var yr = 1 + 0.1 * this.yspeed;
this.context.moveTo(this.x - this.r / yr, this.y);
this.context.bezierCurveTo(this.x - this.r, this.y - this.r * 2, this.x + this.r, this.y - this.r * 2, this.x + this.r / yr, this.y);
this.context.bezierCurveTo(this.x + this.r, this.y + yr * this.r, this.x - this.r, this.y + yr * this.r, this.x - this.r / yr, this.y);
} else {
this.context.arc(this.x, this.y, this.r * 0.9, 0, Math.PI * 2, true);
this.context.closePath();
}
this.context.clip();
this.r = orgR;
if (this.rainyday.reflection) {
this.rainyday.reflection(this);
}
this.context.restore();
};
/**
* Clears the raindrop region.
* @param force force stop
* @returns Boolean true if the animation is stopped
*/
Drop.prototype.clear = function(force) {
this.context.clearRect(this.x - this.r - 1, this.y - this.r - 2, 2 * this.r + 2, 2 * this.r + 2);
if (force) {
this.terminate = true;
return true;
}
if ((this.y - this.r > this.rainyday.h) || (this.x - this.r > this.rainyday.w) || (this.x + this.r < 0)) {
// over edge so stop this drop
return true;
}
return false;
};
/**
* Moves the raindrop to a new position according to the gravity.
*/
Drop.prototype.animate = function() {
if (this.terminate) {
return false;
}
var stopped = this.rainyday.gravity(this);
if (!stopped && this.rainyday.trail) {
this.rainyday.trail(this);
}
if (this.rainyday.options.enableCollisions) {
var collisions = this.rainyday.matrix.update(this, stopped);
if (collisions) {
this.rainyday.collision(this, collisions);
}
}
return !stopped || this.terminate;
};
/**
* TRAIL function: no trail at all
*/
RainyDay.prototype.TRAIL_NONE = function() {
// nothing going on here
};
/**
* TRAIL function: trail of small drops (default)
* @param drop raindrop object
*/
RainyDay.prototype.TRAIL_DROPS = function(drop) {
if (!drop.trailY || drop.y - drop.trailY >= Math.random() * 100 * drop.r) {
drop.trailY = drop.y;
this.putDrop(new Drop(this, drop.x + (Math.random() * 2 - 1) * Math.random(), drop.y - drop.r - 5, Math.ceil(drop.r / 5), 0));
}
};
/**
* TRAIL function: trail of unblurred image
* @param drop raindrop object
*/
RainyDay.prototype.TRAIL_SMUDGE = function(drop) {
var y = drop.y - drop.r - 3;
var x = drop.x - drop.r / 2 + (Math.random() * 2);
if (y < 0 || x < 0) {
return;
}
this.context.drawImage(this.clearbackground, x, y, drop.r, 2, x, y, drop.r, 2);
};
/**
* GRAVITY function: no gravity at all
* @returns Boolean true if the animation is stopped
*/
RainyDay.prototype.GRAVITY_NONE = function() {
return true;
};
/**
* GRAVITY function: linear gravity
* @param drop raindrop object
* @returns Boolean true if the animation is stopped
*/
RainyDay.prototype.GRAVITY_LINEAR = function(drop) {
if (this.clearDrop(drop)) {
return true;
}
if (drop.yspeed) {
drop.yspeed += this.PRIVATE_GRAVITY_FORCE_FACTOR_Y * Math.floor(drop.r);
drop.xspeed += this.PRIVATE_GRAVITY_FORCE_FACTOR_X * Math.floor(drop.r);
} else {
drop.yspeed = this.PRIVATE_GRAVITY_FORCE_FACTOR_Y;
drop.xspeed = this.PRIVATE_GRAVITY_FORCE_FACTOR_X;
}
drop.y += drop.yspeed;
drop.draw();
return false;
};
/**
* GRAVITY function: non-linear gravity (default)
* @param drop raindrop object
* @returns Boolean true if the animation is stopped
*/
RainyDay.prototype.GRAVITY_NON_LINEAR = function(drop) {
if (this.clearDrop(drop)) {
return true;
}
if (drop.collided) {
drop.collided = false;
drop.seed = Math.floor(drop.r * Math.random() * this.options.fps);
drop.skipping = false;
drop.slowing = false;
} else if (!drop.seed || drop.seed < 0) {
drop.seed = Math.floor(drop.r * Math.random() * this.options.fps);
drop.skipping = drop.skipping === false ? true : false;
drop.slowing = true;
}
drop.seed--;
if (drop.yspeed) {
if (drop.slowing) {
drop.yspeed /= 1.1;
drop.xspeed /= 1.1;
if (drop.yspeed < this.PRIVATE_GRAVITY_FORCE_FACTOR_Y) {
drop.slowing = false;
}
} else if (drop.skipping) {
drop.yspeed = this.PRIVATE_GRAVITY_FORCE_FACTOR_Y;
drop.xspeed = this.PRIVATE_GRAVITY_FORCE_FACTOR_X;
} else {
drop.yspeed += 1 * this.PRIVATE_GRAVITY_FORCE_FACTOR_Y * Math.floor(drop.r);
drop.xspeed += 1 * this.PRIVATE_GRAVITY_FORCE_FACTOR_X * Math.floor(drop.r);
}
} else {
drop.yspeed = this.PRIVATE_GRAVITY_FORCE_FACTOR_Y;
drop.xspeed = this.PRIVATE_GRAVITY_FORCE_FACTOR_X;
}
if (this.options.gravityAngleVariance !== 0) {
drop.xspeed += ((Math.random() * 2 - 1) * drop.yspeed * this.options.gravityAngleVariance);
}
drop.y += drop.yspeed;
drop.x += drop.xspeed;
drop.draw();
return false;
};
/**
* Utility function to return positive min value
* @param val1 first number
* @param val2 second number
*/
RainyDay.prototype.positiveMin = function(val1, val2) {
var result = 0;
if (val1 < val2) {
if (val1 <= 0) {
result = val2;
} else {
result = val1;
}
} else {
if (val2 <= 0) {
result = val1;
} else {
result = val2;
}
}
return result <= 0 ? 1 : result;
};
/**
* REFLECTION function: no reflection at all
*/
RainyDay.prototype.REFLECTION_NONE = function() {
this.context.fillStyle = this.options.fillStyle;
this.context.fill();
};
/**
* REFLECTION function: miniature reflection (default)
* @param drop raindrop object
*/
RainyDay.prototype.REFLECTION_MINIATURE = function(drop) {
var sx = Math.max((drop.x - this.options.reflectionDropMappingWidth) / this.options.reflectionScaledownFactor, 0);
var sy = Math.max((drop.y - this.options.reflectionDropMappingHeight) / this.options.reflectionScaledownFactor, 0);
var sw = this.positiveMin(this.options.reflectionDropMappingWidth * 2 / this.options.reflectionScaledownFactor, this.reflected.width - sx);
var sh = this.positiveMin(this.options.reflectionDropMappingHeight * 2 / this.options.reflectionScaledownFactor, this.reflected.height - sy);
var dx = Math.max(drop.x - 1.1 * drop.r, 0);
var dy = Math.max(drop.y - 1.1 * drop.r, 0);
this.context.drawImage(this.reflected, sx, sy, sw, sh, dx, dy, drop.r * 2, drop.r * 2);
};
/**
* COLLISION function: default collision implementation
* @param drop one of the drops colliding
* @param collisions list of potential collisions
*/
RainyDay.prototype.COLLISION_SIMPLE = function(drop, collisions) {
var item = collisions;
var drop2;
while (item != null) {
var p = item.drop;
if (Math.sqrt(Math.pow(drop.x - p.x, 2) + Math.pow(drop.y - p.y, 2)) < (drop.r + p.r)) {
drop2 = p;
break;
}
item = item.next;
}
if (!drop2) {
return;
}
// rename so that we're dealing with low/high drops
var higher,
lower;
if (drop.y > drop2.y) {
higher = drop;
lower = drop2;
} else {
higher = drop2;
lower = drop;
}
this.clearDrop(lower);
// force stopping the second drop
this.clearDrop(higher, true);
this.matrix.remove(higher);
lower.draw();
lower.colliding = higher;
lower.collided = true;
};
/**
* Resizes canvas, draws original image and applies blurring algorithm.
*/
RainyDay.prototype.prepareBackground = function() {
this.background = document.createElement('canvas');
this.background.width = this.canvas.width;
this.background.height = this.canvas.height;
this.clearbackground = document.createElement('canvas');
this.clearbackground.width = this.canvas.width;
this.clearbackground.height = this.canvas.height;
var context = this.background.getContext('2d');
context.clearRect(0, 0, this.canvas.width, this.canvas.height);
context.drawImage(this.img, this.options.crop[0], this.options.crop[1], this.options.crop[2], this.options.crop[3], 0, 0, this.canvas.width, this.canvas.height);
context = this.clearbackground.getContext('2d');
context.clearRect(0, 0, this.canvas.width, this.canvas.height);
context.drawImage(this.img, this.options.crop[0], this.options.crop[1], this.options.crop[2], this.options.crop[3], 0, 0, this.canvas.width, this.canvas.height);
if (!isNaN(this.options.blur) && this.options.blur >= 1) {
this.stackBlurCanvasRGB(this.canvas.width, this.canvas.height, this.options.blur);
}
};
/**
* Implements the Stack Blur Algorithm (@see http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html).
* @param width width of the canvas
* @param height height of the canvas
* @param radius blur radius
*/
RainyDay.prototype.stackBlurCanvasRGB = function(width, height, radius) {
var shgTable = [
[0, 9],
[1, 11],
[2, 12],
[3, 13],
[5, 14],
[7, 15],
[11, 16],
[15, 17],
[22, 18],
[31, 19],
[45, 20],
[63, 21],
[90, 22],
[127, 23],
[181, 24]
];
var mulTable = [
512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512,
454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512,
482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456,
437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512,
497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328,
320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456,
446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335,
329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512,
505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405,
399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328,
324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271,
268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456,
451, 446, 442, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388,
385, 381, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335,
332, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292,
289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259
];
radius |= 0;
var context = this.background.getContext('2d');
var imageData = context.getImageData(0, 0, width, height);
var pixels = imageData.data;
var x,
y,
i,
p,
yp,
yi,
yw,
rSum,
gSum,
bSum,
rOutSum,
gOutSum,
bOutSum,
rInSum,
gInSum,
bInSum,
pr,
pg,
pb,
rbs;
var radiusPlus1 = radius + 1;
var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2;
var stackStart = new BlurStack();
var stackEnd = new BlurStack();
var stack = stackStart;
for (i = 1; i < 2 * radius + 1; i++) {
stack = stack.next = new BlurStack();
if (i === radiusPlus1) {
stackEnd = stack;
}
}
stack.next = stackStart;
var stackIn = null;
var stackOut = null;
yw = yi = 0;
var mulSum = mulTable[radius];
var shgSum;
for (var ssi = 0; ssi < shgTable.length; ++ssi) {
if (radius <= shgTable[ssi][0]) {
shgSum = shgTable[ssi - 1][1];
break;
}
}
for (y = 0; y < height; y++) {
rInSum = gInSum = bInSum = rSum = gSum = bSum = 0;
rOutSum = radiusPlus1 * (pr = pixels[yi]);
gOutSum = radiusPlus1 * (pg = pixels[yi + 1]);
bOutSum = radiusPlus1 * (pb = pixels[yi + 2]);
rSum += sumFactor * pr;
gSum += sumFactor * pg;
bSum += sumFactor * pb;
stack = stackStart;
for (i = 0; i < radiusPlus1; i++) {
stack.r = pr;
stack.g = pg;
stack.b = pb;
stack = stack.next;
}
for (i = 1; i < radiusPlus1; i++) {
p = yi + ((width - 1 < i ? width - 1 : i) << 2);
rSum += (stack.r = (pr = pixels[p])) * (rbs = radiusPlus1 - i);
gSum += (stack.g = (pg = pixels[p + 1])) * rbs;
bSum += (stack.b = (pb = pixels[p + 2])) * rbs;
rInSum += pr;
gInSum += pg;
bInSum += pb;
stack = stack.next;
}
stackIn = stackStart;
stackOut = stackEnd;
for (x = 0; x < width; x++) {
pixels[yi] = (rSum * mulSum) >> shgSum;
pixels[yi + 1] = (gSum * mulSum) >> shgSum;
pixels[yi + 2] = (bSum * mulSum) >> shgSum;
rSum -= rOutSum;
gSum -= gOutSum;
bSum -= bOutSum;
rOutSum -= stackIn.r;
gOutSum -= stackIn.g;
bOutSum -= stackIn.b;
p = (yw + ((p = x + radius + 1) < (width - 1) ? p : (width - 1))) << 2;
rInSum += (stackIn.r = pixels[p]);
gInSum += (stackIn.g = pixels[p + 1]);
bInSum += (stackIn.b = pixels[p + 2]);
rSum += rInSum;
gSum += gInSum;
bSum += bInSum;
stackIn = stackIn.next;
rOutSum += (pr = stackOut.r);
gOutSum += (pg = stackOut.g);
bOutSum += (pb = stackOut.b);
rInSum -= pr;
gInSum -= pg;
bInSum -= pb;
stackOut = stackOut.next;
yi += 4;
}
yw += width;
}
for (x = 0; x < width; x++) {
gInSum = bInSum = rInSum = gSum = bSum = rSum = 0;
yi = x << 2;
rOutSum = radiusPlus1 * (pr = pixels[yi]);
gOutSum = radiusPlus1 * (pg = pixels[yi + 1]);
bOutSum = radiusPlus1 * (pb = pixels[yi + 2]);
rSum += sumFactor * pr;
gSum += sumFactor * pg;
bSum += sumFactor * pb;
stack = stackStart;
for (i = 0; i < radiusPlus1; i++) {
stack.r = pr;
stack.g = pg;
stack.b = pb;
stack = stack.next;
}
yp = width;
for (i = 1; i < radiusPlus1; i++) {
yi = (yp + x) << 2;
rSum += (stack.r = (pr = pixels[yi])) * (rbs = radiusPlus1 - i);
gSum += (stack.g = (pg = pixels[yi + 1])) * rbs;
bSum += (stack.b = (pb = pixels[yi + 2])) * rbs;
rInSum += pr;
gInSum += pg;
bInSum += pb;
stack = stack.next;
if (i < (height - 1)) {
yp += width;
}
}
yi = x;
stackIn = stackStart;
stackOut = stackEnd;
for (y = 0; y < height; y++) {
p = yi << 2;
pixels[p] = (rSum * mulSum) >> shgSum;
pixels[p + 1] = (gSum * mulSum) >> shgSum;
pixels[p + 2] = (bSum * mulSum) >> shgSum;
rSum -= rOutSum;
gSum -= gOutSum;
bSum -= bOutSum;
rOutSum -= stackIn.r;
gOutSum -= stackIn.g;
bOutSum -= stackIn.b;
p = (x + (((p = y + radiusPlus1) < (height - 1) ? p : (height - 1)) * width)) << 2;
rSum += (rInSum += (stackIn.r = pixels[p]));
gSum += (gInSum += (stackIn.g = pixels[p + 1]));
bSum += (bInSum += (stackIn.b = pixels[p + 2]));
stackIn = stackIn.next;
rOutSum += (pr = stackOut.r);
gOutSum += (pg = stackOut.g);
bOutSum += (pb = stackOut.b);
rInSum -= pr;
gInSum -= pg;
bInSum -= pb;
stackOut = stackOut.next;
yi += width;
}
}
context.putImageData(imageData, 0, 0);
};
/**
* Defines a new helper object for Stack Blur Algorithm.
*/
function BlurStack() {
this.r = 0;
this.g = 0;
this.b = 0;
this.next = null;
}
/**
* Defines a gravity matrix object which handles collision detection.
* @param x number of columns in the matrix
* @param y number of rows in the matrix
* @param r grid size
*/
function CollisionMatrix(x, y, r) {
this.resolution = r;
this.xc = x;
this.yc = y;
this.matrix = new Array(x);
for (var i = 0; i <= (x + 5); i++) {
this.matrix[i] = new Array(y);
for (var j = 0; j <= (y + 5); ++j) {
this.matrix[i][j] = new DropItem(null);
}
}
}
/**
* Updates position of the given drop on the collision matrix.
* @param drop raindrop to be positioned/repositioned
* @param forceDelete if true the raindrop will be removed from the matrix
* @returns collisions if any
*/
CollisionMatrix.prototype.update = function(drop, forceDelete) {
if (drop.gid) {
if (!this.matrix[drop.gmx] || !this.matrix[drop.gmx][drop.gmy]) {
return null;
}
this.matrix[drop.gmx][drop.gmy].remove(drop);
if (forceDelete) {
return null;
}
drop.gmx = Math.floor(drop.x / this.resolution);
drop.gmy = Math.floor(drop.y / this.resolution);
if (!this.matrix[drop.gmx] || !this.matrix[drop.gmx][drop.gmy]) {
return null;
}
this.matrix[drop.gmx][drop.gmy].add(drop);
var collisions = this.collisions(drop);
if (collisions && collisions.next != null) {
return collisions.next;
}
} else {
drop.gid = Math.random().toString(36).substr(2, 9);
drop.gmx = Math.floor(drop.x / this.resolution);
drop.gmy = Math.floor(drop.y / this.resolution);
if (!this.matrix[drop.gmx] || !this.matrix[drop.gmx][drop.gmy]) {
return null;
}
this.matrix[drop.gmx][drop.gmy].add(drop);
}
return null;
};
/**
* Looks for collisions with the given raindrop.
* @param drop raindrop to be checked
* @returns DropItem list of drops that collide with it
*/
CollisionMatrix.prototype.collisions = function(drop) {
var item = new DropItem(null);
var first = item;
item = this.addAll(item, drop.gmx - 1, drop.gmy + 1);
item = this.addAll(item, drop.gmx, drop.gmy + 1);
item = this.addAll(item, drop.gmx + 1, drop.gmy + 1);
return first;
};
/**
* Appends all found drop at a given location to the given item.
* @param to item to which the results will be appended to
* @param x x position in the matrix
* @param y y position in the matrix
* @returns last discovered item on the list
*/
CollisionMatrix.prototype.addAll = function(to, x, y) {
if (x > 0 && y > 0 && x < this.xc && y < this.yc) {
var items = this.matrix[x][y];
while (items.next != null) {
items = items.next;
to.next = new DropItem(items.drop);
to = to.next;
}
}
return to;
};
/**
* Removed the drop from its current position
* @param drop to be removed
*/
CollisionMatrix.prototype.remove = function(drop) {
this.matrix[drop.gmx][drop.gmy].remove(drop);
};
/**
* Defines a linked list item.
*/
function DropItem(drop) {
this.drop = drop;
this.next = null;
}
/**
* Adds the raindrop to the end of the list.
* @param drop raindrop to be added
*/
DropItem.prototype.add = function(drop) {
var item = this;
while (item.next != null) {
item = item.next;
}
item.next = new DropItem(drop);
};
/**
* Removes the raindrop from the list.
* @param drop raindrop to be removed
*/
DropItem.prototype.remove = function(drop) {
var item = this;
var prevItem = null;
while (item.next != null) {
prevItem = item;
item = item.next;
if (item.drop.gid === drop.gid) {
prevItem.next = item.next;
}
}
};
rainyday.js的更多相关文章
- Rainyday.js – 使用 JavaScript 实现雨滴效果
Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...
- Rainyday.js – 傻眼了！竟然有如此逼真的雨滴效果
Rainyday.js 是一个轻量的 JavaScript 库,利用 HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果.Rainyday.js 尽可能的模拟现实的雨滴效果,几乎可以以假乱真了 ...
- Rainyday.js – Rendering Raindrops with JavaScript
Posted · Category:GPL License,Tools 直击现场 The idea behind Rainyday.js is to create a JavaScript libra ...
- 1、WIN2D学习记录（win2d实现JS雨天效果）
一.Win2D Win2D是微软开源的项目 它的github地址是 https://github.com/Microsoft/Win2D 里面有详细的文档 http://microsoft.githu ...
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- 让你心动的 HTML5 & CSS3 效果【附源码下载】
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...
- 【圣诞特献】Web 前端开发精华文章推荐【系列二十一】
<Web 前端开发精华文章推荐>2013年第九期(总第二十一期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 ...
- Stickup – 轻松实现元素固定效果的 jQuery 插件
粘贴是一个简单的 jQuery 插件,在页面滚动的时候固定一个元素到浏览器窗口的顶部,让其总是保持在视图中可见.这个插件作用于多页的网站,但是对于单页的布局有额外的功能.借助 CSS,还可以实现当前视 ...
- Ink – 帮助你快速创建响应式邮件（Email）的框架
Ink 可以帮助你快速创建响应的 HTML 电子邮件,可工作在任何设备和客户端.这个 CSS 框架帮助您构建可在任何设备上阅读的 HTML 电子邮件.曾经需要你兼顾各种邮件客户端的日子一去不复返了,I ...
随机推荐
- (CSharp)克隆控件事件
// https://stackoverflow.com/questions/6055038/how-to-clone-control-event-handlers-at-run-time // &q ...
- c语言中的string
1. strlen(char const* s); 函数传入的是c风格字符串(即以‘\0’结尾的字符数组),返回的长度为size_t(即unsigned int),其长度不包括'\0'. 2. str ...
- vue如何循环同一个echarts图表
因为我们知道echarts图表需要一个ID节点,所以我们循环echarts同一个图表时要考虑ID节点变化问题.废话不多说,直接上demo效果. 这里有一位分析师在不同的模拟组合,这时需求要在dialo ...
- 交叉编译工具链介绍《Building Embedded Linux Systems》
1.前言 配置和编译一个合适的GNU工具链是相对复杂的并且需要很精细的操作,包括你需要对不同软件库之间的依赖关系.它们的各自的任务,不同软件库版本情况都有比较好的了解,编译工具链是一个乏味的工作. 2 ...
- dateTimePicker编辑状态下，取值不正确的问题
当对dateTimePicker进行编辑,回车,调用函数处理dateTimePicker的value值时,其取值结果是你编辑之前的值,而不是你编辑后的值,虽然dateTimePicker.text的值 ...
- ASP.NET学习路线图（转）
如果你已经有较多的面向对象开发经验,跳过以下这两步: 第一步 掌握一门.NET面向对象语言,C#或VB.NET 我强烈反对在没系统学过一门面向对象(OO)语言的前提下去学ASP.NET. ASP.NE ...
- Thrift之java实例
一.java实例 1.下载与安装thrift工具 http://thrift.apache.org/download/ .服务器代码 服务Test实现类 package com.zychen.thri ...
- Nodejs-cli 填坑记
真的是玩玩没想到,一个cli竟然坑了我这么久,想当年写Python命令行工具的时候,哪有这么麻烦?随随便便写几下,添加个批处理命令脚本就搞定了.怎么Nodejs写一个就这么不顺利呢? 吐槽归吐槽,当我 ...
- js 获取服务器当前时间
//获取服务器时间 function getNowDate(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new window.XMLHttp ...
- Ubuntu 16.04 安装配置支持http2的nginx
第一步 安装最新版本的nginx 对于ubuntu16.04而言 直接装就是最新的 ``` sudo apt-get update sudo apt-get install nginx 查看Nginx ...