Connected nodes - inspired by http://dribbble.com/shots/862906-Line
window.onload = function run() { | |
var width = window.innerWidth; | |
var height = window.innerHeight; | |
var elm = document.createElement('canvas'); | |
var pixelDensity = window.devicePixelRatio || 1; | |
var orbs = []; | |
var orbCount = window.innerHeight / 10; | |
elm.setAttribute('width', width * pixelDensity); | |
elm.setAttribute('height', height * pixelDensity); | |
elm.style.width = width + "px"; | |
elm.style.height = height + "px"; | |
var ctx = elm.getContext('2d'); | |
document.body.appendChild(elm); | |
function generateOrbs() { | |
orbs = []; | |
i = 0; | |
while(i < orbCount) { | |
orbs[i] = new orb; | |
++i; | |
} | |
} | |
window.addEventListener('resize', resize); | |
function resize() { | |
width = window.innerWidth; | |
height = window.innerHeight; | |
orbCount = window.innerHeight / 10; | |
elm.setAttribute('width', width * pixelDensity); | |
elm.setAttribute('height', height * pixelDensity); | |
elm.style.width = width + "px"; | |
elm.style.height = height + "px"; | |
generateOrbs(); | |
generateOrbConnections(); | |
} | |
function generateOrbConnections() { | |
for(var i = 0; i < orbs.length; ++i) { | |
var connections = ~~(Math.random() * 5); | |
(function generateConnection() { | |
var connectTo = ~~(Math.random()*orbs.length); | |
if ((orbs[i].connections.indexOf(orbs[connectTo])) != -1) { | |
generateConnection(); | |
} else { | |
orbs[i].connections.push(orbs[connectTo]); | |
} | |
})(); | |
} | |
} | |
function orb() { | |
this.radius = 10; | |
this.connections = []; | |
this.color = ['#CC9729', '#AF4332'][~~(Math.random() * 2)]; | |
this.x = ~~(Math.random()*(elm.width-this.radius)+this.radius); | |
this.y = ~~(Math.random()*(elm.height-this.radius)+this.radius); | |
this.xVelocity = (~~(Math.random() * 8)) * ((~~(Math.random()*2) == 0) ? -1 : 1); | |
this.yVelocity = (~~(Math.random() * 10)) * ((~~(Math.random()*2) == 0) ? -1 : 1); | |
return this; | |
} | |
orb.prototype.draw = function() { | |
ctx.fillStyle = this.color; | |
ctx.strokeStyle= this.color; | |
ctx.beginPath(); | |
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, 1); | |
ctx.fill(); | |
ctx.closePath(); | |
for(var i = 0; i < this.connections.length; ++i) { | |
ctx.beginPath(); | |
ctx.moveTo(this.x, this.y); | |
ctx.lineTo(this.connections[i].x, this.connections[i].y); | |
ctx.stroke(); | |
ctx.closePath(); | |
} | |
}; | |
orb.prototype.move = function() { | |
if (this.x + this.xVelocity +this.radius >= elm.width || this.x + this.xVelocity <= 0) { | |
this.xVelocity && (this.xVelocity -= Math.random() * 2) | |
this.xVelocity*=-1; | |
} | |
if (this.y + this.yVelocity < 0 || this.y + this.yVelocity + this.radius*2> elm.height) { | |
this.xVelocity && (this.yVelocity -= Math.random() * 2) | |
this.yVelocity*=-1; | |
} | |
this.x+=this.xVelocity; | |
this.y+=this.yVelocity; | |
this.draw(); | |
} | |
function tick() { | |
webkitRequestAnimationFrame(tick); | |
ctx.clearRect(0, 0, elm.width, elm.height); | |
for(var i = 0; i < orbs.length;++i) { | |
orbs[i].move(); | |
} | |
} | |
generateOrbs(); | |
generateOrbConnections(); | |
tick(); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment