|
// --- Setup ----------------------------------------------- |
|
// - Canvas Context - |
|
var ctx = document.getElementById('cnv').getContext('2d'); |
|
ctx.canvas.height = window.innerHeight; |
|
ctx.canvas.width = window.innerWidth; |
|
|
|
// - Particles - |
|
var particleCount = 0; |
|
var particles = []; |
|
var colors = ['rgba(255,221,34,0.8)','rgba(187,51,255,0.8)','rgba(68,255,136,0.8)','rgba(0,255,255,0.8)','rgba(255,51,51,0.8)']; |
|
|
|
// - Particle Constructor - |
|
function Particle(x,y,vx,vy) { |
|
this.id = particleCount++; |
|
this.r = 3; |
|
this.x = x || (Math.random()*ctx.canvas.width); |
|
this.y = y || (Math.random()*ctx.canvas.height); |
|
this.vx = vx || (Math.random()*11)-5; |
|
this.vy = vy || (Math.random()*11)-5; |
|
this.color = colors[Math.floor(Math.random()*colors.length)]; |
|
|
|
// Just so the particle is not stationary |
|
if(!this.vx && !this.vy) {this.vy = -1} |
|
} |
|
// --------------------------------------------------------- |
|
|
|
// --- Canvas Listener ------------------------------------- |
|
window.addEventListener('resize', function(){ |
|
ctx.canvas.width = window.innerWidth; |
|
ctx.canvas.height = window.innerHeight; |
|
// particleResizeCheck(); |
|
}, false); |
|
// --------------------------------------------------------- |
|
|
|
// --- Functions ------------------------------------------- |
|
function init() { |
|
reset(); |
|
frameFunction(); |
|
} |
|
function reset() { |
|
particles = []; |
|
for(var i = 0; i < 32; i++) { particles.push(new Particle); } |
|
} |
|
|
|
function frameFunction() { |
|
// Cover previous frame |
|
coverFrame(); |
|
// - Updating particle positions - |
|
for(var i in particles) { updateParticlePos(particles[i]); } |
|
// - Drawing functions - |
|
drawLines(); |
|
drawParticles(); |
|
|
|
// Next Frame |
|
requestAnimationFrame(frameFunction); |
|
} |
|
|
|
function coverFrame() { |
|
ctx.fillStyle = 'rgba(0,10,35,1)'; // change opacity for fade |
|
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); |
|
} |
|
|
|
function updateParticlePos(p) { |
|
var height = ctx.canvas.height, width = ctx.canvas.width; |
|
p.x += p.vx/10; |
|
p.y += p.vy/10; |
|
|
|
// Setting Outer Boundaries |
|
if( ((p.x - p.r) < 0) || (p.x > (width - p.r)) ) { p.vx = -(p.vx); } |
|
else if( ((p.y - p.r) < 0) || (p.y > (height - p.r)) ) { p.vy = -(p.vy); } |
|
|
|
if((p.x - p.r) < 0) { p.x = 0 + p.r; } |
|
else if((p.x + p.r) > width) { p.x = width - p.r; } |
|
else if((p.y - p.r) < 0) { p.y = 0 + p.r; } |
|
else if((p.y + p.r) > height) { p.y = height - p.r; } |
|
} |
|
|
|
function drawParticles() { |
|
ctx.lineWidth = 2; |
|
for(var i in particles) { |
|
ctx.beginPath(); |
|
ctx.fillStyle = particles[i].color||'rgba(255,255,255,0.9)'; |
|
ctx.arc(particles[i].x,particles[i].y,particles[i].r,0,2*Math.PI); |
|
ctx.fill(); |
|
} |
|
} |
|
|
|
function proximityCheck(c1,c2) { |
|
var dx = c1.x - c2.x, dy = c1.y - c2.y, dist = Math.sqrt(dx * dx + dy * dy); |
|
return (dist < 200); |
|
} |
|
|
|
function drawLines() { |
|
for(var i in particles) { |
|
for(var j = i; j < particles.length; j++) { |
|
if((i !== j) && proximityCheck(particles[i],particles[j])) { |
|
drawLine(particles[i].x,particles[i].y,particles[j].x,particles[j].y,2); |
|
} |
|
} |
|
} |
|
} |
|
|
|
function drawLine(x1,y1,x2,y2,mod) { |
|
var op = 1/(Math.sqrt( Math.pow((x2-x1),2) + Math.pow((y2-y1),2) )/24); |
|
ctx.lineWidth = 1; |
|
ctx.strokeStyle = `rgba(255,255,255,${(op*mod) - 0.21})`; |
|
ctx.beginPath(); |
|
ctx.lineTo(x1,y1); |
|
ctx.lineTo(x2,y2); |
|
ctx.stroke(); |
|
} |
|
// --------------------------------------------------------- |
|
|
|
// - Go Time - |
|
init(); |