CodePen Profile Banner

codepen-profile-banner.markdown

CodePen Profile Banner

Just making a banner with the particle thing

A Pen by Kyle Shanks on CodePen.

License.

index.html

<canvas id="cnv"></canvas>

script.js

// --- 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();

style.stylus

#cnv
    position absolute
    top 0
    left 0
    right 0
    bottom 0