fixed high cpu consumption on mobile devices
This commit is contained in:
Timm Szigat
parent
2355d858d4
commit
a219eab24f
BIN
images/gekruessel.png
Normal file
BIN
images/gekruessel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 930 KiB |
352
js/eyecandy.js
352
js/eyecandy.js
@ -1,185 +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)) {
|
||||||
|
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;
|
||||||
|
|
||||||
// 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
|
||||||
|
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 = 300;
|
||||||
|
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(210,212,188,'+ 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(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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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 = 300;
|
|
||||||
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(210,212,188,'+ 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(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);
|
|
||||||
}
|
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user