No puede seleccionar más de 25 temas
Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
187 líneas
5.9 KiB
187 líneas
5.9 KiB
(function () {
|
|
|
|
var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;
|
|
|
|
// Main
|
|
initHeader();
|
|
initAnimation();
|
|
addListeners();
|
|
|
|
function initHeader() {
|
|
width = window.innerWidth;
|
|
height = window.innerHeight;
|
|
target = { x: width / 2, y: height / 2 };
|
|
|
|
largeHeader = document.getElementById('intro');
|
|
largeHeader.style.height = height + 'px';
|
|
|
|
canvas = document.getElementById('pollyfill-canvas');
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
ctx = canvas.getContext('2d');
|
|
|
|
// create points
|
|
points = [];
|
|
for (var x = 0; x < width; x = x + width / 20) {
|
|
for (var y = 0; y < height; y = y + height / 20) {
|
|
var px = x + Math.random() * width / 20;
|
|
var py = y + Math.random() * height / 20;
|
|
var p = { x: px, originX: px, y: py, originY: py };
|
|
points.push(p);
|
|
}
|
|
}
|
|
|
|
// for each point find the 5 closest points
|
|
for (var i = 0; i < points.length; i++) {
|
|
var closest = [];
|
|
var p1 = points[i];
|
|
for (var j = 0; j < points.length; j++) {
|
|
var p2 = points[j]
|
|
if (!(p1 == p2)) {
|
|
var placed = false;
|
|
for (var k = 0; k < 5; k++) {
|
|
if (!placed) {
|
|
if (closest[k] == undefined) {
|
|
closest[k] = p2;
|
|
placed = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
for (var k = 0; k < 5; k++) {
|
|
if (!placed) {
|
|
if (getDistance(p1, p2) < getDistance(p1, closest[k])) {
|
|
closest[k] = p2;
|
|
placed = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
p1.closest = closest;
|
|
}
|
|
|
|
// assign a circle to each point
|
|
for (var i in points) {
|
|
var c = new Circle(points[i], 2 + Math.random() * 2, 'rgba(255,255,255,0.3)');
|
|
points[i].circle = c;
|
|
}
|
|
}
|
|
|
|
// Event handling
|
|
function addListeners() {
|
|
if (!('ontouchstart' in window)) {
|
|
window.addEventListener('mousemove', mouseMove);
|
|
}
|
|
window.addEventListener('scroll', scrollCheck);
|
|
window.addEventListener('resize', resize);
|
|
}
|
|
|
|
function mouseMove(e) {
|
|
var posx = posy = 0;
|
|
if (e.pageX || e.pageY) {
|
|
posx = e.pageX;
|
|
posy = e.pageY;
|
|
}
|
|
else if (e.clientX || e.clientY) {
|
|
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
|
|
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
|
|
}
|
|
target.x = posx;
|
|
target.y = posy;
|
|
}
|
|
|
|
function scrollCheck() {
|
|
if (document.body.scrollTop > height) animateHeader = false;
|
|
else animateHeader = true;
|
|
}
|
|
|
|
function resize() {
|
|
width = window.innerWidth;
|
|
height = window.innerHeight;
|
|
largeHeader.style.height = height + 'px';
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
}
|
|
|
|
// animation
|
|
function initAnimation() {
|
|
animate();
|
|
for (var i in points) {
|
|
shiftPoint(points[i]);
|
|
}
|
|
}
|
|
|
|
function animate() {
|
|
if (animateHeader) {
|
|
ctx.clearRect(0, 0, width, height);
|
|
for (var i in points) {
|
|
// detect points in range
|
|
if (Math.abs(getDistance(target, points[i])) < 4000) {
|
|
points[i].active = 0.3;
|
|
points[i].circle.active = 0.6;
|
|
} else if (Math.abs(getDistance(target, points[i])) < 20000) {
|
|
points[i].active = 0.1;
|
|
points[i].circle.active = 0.3;
|
|
} else if (Math.abs(getDistance(target, points[i])) < 40000) {
|
|
points[i].active = 0.02;
|
|
points[i].circle.active = 0.1;
|
|
} else {
|
|
points[i].active = 0;
|
|
points[i].circle.active = 0;
|
|
}
|
|
|
|
drawLines(points[i]);
|
|
points[i].circle.draw();
|
|
}
|
|
}
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
function shiftPoint(p) {
|
|
TweenLite.to(p, 1 + 1 * Math.random(), {
|
|
x: p.originX - 50 + Math.random() * 100,
|
|
y: p.originY - 50 + Math.random() * 100, ease: Circ.easeInOut,
|
|
onComplete: function () {
|
|
shiftPoint(p);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Canvas manipulation
|
|
function drawLines(p) {
|
|
if (!p.active) return;
|
|
for (var i in p.closest) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(p.x, p.y);
|
|
ctx.lineTo(p.closest[i].x, p.closest[i].y);
|
|
ctx.strokeStyle = 'rgba(255,255,255,' + p.active + ')';
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
function Circle(pos, rad, color) {
|
|
var _this = this;
|
|
|
|
// constructor
|
|
(function () {
|
|
_this.pos = pos || null;
|
|
_this.radius = rad || null;
|
|
_this.color = color || null;
|
|
})();
|
|
|
|
this.draw = function () {
|
|
if (!_this.active) return;
|
|
ctx.beginPath();
|
|
ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
|
|
ctx.fillStyle = 'rgba(255,255,255,' + _this.active + ')';
|
|
ctx.fill();
|
|
};
|
|
}
|
|
|
|
// Util
|
|
function getDistance(p1, p2) {
|
|
return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
|
|
}
|
|
|
|
})();
|