// create background element
let canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.style.cssText = `
    background: var(--background);
    position:fixed;
    left:0;
    top:0;
    z-index:-99999;
    `
// set it's size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let context = canvas.getContext('2d');

// this will be populated and used later
drawableObjectList = [];

// this is the object that'll look cool
class Point {
    constructor() {
        this.x = Math.random() * window.innerWidth;
        this.y = Math.random() * window.innerHeight;

        this.dx = (Math.random()) - 0.5;
        this.dy = (Math.random()) - 0.5;
    }
    draw() {
        context.fillStyle = "#2a2323"
        context.strokeStyle = "#2a2323"
        // find and draw links
        drawableObjectList.forEach((point) => {
            if (point.x > this.x - 100 && point.x < this.x + 100 &&
                point.y > this.y - 100 && point.y < this.y + 100) {
                context.beginPath()
                context.moveTo(this.x, this.y)
                context.lineTo(point.x, point.y)
                context.stroke();
            }
        });

        // draw point
        context.beginPath();
        context.arc(this.x, this.y, 3, 0, Math.PI * 2, false);
        context.fill();
        context.stroke();

        // move point
        this.x += this.dx;
        this.y += this.dy;

        // keep point in bounds
        if (this.x > window.innerWidth || this.x < 0) {
            this.dx *= -1
        }
        if (this.y > window.innerHeight || this.y < 0) {
            this.dy *= -1
        }
    }
}

// populate element array
for (let i = 0; i < 100; i++) {
    drawableObjectList.push(new Point());
}

function loop() {
    // Loop and clear frame
    requestAnimationFrame(loop);
    context.clearRect(0, 0, window.innerWidth, window.innerHeight);

    // Draw objects.
    drawableObjectList.forEach((point) => {
        point.draw();
    });

    // Handle page size change
    if (canvas.width != window.innerWidth) {
        canvas.width = window.innerWidth;
    }
    if (canvas.height != window.innerHeight) {
        canvas.height = window.innerHeight;
    }
}
loop();