window.onload = function () {
    var Particle = /** @class */ (function () {
        function Particle(x, y, color, radius) {
            this.vx = 0;
            this.vy = 0;
            this.x = x;
            this.y = y;
            this.color = color;
            this.radius = radius;
        }
        Particle.prototype.draw = function () {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
            ctx.fillStyle = this.color;
            ctx.fill();
        };
        Particle.DEFAULT_RADIUS = 2.5;
        return Particle;
    }());
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    window.addEventListener("resize", function () {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });
    var particles = [];
    function randomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    function makeGroup(number, color, options) {
        var _a;
        var group = [];
        for (var i = 0; i < number; i++) {
            var particle = new Particle(randomInt(0, canvas.width), randomInt(0, canvas.height), color, (_a = options.radius) !== null && _a !== void 0 ? _a : Particle.DEFAULT_RADIUS);
            group.push(particle);
            particles.push(particle);
        }
        return group;
    }
    function interaction(group1, group2, options) {
        var _a, _b, _c;
        if (options === void 0) { options = {}; }
        options.g = (_a = options.g) !== null && _a !== void 0 ? _a : 0.1;
        options.maxDistance = (_b = options.maxDistance) !== null && _b !== void 0 ? _b : 100;
        options.minDistance = (_c = options.minDistance) !== null && _c !== void 0 ? _c : 0;
        for (var i = 0; i < group1.length; i++) {
            var fx = 0;
            var fy = 0;
            for (var j = 0; j < group2.length; j++) {
                var a = group1[i];
                var b = group2[j];
                var dx = a.x - b.x;
                var dy = a.y - b.y;
                var d = Math.sqrt(dx * dx + dy * dy);
                if (d > 0 && d < options.maxDistance && d > options.minDistance) {
                    var F = options.g / d;
                    fx += F * dx;
                    fy += F * dy;
                }
                a.vx = (a.vx + fx) * 0.5;
                a.vy = (a.vy + fy) * 0.5;
                a.x += a.vx * 0.005;
                a.y += a.vy * 0.005;
            }
        }
    }
    var blue = makeGroup(5000, "#0000ff", { radius: 1 });
    var red = makeGroup(1000, "#ff0000", { radius: 2.5 });
    var green = makeGroup(50, "#00ff00", { radius: 4 });
    function animate() {
        interaction(red, red, { g: -0.05, maxDistance: 250 });
        interaction(green, red, { g: -0.1, maxDistance: 500 });
        interaction(red, green, { g: -0.05, maxDistance: 250 });
        interaction(blue, red, { g: -0.4, maxDistance: 250 });
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "#000000";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        particles.forEach(function (particle) {
            particle.draw();
        });
        requestAnimationFrame(animate);
    }
    animate();
};