Difference between revisions of "Template:Pitt"

Line 77: Line 77:
 
});
 
});
 
var c = document.getElementById("bannerCanvas");
 
var c = document.getElementById("bannerCanvas");
−
c.height = $(document).height() / 10;
+
c.height = $(window).height();
−
c.width = $(document).width() / 10;
+
c.width = $(window).width();
 
var ctx = c.getContext('2d');
 
var ctx = c.getContext('2d');
 
ctx.fillRect(0, 0, c.width, c.height);
 
ctx.fillRect(0, 0, c.width, c.height);
Line 249: Line 249:
  
 
var c = document.getElementById("bannerCanvas");
 
var c = document.getElementById("bannerCanvas");
−
c.height = $(document).height() / 10;
+
c.height = $(window).height();
−
c.width = $(document).width() / 10;
+
c.width = $(window).width();
 
var ctx = c.getContext('2d');
 
var ctx = c.getContext('2d');
−
 
 
ctx.fillRect(0, 0, c.width, c.height);
 
ctx.fillRect(0, 0, c.width, c.height);
 +
 +
var circles = [];
  
 
$("#bannerContainer").mousemove(function(event){
 
$("#bannerContainer").mousemove(function(event){
 +
circles.push(event.clientX);
 +
circles.push(event.clientY);
 +
circles.push(400);
 +
});
 +
 +
function render(){
 
var c = document.getElementById("bannerCanvas");
 
var c = document.getElementById("bannerCanvas");
 
var ctx = c.getContext('2d');
 
var ctx = c.getContext('2d');
 +
ctx.fillRect(0, 0, c.width, c.height);
 
var iD= ctx.getImageData(0, 0, c.width, c.height);
 
var iD= ctx.getImageData(0, 0, c.width, c.height);
 
var data = iD.data;
 
var data = iD.data;
−
var x, y, color;
+
var color;
−
 
+
−
for(y = 0; y < c.height; y++) {
+
for(var z = 0; z < circles.length; z += 3){
−
for(x = 0; x < c.width; x++) {
+
for(var y = Math.max(0, circles[z + 1] - 10); y < Math.min(c.height, circles[z + 1] + 10); y++){
−
color = 20 / c.width * Math.max(0, 5 * c.width - (10 * x - event.pageX) * (10 * x - event.pageX) - (10 * y - event.pageY) * (10 * y - event.pageY));
+
for(var x = Math.max(0, circles[z] - 10); x < Math.min(c.width, circles[z] + 10); x++){
−
data[((c.width * y) + x) * 4] += color;
+
color = 1 / 5 / c.width * Math.max(0, 5 * c.width - (x - circles[z]) * (x - circles[z]) - (y - circles[z+1]) * (y - circles[z+1]));
−
data[((c.width * y) + x) * 4 + 1] += color;
+
data[((c.width * y) + x) * 4] = Math.max(data[((c.width * y) + x) * 4], circles[z+2] * color);
−
data[((c.width * y) + x) * 4 + 2] += color;
+
data[((c.width * y) + x) * 4 + 1] = Math.max(data[((c.width * y) + x) * 4 + 1], circles[z+2] * color);
 +
data[((c.width * y) + x) * 4 + 2] = Math.max(data[((c.width * y) + x) * 4 + 2], circles[z+2] * color);
 +
}
 +
}
 +
circles[z+2] -= 3;
 +
if(circles[z+2] < 0){
 +
circles.splice(z, 3);
 +
z -= 3;
 
}
 
}
 
}
 
}
 
ctx.putImageData(iD, 0, 0);
 
ctx.putImageData(iD, 0, 0);
−
 
−
});
 
−
 
−
function fader(){
 
−
var c = document.getElementById("bannerCanvas");
 
−
var ctx = c.getContext('2d');
 
−
ctx.globalCompositeOperation = "darken";
 
−
ctx.fillStyle = "rgba(0, 0, 0, 0.01)";
 
−
ctx.fillRect(0, 0, c.width, c.height);
 
 
}
 
}
  
−
setInterval(fader, 50);
+
setInterval(render, 25);
  
 
});
 
});
Line 449: Line 455:
  
 
#bannerCanvas {
 
#bannerCanvas {
−
position: absolute;
+
position: fixed;
 
width: 100%;
 
width: 100%;
 
z-index:-1;
 
z-index:-1;

Revision as of 16:24, 5 June 2015