Частицы, уклоняющиеся от курсора и другие частицы

Question

Я пытаюсь создать простую ванильную JS программу, в которой x количество частиц / объектов генерируется на экране, и они должны уклоняться друг от друга и мыши. Для общего уклонения я использовал https://gist.github.com/christopher4lis/f9ccb589ee8ecf751481f05a8e59b1dc, и частицы отлично работали, избегая друг друга, но теперь я застрял в реализации функции уклонения мыши.

Все, что я ' Мы пытались закончить тем, что либо частицы перекрываются друг с другом, либо какие-то другие ошибки.

У кого-нибудь есть какие-либо советы о том, как справиться с этой ситуацией, или есть фрагмент кода из предыдущего проекта?

import {c, canvas, mouse, people} from "./canvas.js";
import {distance} from "./utils.js";

// @ts-ignore
import {resolveCollision} from './util-elastic-collision.js';

export default class Person {
    private velocity: { x: number, y: number };
    private mass: number;
    constructor(
        private _x: number,
        private _y: number,
        private radius: number,
    ) {
        this.velocity = {
            x: (Math.random() - 0.5) * 2,
            y: (Math.random() - 0.5) * 2,
        }
        this.mass = 1;
    }

get x() {
    return this._x;
}

set x(x: number) {
    this._x = x;
}

get y() {
    return this._y;
}

set y(y: number) {
    this._y = y;
}

draw() {
    c.beginPath();
    c.arc(this._x, this._y, this.radius, 0, Math.PI * 2);
    c.fill();
}

update() {
    this.draw();
    this.keepDistance();

    // Bounce off the mouse // Failed
    for (let i = 0; i < people.length; i++) {
        let dist = distance(mouse.x, mouse.y, people[i].x, people[i].y) - 6 * this.radius;
        if (dist <= 0) {

            people[i].x += (mouse.x > people[i].x + this.radius) ? -1 : 1;
            people[i].y += (mouse.y > people[i].y + this.radius) ? -1 : 1;

        }
    }


    // Bounce off the walls
    if (this._x - this.radius < 0 || this._x + this.radius > canvas.width) {
        this.velocity.x *= -1;
    }

    if (this._y - this.radius < 0 || this._y + this.radius > canvas.height) {
        this.velocity.y *= -1;
    }

    this._x += this.velocity.x;
    this._y += this.velocity.y;
}

keepDistance() {
    // Bounce off other people
    for (let i = 0; i < people.length; i++) {
        if (people[i] === this) continue;
        let dist = distance(this._x, this._y, people[i].x, people[i].y) - 4 * this.radius;
        if (dist <= 0) {
            resolveCollision(this, people[i]);
        }
    }
}

}

Answer 1

Сначала я бы изменил:
dist = distance(this._x, this._y, people[i].x, people[i].y) - 4 * this.radius;

на следующее:
dist = distance(this._x, this._y, people[i].x, people[i].y) - (this.radius + people[i].radius);

Это должно дать вам реалистичные c столкновения, когда ваши круги разные radius

---

Затем, при столкновении объектов мыши, я бы начал с чего-то вроде:

    var dist = distance(mouse.x, mouse.y, people[i].x, people[i].y) - people[i].radius;
    if (dist <= 100) {
        let m = new Person(mouse.x, mouse.y, 100);
        //TODO set proper velocity
        m.velocity = { x: 2, y: 2 };
        resolveCollision(m, people[i]);
    }

Таким образом, мы повторно используем resolCollision, сохраняя тот же эффект, что и столкновение между другими объектами. , Вам нужно найти способ установить правильную скорость для мыши, если она предполагает, что мышь движется вправо и вниз.

Что-то еще, что я заметил, когда мы представили мышь resolveCollision просто меняет скорости:
https://github.com/AlverPalk/collision/blob/master/src/ts/util-elastic-collision.js#L58
Я думаю, что это должно также привести к уменьшению скоростей при столкновение, как потеря энергии при ударе, если не каждое столкновение с мышью увеличит скорость до точки, в которой вся система будет двигаться очень быстро

---

код на моей вилке:
https://github.com/heldersepu/collision/commits/master