From dedc2a752fa583d76941df38aecc76467401726d Mon Sep 17 00:00:00 2001 From: Timm Szigat Date: Mon, 26 Jan 2015 11:56:51 +0100 Subject: [PATCH] fixxed bug.... propably --- js/eyecandy.js | 316 ++++++++++++++++++++++++------------------------- 1 file changed, 158 insertions(+), 158 deletions(-) diff --git a/js/eyecandy.js b/js/eyecandy.js index 3ccb5f7..f2974cf 100644 --- a/js/eyecandy.js +++ b/js/eyecandy.js @@ -1,191 +1,191 @@ (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)) { var element = document.getElementById('demo-canvas'); element.style.backgroundImage="url('images/gekruessel.png')"; element.style.backgroundPosition="center center"; element.style.height="300px"; - } else { - var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true; - + } else { // Main initHeader(); initAnimation(); addListeners(); + } - function initHeader() { - width = window.innerWidth; - height = 300; - target = {x: width/2, y: height/2}; + function initHeader() { + width = window.innerWidth; + height = 300; + target = {x: width/2, y: height/2}; - largeHeader = document.getElementById('large-header'); - largeHeader.style.height = height+'px'; + largeHeader = document.getElementById('large-header'); + largeHeader.style.height = height+'px'; - canvas = document.getElementById('demo-canvas'); - canvas.width = width; - canvas.height = height; - ctx = canvas.getContext('2d'); + canvas = document.getElementById('demo-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); - } - } + // 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 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; - } + 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; - } - } + // 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); - } + // 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 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 scrollCheck() { + if(document.body.scrollTop > height) animateHeader = false; + else animateHeader = true; + } - function resize() { - width = window.innerWidth; - height = 300; - largeHeader.style.height = height+'px'; - canvas.width = width; - canvas.height = height; - } + function resize() { + width = window.innerWidth; + height = 300; + largeHeader.style.height = height+'px'; + canvas.width = width; + canvas.height = height; + } - // animation - function initAnimation() { - animate(); - for(var i in points) { - shiftPoint(points[i]); - } - } + // 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; - } + 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); - } + 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); - }}); - } + 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(210,212,188,'+ p.active+')'; - ctx.stroke(); - } - } + // 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(210,212,188,'+ p.active+')'; + ctx.stroke(); + } + } - function Circle(pos,rad,color) { - var _this = this; + function Circle(pos,rad,color) { + var _this = this; - // constructor - (function() { - _this.pos = pos || null; - _this.radius = rad || null; - _this.color = color || null; - })(); + // 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(210,212,188,'+ _this.active+')'; - ctx.fill(); - }; - } + 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(210,212,188,'+ _this.active+')'; + ctx.fill(); + }; + } - // Util - function getDistance(p1, p2) { - return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2); - } + // Util + function getDistance(p1, p2) { + return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2); } })();