Skip to content

Instantly share code, notes, and snippets.

@OmShiv OmShiv/nodes-html5.js
Last active Dec 10, 2015

Embed
What would you like to do?
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();
}
*{
padding: 0px;
margin: 0px;
}
html {
background: #303338;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.