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