87 lines
3.3 KiB
JavaScript
87 lines
3.3 KiB
JavaScript
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();
|
|
};
|