/*
    -- Particles
    -- version 0.2
*/

/*
    -- YOU CAN CHANGE THE VALUES BELOW IF YOU WANT
       DIFFERENT RESULTS. I WAS TOO LAZY TO MAKE A
       CONTROL BOX.
*/

const COUNT = 30,                /* NUMBER OF PARTICLES */
      LINE_WIDTH = 15,           /* THICKNESS OF STROKES */

      /* SELF EXPLANATORY */
      BACKGROUND = "#111",
      FOREGROUND = "#FFF",       /* random_color(); */

      /* THE RANGE IN WHICH THE LINES ARE DRAWN */
      MIN_DISTANCE = 100,
      MAX_DISTANCE = 280,

      /* SPEED OF LINE DRAWING */
      GROWTH = 0.02,
      
      /* DEFINES A RANGE BEYOND THE VIEWPORT FOR PARTICLES */
      OFFSET = 50,

      /* THE RANGE OF RANDOM VALUES MADE FOR PARTICLES */
      RADIUS = [5, 7],
      SPEED = [-50, 50],
      ANGLE = [2, 8];

const T = Math.PI * 2,
      X = 0, Y = 1;

let cvs = document.getElementById("particles"),
    ctx = cvs.getContext("2d"),
    area = { w: null, h: null },
    
    random = (min, max) => ~~((Math.random() * (max - min + 1) + min) * 100) / 100,
    random_color = () => `rgb(${~~random(0, 255)}, ${~~random(0, 255)}, ${~~random(0, 255)})`,
    
    distance = (p1, p2) => ((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2) ** 0.5,
    
    particles = [],
    lines = [],

    line_path,
    arc_path;

class Particle
{
    constructor (x, y) {
        this.x = x;
        this.y = y;

        this.size = random(...RADIUS)
        this.radius = this.size;

        this.angle_speed = random(...ANGLE) / 100;
        this.angle = Math.random() * T;

        this.speed = [
            random(...SPEED) / 100,
            random(...SPEED) / 100
        ];
    }

    draw () {
        arc_path.moveTo(this.x + this.radius, this.y);
        arc_path.arc(this.x, this.y, this.radius, 0, T);
    }

    update () {
        this.radius = this.size * (1 + Math.abs(Math.sin(this.angle)));
        this.angle = (this.angle + this.angle_speed) % T;

        this.x = Math.max(this.radius - OFFSET, Math.min(area.w - this.radius + OFFSET, this.x + this.speed[X]));
        this.y = Math.max(this.radius - OFFSET, Math.min(area.h - this.radius + OFFSET, this.y + this.speed[Y]));

        if (this.x + this.radius === area.w + OFFSET || this.x - this.radius === -OFFSET) this.speed[X] *= -1;
        if (this.y + this.radius === area.h + OFFSET || this.y - this.radius === -OFFSET) this.speed[Y] *= -1;
    }
}

class Line
{
    constructor (p1, p2) {
        this.p1 = p1;
        this.p2 = p2;
        this.growth = 0;
    }

    update () {
        this.distance = distance(this.p1, this.p2);
        this.active = this.distance > MIN_DISTANCE && this.distance < MAX_DISTANCE;

        this.growth = Math.max(0, Math.min(1, this.growth + GROWTH * (this.active ? 1 : -1)));
    }

    draw () {
        if (this.growth === 0) return;

        if (this.growth > 0.6) {
            line_path.moveTo(this.p1.x, this.p1.y);
            line_path.lineTo(this.p2.x, this.p2.y);
            return;
        }

        let vector = [this.p2.x - this.p1.x, this.p2.y - this.p1.y];

        line_path.moveTo(this.p1.x, this.p1.y);
        line_path.lineTo(this.p1.x + this.growth * vector[X], this.p1.y + this.growth * vector[Y]);

        line_path.moveTo(this.p2.x, this.p2.y);
        line_path.lineTo(this.p2.x - this.growth * vector[X], this.p2.y - this.growth * vector[Y]);
    }
}

function size_setup () {
    let w = cvs.clientWidth,
        h = cvs.clientHeight;
    
    area.w = Math.round(w);
    area.h = Math.round(h);

    cvs.width = Math.round(w * devicePixelRatio);
    cvs.height = Math.round(h * devicePixelRatio);

    ctx.scale(devicePixelRatio, devicePixelRatio);
}

function init_particles () {
    lines.length = 0;
    particles.length = 0;

    let i, j;

    for (i = 0; i < COUNT; i++) {
        particles.push(new Particle(random(0, area.w), random(0, area.h)));
    }

    for (i = 0; i < COUNT; i++) {
        for (j = i + 1; j < COUNT; j++) {
            lines.push(new Line(particles[i], particles[j]));
        }
    }
    
    ctx.fillStyle = BACKGROUND;
    ctx.strokeStyle = FOREGROUND;
    
    ctx.lineCap = ctx.lineJoin = "round";
    ctx.lineWidth = LINE_WIDTH;
}

function draw_particles () {
    ctx.fillRect(0, 0, area.w, area.h);

    arc_path = new Path2D;
    line_path = new Path2D;
    
    for (let i = 0; i < COUNT; i++) {
        particles[i].draw(arc_path);
        particles[i].update();
    }

    for (let i = 0, l = lines.length; i < l; i++) {
        lines[i].update();
        lines[i].draw();
    }

    ctx.stroke(line_path);
    ctx.stroke(arc_path);

    ctx.save();
    
    ctx.lineWidth *= 0.5;
    ctx.strokeStyle = BACKGROUND;
    
    ctx.stroke(line_path);
    ctx.stroke(arc_path);

    ctx.restore();
    ctx.fill(arc_path);

    requestAnimationFrame(draw_particles);
}

onload = function () {
    size_setup();
    init_particles();
    
    addEventListener("resize", () => {
        size_setup();
        init_particles();
    });

    draw_particles();
}