Created
June 2, 2017 14:36
-
-
Save Driptap/2e3d33ad490208a8e53b6f67d52e8af4 to your computer and use it in GitHub Desktop.
Spider thing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
</head> | |
<body style="background: black; position: fixed; top:0; left:0; right: 0; bottom: 0;"> | |
<canvas id='demo-canvas'></canvas> | |
<div id='large-header'></div> | |
</body> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenLite.min.js" integrity="sha256-Y7X151r2Tk9/N3WcxW1qQn/phEPJ9mY8uOxqaI4AWW4=" crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min.js" integrity="sha256-kr/+vvM0q1Rat0AWEwvGb5hnYkh6gnuf4HnVtwbmCd0=" crossorigin="anonymous"></script> | |
<script | |
src="https://code.jquery.com/jquery-3.2.1.min.js" | |
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" | |
crossorigin="anonymous"></script> | |
<script> | |
(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('large-header'); | |
largeHeader.style.height = height+'px'; | |
canvas = document.getElementById('demo-canvas'); | |
canvas.width = width; | |
canvas.height = height-10; | |
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); | |
} | |
$(document).on("pagecreate",function(event){ | |
$(window).on("orientationchange",function(){ | |
// window.location.reload(); | |
if(window.orientation == 0){ | |
width = window.innerWidth; | |
height = window.innerHeight; | |
console.log(height) | |
largeHeader.style.height = height+'px'; | |
canvas.width = width; | |
canvas.height = height; | |
}else{ | |
console.log('landscape'); | |
width = window.innerWidth; | |
height = window.innerHeight; | |
height=height*2; | |
console.log(height) | |
largeHeader.style.height = height+'px'; | |
canvas.width = width; | |
canvas.height = height; | |
} | |
}); | |
}); | |
})(); | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment