Chaospott
/
site
42
1
Fork 1
Code Issues Pull Requests Releases Activity

fixxed bug.... propably

This commit is contained in:
Timm Szigat 2015-01-26 11:56:51 +01:00
parent a219eab24f
commit dedc2a752f
1 changed files with 158 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

316
js/eyecandy.js
View File

@ -1,191 +1,191 @@
(function() { (function() {
var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var element = document.getElementById('demo-canvas'); var element = document.getElementById('demo-canvas');
element.style.backgroundImage="url('images/gekruessel.png')"; element.style.backgroundImage="url('images/gekruessel.png')";
element.style.backgroundPosition="center center"; element.style.backgroundPosition="center center";
element.style.height="300px"; element.style.height="300px";
} else { } else {
var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;
// Main // Main
initHeader(); initHeader();
initAnimation(); initAnimation();
addListeners(); addListeners();
}
function initHeader() { function initHeader() {
width = window.innerWidth; width = window.innerWidth;
height = 300; height = 300;
target = {x: width/2, y: height/2}; target = {x: width/2, y: height/2};
largeHeader = document.getElementById('large-header'); largeHeader = document.getElementById('large-header');
largeHeader.style.height = height+'px'; largeHeader.style.height = height+'px';
canvas = document.getElementById('demo-canvas'); canvas = document.getElementById('demo-canvas');
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
ctx = canvas.getContext('2d'); ctx = canvas.getContext('2d');
// create points // create points
points = []; points = [];
for(var x = 0; x < width; x = x + width/20) { for(var x = 0; x < width; x = x + width/20) {
for(var y = 0; y < height; y = y + height/20) { for(var y = 0; y < height; y = y + height/20) {
var px = x + Math.random()*width/20; var px = x + Math.random()*width/20;
var py = y + Math.random()*height/20; var py = y + Math.random()*height/20;
var p = {x: px, originX: px, y: py, originY: py }; var p = {x: px, originX: px, y: py, originY: py };
points.push(p); points.push(p);
} }
} }
// for each point find the 5 closest points // for each point find the 5 closest points
for(var i = 0; i < points.length; i++) { for(var i = 0; i < points.length; i++) {
var closest = []; var closest = [];
var p1 = points[i]; var p1 = points[i];
for(var j = 0; j < points.length; j++) { for(var j = 0; j < points.length; j++) {
var p2 = points[j] var p2 = points[j]
if(!(p1 == p2)) { if(!(p1 == p2)) {
var placed = false; var placed = false;
for(var k = 0; k < 5; k++) { for(var k = 0; k < 5; k++) {
if(!placed) { if(!placed) {
if(closest[k] == undefined) { if(closest[k] == undefined) {
closest[k] = p2; closest[k] = p2;
placed = true; placed = true;
} }
} }
} }
for(var k = 0; k < 5; k++) { for(var k = 0; k < 5; k++) {
if(!placed) { if(!placed) {
if(getDistance(p1, p2) < getDistance(p1, closest[k])) { if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
closest[k] = p2; closest[k] = p2;
placed = true; placed = true;
} }
} }
} }
} }
} }
p1.closest = closest; p1.closest = closest;
} }
// assign a circle to each point // assign a circle to each point
for(var i in points) { for(var i in points) {
var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)'); var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
points[i].circle = c; points[i].circle = c;
} }
} }
// Event handling // Event handling
function addListeners() { function addListeners() {
if(!('ontouchstart' in window)) { if(!('ontouchstart' in window)) {
window.addEventListener('mousemove', mouseMove); window.addEventListener('mousemove', mouseMove);
} }
window.addEventListener('scroll', scrollCheck); window.addEventListener('scroll', scrollCheck);
window.addEventListener('resize', resize); window.addEventListener('resize', resize);
} }
function mouseMove(e) { function mouseMove(e) {
var posx = posy = 0; var posx = posy = 0;
if (e.pageX || e.pageY) { if (e.pageX || e.pageY) {
posx = e.pageX; posx = e.pageX;
posy = e.pageY; posy = e.pageY;
} }
else if (e.clientX || e.clientY) { else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
} }
target.x = posx; target.x = posx;
target.y = posy; target.y = posy;
} }
function scrollCheck() { function scrollCheck() {
if(document.body.scrollTop > height) animateHeader = false; if(document.body.scrollTop > height) animateHeader = false;
else animateHeader = true; else animateHeader = true;
} }
function resize() { function resize() {
width = window.innerWidth; width = window.innerWidth;
height = 300; height = 300;
largeHeader.style.height = height+'px'; largeHeader.style.height = height+'px';
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
} }
// animation // animation
function initAnimation() { function initAnimation() {
animate(); animate();
for(var i in points) { for(var i in points) {
shiftPoint(points[i]); shiftPoint(points[i]);
} }
} }
function animate() { function animate() {
if(animateHeader) { if(animateHeader) {
ctx.clearRect(0,0,width,height); ctx.clearRect(0,0,width,height);
for(var i in points) { for(var i in points) {
// detect points in range // detect points in range
if(Math.abs(getDistance(target, points[i])) < 4000) { if(Math.abs(getDistance(target, points[i])) < 4000) {
points[i].active = 0.3; points[i].active = 0.3;
points[i].circle.active = 0.6; points[i].circle.active = 0.6;
} else if(Math.abs(getDistance(target, points[i])) < 20000) { } else if(Math.abs(getDistance(target, points[i])) < 20000) {
points[i].active = 0.1; points[i].active = 0.1;
points[i].circle.active = 0.3; points[i].circle.active = 0.3;
} else if(Math.abs(getDistance(target, points[i])) < 40000) { } else if(Math.abs(getDistance(target, points[i])) < 40000) {
points[i].active = 0.02; points[i].active = 0.02;
points[i].circle.active = 0.1; points[i].circle.active = 0.1;
} else { } else {
points[i].active = 0; points[i].active = 0;
points[i].circle.active = 0; points[i].circle.active = 0;
} }
drawLines(points[i]); drawLines(points[i]);
points[i].circle.draw(); points[i].circle.draw();
} }
} }
requestAnimationFrame(animate); requestAnimationFrame(animate);
} }
function shiftPoint(p) { function shiftPoint(p) {
TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100, TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
y: p.originY-50+Math.random()*100, ease:Circ.easeInOut, y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
onComplete: function() { onComplete: function() {
shiftPoint(p); shiftPoint(p);
}}); }});
} }
// Canvas manipulation // Canvas manipulation
function drawLines(p) { function drawLines(p) {
if(!p.active) return; if(!p.active) return;
for(var i in p.closest) { for(var i in p.closest) {
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(p.x, p.y); ctx.moveTo(p.x, p.y);
ctx.lineTo(p.closest[i].x, p.closest[i].y); ctx.lineTo(p.closest[i].x, p.closest[i].y);
ctx.strokeStyle = 'rgba(210,212,188,'+ p.active+')'; ctx.strokeStyle = 'rgba(210,212,188,'+ p.active+')';
ctx.stroke(); ctx.stroke();
} }
} }
function Circle(pos,rad,color) { function Circle(pos,rad,color) {
var _this = this; var _this = this;
// constructor // constructor
(function() { (function() {
_this.pos = pos || null; _this.pos = pos || null;
_this.radius = rad || null; _this.radius = rad || null;
_this.color = color || null; _this.color = color || null;
})(); })();
this.draw = function() { this.draw = function() {
if(!_this.active) return; if(!_this.active) return;
ctx.beginPath(); ctx.beginPath();
ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false); ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(210,212,188,'+ _this.active+')'; ctx.fillStyle = 'rgba(210,212,188,'+ _this.active+')';
ctx.fill(); ctx.fill();
}; };
} }
// Util // Util
function getDistance(p1, p2) { function getDistance(p1, p2) {
return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2); return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
}
} }
})(); })();